From d55cd78c73735417b835871f8624cdb5bb700b30 Mon Sep 17 00:00:00 2001 From: Galen Frechette Date: Tue, 17 Jul 2012 02:27:09 -0400 Subject: [PATCH] updates and imporves design of the home page header --- lms/static/sass/_course_about.scss | 6 +- lms/static/sass/_courses.scss | 18 +- lms/static/sass/_home.scss | 394 +++++++++++++++-------------- lms/static/sass/base/_base.scss | 2 +- lms/templates/course.html | 28 ++ lms/templates/index.html | 36 ++- 6 files changed, 259 insertions(+), 225 deletions(-) diff --git a/lms/static/sass/_course_about.scss b/lms/static/sass/_course_about.scss index 77c9435602..188856a0cd 100644 --- a/lms/static/sass/_course_about.scss +++ b/lms/static/sass/_course_about.scss @@ -10,21 +10,21 @@ @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); border-bottom: 1px solid rgb(100,100,100); @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); + height: 280px; margin-top: -69px; + padding-top: 150px; overflow: hidden; - padding: 134px 0px 60px; position: relative; width: 100%; .intro-inner-wrapper { - background: rgba(255,255,255, 0.9); + background: rgba(255,255,255, 0.93); border: 1px solid rgb(100,100,100); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include box-sizing(border-box); @include clearfix; margin: 0 auto; max-width: 1200px; - padding: 0px 10px; position: relative; width: grid-width(12); z-index: 2; diff --git a/lms/static/sass/_courses.scss b/lms/static/sass/_courses.scss index c78ba37878..b3c65a690f 100644 --- a/lms/static/sass/_courses.scss +++ b/lms/static/sass/_courses.scss @@ -8,6 +8,7 @@ background-size: cover; border-bottom: 1px solid rgb(100,100,100); @include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3)); + height: 430px; margin-top: -69px; width: 100%; @@ -15,26 +16,13 @@ height: 120px; margin: 0 auto; max-width: 1200px; - overflow: hidden; - padding: 154px 0px 80px; + padding-top: 150px; position: relative; text-align: center; width: flex-grid(12); - &::before { - @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%)); - bottom: -300px; - content: ""; - display: none; - height: 600px; - margin: 0 auto; - position: absolute; - width: 100%; - z-index: 1; - } - > hgroup { - background: rgba(255,255,255, 0.9); + background: rgba(255,255,255, 0.93); border: 1px solid rgb(100,100,100); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); padding: 20px 30px; diff --git a/lms/static/sass/_home.scss b/lms/static/sass/_home.scss index a41009c9ff..086ec2dfac 100644 --- a/lms/static/sass/_home.scss +++ b/lms/static/sass/_home.scss @@ -8,239 +8,227 @@ border-bottom: 1px solid rgb(80,80,80); @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1)); @include clearfix; + height: 430px; margin-top: -69px; overflow: hidden; - padding: 149px 0px 90px; + padding: 0px; width: flex-grid(12); .outer-wrapper { @extend .animation-home-header-pop-up; - max-width: 1200px; margin: 0 auto; - padding: 0 10px; + padding: 200px 10px 0px; position: relative; - text-align: center; - - &:hover { - .main-cta { - @include box-shadow(0 1px 16px 0 rgba($blue, 0.35)); - } - } - } - - .inner-wrapper { - background: rgba(255,255,255, 0.9); - border: 1px solid rgb(100,100,100); - @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); - @include inline-block; - padding: 20px 30px 30px; - position: relative; - text-align: center; - z-index: 1; + width: grid-width(12); } .title { + background: rgba(255,255,255, 0.93); + border: 1px solid rgb(100,100,100); + @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); + @include box-sizing(border-box); + height: 120px; + //@include clearfix; @include inline-block; + margin-left: grid-width(1) + $gw-gutter; + margin-right: $gw-gutter; + //overflow: hidden; + //padding: 20px 30px 20px; position: relative; - text-align: left; - vertical-align: middle; + text-align: center; + @include transition(all, 0.2s, linear); + //width: grid-width(6); + vertical-align: top; - &::after { - @extend .faded-vertical-divider-light; - content: ""; - display: block; - height: 170px; - position: absolute; - right: -1px; - top: -20px; - } + &:hover { + height: 165px; - h1 { - border-bottom: 1px solid rgb(200,200,200); - margin-bottom: 25px; - padding-bottom: 15px; - text-align: left; - text-shadow: 0 1px rgba(255,255,255, 0.6); - } - - .main-cta { - @include clearfix; - float: left; - margin-right: flex-gutter(); - @include transition(all, 0.15s, linear); - width: flex-grid(6); - - > a.find-courses { - @include button(shiny, $blue); - @include box-sizing(border-box); - @include border-radius(3px); - display: block; - font: normal 1.2rem/1.6rem $sans-serif; - letter-spacing: 1px; - padding: 10px 0px; - text-transform: uppercase; - text-align: center; - width: flex-grid(12); - - &:hover { - color: rgb(255,255,255); + > hgroup { + h1 { + border-bottom: 1px solid rgb(200,200,200); + padding-bottom: 10px; } - } - } - - .secondary-actions { - @include box-sizing(border-box); - @include clearfix; - float: left; - height: 47px; - width: flex-grid(6); - - a.intro-video { - background: rgb(245,245,245); - @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(235,235,235))); - border: 1px solid rgb(200,200,200); - @include border-radius(30px); - @include box-sizing(border-box); - @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8)); - @include clearfix; - display: block; - float: left; - height: 100%; - overflow: hidden; - text-align: middle; - width: flex-grid(6); - - &:hover { - text-decoration: none; - - p { - color: $base-font-color; - } - - .video { - opacity: 1; - } - } - - .video { - @include background-image(url('/static/images/shot-2-large.jpg')); - background-size: cover; - border-right: 1px solid rgb(200,200,200); - @include border-left-radius(30px); - @include box-shadow(1px 0 0 0 rgba(255,255,255, 0.6), inset 1px 0 0 0 rgba(255,255,255, 0.8), inset 0 0 0 1px rgba(255,255,255, 0.7)); - float: left; - height: 100%; - opacity: 0.8; - position: relative; - @include transition(all, 0.15s, linear); - width: 60px; - vertical-align: middle; - - .play { - @include background-image(url('/static/images/portal-icons/video-play-icon.png')); - background-size: cover; - height: 31px; - margin-left: -13px; - margin-top: -15px; - left: 50%; - position: absolute; - top: 50%; - width: 31px; - } - } - - p { - color: $lighter-base-font-color; - font-style: italic; - padding-top: 10px; - text-align: center; - text-shadow: 0 1px rgba(255,255,255, 0.6); - @include transition(all, 0.15s, linear); - vertical-align: middle; - } - } - .social-sharing { - @include box-sizing(border-box); - float: left; - height: 44px; - margin-right: flex-gutter(); - position: relative; - text-align: center; - width: flex-grid(6); - - &:hover { - .sharing-message { - opacity: 1; - top: 56px; - } - } - - .sharing-message { - @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, - rgba(0,0,0, 0.7) 100%)); - border: 1px solid rgba(0,0,0, 0.5); - @include border-radius(4px); - @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); - @include box-sizing(border-box); - color: rgb(255,255,255); - float: right; - font-family: $serif; - font-size: 0.9em; - font-style: italic; - left: 50%; - margin-left: -110px; + h2 { opacity: 0; - padding: 6px 10px; - position: absolute; + } + } + + .actions { + opacity: 1; + } + } + + > hgroup { + //background: rgba(255,255,255, 0.93); + //border: 1px solid rgb(100,100,100); + //@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); + @include box-sizing(border-box); + height: 120px; + @include inline-block; + left: 0px; + //margin-left: grid-width(1) + $gw-gutter; + //margin-right: $gw-gutter; + opacity: 1; + padding: 20px 30px; + //position: absolute; + top: 0px; + @include transition(all, 0.2s, linear); + text-align: left; + //vertical-align: middle; + + &::after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 170px; + position: absolute; + right: -1px; + top: -20px; + } + + h1 { + //border-bottom: 1px solid rgb(200,200,200); + //margin-bottom: 25px; + margin-bottom: 0px; + //padding-bottom: 15px; + text-align: left; + text-shadow: 0 1px rgba(255,255,255, 0.6); + text-transform: none; + } + + h2 { + font-style: italic; + margin-bottom: 0px; + text-transform: lowercase; + } + } + + .actions { + @include clearfix; + @include box-sizing(border-box); + left: 0px; + opacity: 0; + padding: 20px 30px 0px; + position: absolute; + @include transition(opacity, 0.2s, linear); + top: 75px; + width: flex-grid(12); + + .main-cta { + //display: none; + float: left; + margin-right: flex-gutter(); + width: flex-grid(6); + + > a.find-courses { + @include button(shiny, $blue); + @include box-sizing(border-box); + @include border-radius(3px); + display: block; + font: normal 1.2rem/1.6rem $sans-serif; + letter-spacing: 1px; + padding: 10px 0px; + text-transform: uppercase; text-align: center; - @include transition(all, 0.15s, ease-out); - top: 65px; - width: 220px; + width: flex-grid(12); &:hover { - opacity: 0; + color: rgb(255,255,255); } } + } - .share { + .secondary-actions { + //display: none; + @include box-sizing(border-box); + @include clearfix; + float: left; + //height: 47px; + width: flex-grid(6); + + .social-sharing { + @include box-sizing(border-box); + float: left; height: 44px; - @include inline-block; - margin-right: 10px; - opacity: 0.5; - @include transition(all, 0.15s, linear); - width: 44px; + margin-right: flex-gutter(); + position: relative; + text-align: center; + width: flex-grid(12); &:hover { - opacity: 1; + .sharing-message { + opacity: 1; + top: 50px; + } } - img { - width: 100%; + .sharing-message { + @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%, + rgba(0,0,0, 0.7) 100%)); + border: 1px solid rgba(0,0,0, 0.5); + @include border-radius(4px); + @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); + @include box-sizing(border-box); + color: rgb(255,255,255); + float: right; + font-family: $serif; + font-size: 0.9em; + font-style: italic; + left: 50%; + margin-left: -110px; + opacity: 0; + padding: 6px 10px; + position: absolute; + text-align: center; + @include transition(all, 0.15s, ease-out); + top: 25px; + width: 220px; + + &:hover { + opacity: 0; + } } - &:last-child { - margin-right: 0px; + .share { + height: 44px; + @include inline-block; + margin-right: 10px; + opacity: 0.5; + @include transition(all, 0.15s, linear); + width: 44px; + + &:hover { + opacity: 1; + } + + img { + width: 100%; + } + + &:last-child { + margin-right: 0px; + } } } } } } + .media { background: #fff; - border: 1px solid rgb(200,200,200); + border: 1px solid rgb(100,100,100); @include box-sizing(border-box); - float: left; + @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); + height: 120px; @include inline-block; padding: 1px; position: relative; - vertical-align: middle; - //width: 210px; - width: flex-grid(3); + vertical-align: top; + width: flex-grid(2); z-index: 2; .hero { - //height: 125px; height: 100%; overflow: hidden; position: relative; @@ -249,15 +237,16 @@ @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); @include border-radius(4px); @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4)); + @include box-sizing(border-box); border: 2px solid rgba(255,255,255, 0.8); - height: 80px; + height: 60px; left: 50%; - margin-top: -40px; - margin-left: -40px; + margin-top: -30px; + margin-left: -30px; position: absolute; top: 50%; @include transition(all, 0.15s, linear); - width: 80px; + width: 60px; &::after { color: rgba(255,255,255, 0.8); @@ -491,10 +480,14 @@ .news { @include box-sizing(border-box); + @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); padding: 20px; width: flex-grid(12); .blog-posts { + border-bottom: 1px solid rgb(220,220,220); + margin-bottom: 20px; + padding-bottom: 20px; @include clearfix; > article { @@ -552,11 +545,28 @@ .post-date { color: $lighter-base-font-color; + display: none; letter-spacing: 1px; } } } } + + .press-links { + h3 { + display: inline; + font-family: $sans-serif; + font-weight: 700; + line-height: 1.6em; + } + + a { + line-height: 1.6em; + font-family: $serif; + font-style: italic; + margin-left: 10px; + } + } } } } diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 0111041188..74acda310b 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -18,7 +18,7 @@ h1 { letter-spacing: 1px; margin-bottom: 30px; text-align: center; - text-transform: uppercase; + //text-transform: uppercase; } h2 { diff --git a/lms/templates/course.html b/lms/templates/course.html index ab6067c6ea..872adb8a14 100644 --- a/lms/templates/course.html +++ b/lms/templates/course.html @@ -31,3 +31,31 @@

${course.get_about_section('university')}

+ +
+
+
+ +
+

${course.get_about_section('title')}

+
+
➔
+ +
+
+
+ +
+
+

An advanced introduction to analog circuits. An advanced introduction to analog circuits.

+
+
+ ${course.get_about_section('university')} + 7/23/12 +
+
+
+
+

${course.get_about_section('university')}

+
+
diff --git a/lms/templates/index.html b/lms/templates/index.html index dd2d9690b3..3c855c161d 100644 --- a/lms/templates/index.html +++ b/lms/templates/index.html @@ -5,10 +5,13 @@
-
-
-

Online education for anyone, anywhere, at anytime

+
+
+

The Future of Online Education

+

For anyone, anywhere, anytime.

+
+
Sign Up
@@ -26,19 +29,17 @@
- - - -
-
-
-

Play intro video

-
-
+
+ + +
+ +
+
+ + @@ -121,6 +122,13 @@ +
+

Press Links:

+ The edX Press Release, + Online Classes Cut Costs, But Do They Dilute Brands?, + The Harvard Press Release, + The MIT Press Release +