diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss index f77c966cad..388e6fba6b 100644 --- a/lms/static/sass/multicourse/_media-kit.scss +++ b/lms/static/sass/multicourse/_media-kit.scss @@ -1,68 +1,260 @@ -.container.press-kit { - padding: 60px 30px 120px; +// vars +$baseline: 20px; +$white: rgb(255,255,255); - .intro { - @include clearfix; - margin-bottom: 20px; - position: relative; +.mediakit { + @include box-sizing(border-box); + margin: 0 auto; + padding: ($baseline*3) 0; + width: 980px; - .message { - float: left; - width: flex-grid(7); + .wrapper-mediakit { + @include border-radius(4px); + @include box-sizing(border-box); + @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.1)); + margin: ($baseline*3) 0 0 0; + border: 1px solid $border-color; + padding: ($baseline*2) ($baseline*3); - p { - margin-left: 0; - line-height: 1.6; - font-size: 1.1em; - color: #666; - } - } + > section { + margin: 0 0 ($baseline*2) 0; - .logo-sidebar { - @include box-sizing(border-box); - border: 3px solid rgb(220,220,220); - float: left; - padding: 20px; - - img { - height: 200px; + &:last-child { + margin-bottom: 0; } - figcaption { - text-align: center; + header { + } } } - .media-library { - @include clearfix; - float: left; - width: flex-grid(12); - margin-right: flex-gutter(); + h1 { + margin: 0 0 $baseline 0; + position: relative; + font-size: 36px; + } - > h2 { - display: none; - margin-bottom: 60px; - padding-bottom: 20px; + hr { + @extend .faded-hr-divider-light; + border: none; + margin: 0px; + position: relative; + z-index: 2; + + &::after { + @extend .faded-hr-divider; + bottom: 0px; + content: ""; + display: block; + position: absolute; + top: -1px; + } + } + + // general + a.action-download { + position: relative; + color: $blue; + font-family: $sans-serif; + text-decoration: none; + @include transition(all, 0.1s, linear); + + .note { + position: relative; + color: $blue; + font-family: $sans-serif; + font-size: 13px; + text-decoration: none; + @include transition(all, 0.1s, linear); + + &:before { + position: relative; + top: -1px; + margin: 0 5px 0 0; + content: "➤"; + font-size: 11px; + } } - .media-listing { - figure { - width: flex-grid(4); + &:hover { - border-bottom: 1px solid rgb(220,220,220); - padding: 40px 0px; + .note { + color: shade($blue, 25%); + } + } + } + + // introduction section + .introduction { + @include clearfix(); + + header { + margin: 0 0 ($baseline*1.5) 0; + + h2 { + margin: 0; + color: rgb(178, 181, 185); + font-size: 32px; + + .org-name { + color: rgb(178, 181, 185); + font-family: $serif; + text-transform: none; + } + } + } + + article { + @include box-sizing(border-box); + width: 500px; + margin-right: $baseline; + float: left; + } + + aside { + @include border-radius(2px); + @include box-sizing(border-box); + @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2)); + width: 330px; + float: left; + border: 3px solid tint(rgb(96, 155, 216), 35%); + background: tint(rgb(96, 155, 216), 35%); + + h3 { + padding: ($baseline/2) ($baseline*0.75); + font-family: $sans-serif; + font-weight: bold; + font-size: 16px; + letter-spacing: 0; + color: $white; + text-transform: uppercase; + + .org-name { + color: $white !important; + font-weight: bold; + text-transform: none; + } + } + + a.action-download { + + .note { + width: 100%; + display: inline-block; + text-align: center; + } + } + + figure { + @include box-sizing(border-box); + background: $white; + width: 100%; + + figcaption { + display: none; + } + + a { + display: block; + padding: ($baseline/2); + } img { - text-align: center; + display: block; + margin: 0 auto; + width: 60%; + } + } + } + } + + // library section + .library { + @include border-radius(2px); + @include box-sizing(border-box); + @include box-shadow(0 1px 4px 0 rgba(0,0,0, 0.2)); + border: 3px solid tint($light-gray,50%); + padding: 0; + background: tint($light-gray,50%); + + header { + padding: ($baseline*0.75) $baseline; + + h2 { + margin: 0; + padding: 0; + color: $dark-gray; + font-size: 16px; + font-family: $sans-serif; + font-weight: bold; + letter-spacing: 0; + + .org-name { + color: $dark-gray !important; + font-weight: bold; + text-transform: none; + } + } + } + + .listing { + @include clearfix(); + background: $white; + margin: 0; + padding: ($baseline*2); + list-style: none; + + li { + @include box-sizing(border-box); + overflow-y: auto; + float: left; + width: 350px; + margin: 0 0 $baseline 0; + + &:nth-child(odd) { + margin-right: ($baseline*3.5); + } + } + + figure { + + a { + @include border-radius(2px); + @include box-sizing(border-box); + @include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.1)); + display: block; + min-height: 400px; + border: 2px solid tint($light-gray,75%); + padding: $baseline; + + &:hover { + border-color: $blue; + } + } + + img { + display: block; + border: 2px solid tint($light-gray,80%); + margin: 0 auto ($baseline*0.75) auto; } figcaption { - padding: 10px; - font-size: 0.95em; - color: #666; + font-size: 13px; + line-height: 18px; + color: $text-color; + } + + .note { + display: inline-block; + margin-top: ($baseline/2); } } } } -} + + // share + .share { + + } +} \ No newline at end of file diff --git a/lms/templates/static_templates/media-kit.html b/lms/templates/static_templates/media-kit.html index ac462fcdbd..9050d7dab9 100644 --- a/lms/templates/static_templates/media-kit.html +++ b/lms/templates/static_templates/media-kit.html @@ -3,61 +3,122 @@ <%block name="title">EdX Media Kit -
+

EdX Media Kit

-
-
-

Welcome to the edX Media Kit

-
-
-

Need images for a news story? Feel free to download high-resolution versions of the photos below by clicking on the thumbnail. Please credit edX in your use.

-

We’ve included visual guidelines on how to use the edX logo within the download zip which also includes Adobe Illustrator and eps versions of the logo.

-

For more information about edX, please contact Dan O’Connell Associate Director of Communications via oconnell@edx.org.

-
-
-

The edX Logo

- +
+ +
+
+
+

Welcome to the edX Media Kit

+
+ +
+

Need images for a news story? Feel free to download high-resolution versions of the photos below by clicking on the thumbnail. Please credit edX in your use.

+

We’ve included visual guidelines on how to use the edX logo within the download zip which also includes Adobe Illustrator and eps versions of the logo.

+

For more information about edX, please contact Dan O'Connell Associate Director of Communications via oconnell@edx.org.

+
+ + +
-
-
-
-

The edX Media Library

-
-
-
- -
Ananat Agarwal, President of edX, in his office in Cambridge, MA. The computer screen behind him shows a portion of a video lecture from 6.002x, Circuits & Electronics, the MITx course taught by Agarwal. > high-res
-
+
+
+

The edX Media Library

+
-
- -
Anant Agarwal creating a tablet-based lecture for 6.002x, Circuits & Electronics. > high-res
-
+
+ +
+
-
- -
Piotr Mitros, Chief Scientist at edX, uses a Rostrum camera to create an overhead camera-based lecture. During this process, voice and video are recorded for an interactive tutorial. > high-res
-
+ +