diff --git a/lms/static/images/courses/history.png b/lms/static/images/courses/history.png index 4b0b1d5727..a04d242d6a 100644 Binary files a/lms/static/images/courses/history.png and b/lms/static/images/courses/history.png differ diff --git a/lms/static/sass/_about_pages.scss b/lms/static/sass/_about_pages.scss index 7bde2027c2..2a19033b49 100644 --- a/lms/static/sass/_about_pages.scss +++ b/lms/static/sass/_about_pages.scss @@ -1,5 +1,5 @@ .container.about { - padding: 20px 0 120px; + padding: 20px 10px 120px; > nav { margin-bottom: 80px; diff --git a/lms/static/sass/_course_about.scss b/lms/static/sass/_course_about.scss index 8a98dfac2c..77c9435602 100644 --- a/lms/static/sass/_course_about.scss +++ b/lms/static/sass/_course_about.scss @@ -24,8 +24,9 @@ @include clearfix; margin: 0 auto; max-width: 1200px; + padding: 0px 10px; position: relative; - width: flex-grid(12); + width: grid-width(12); z-index: 2; @@ -243,12 +244,12 @@ border: 1px solid rgb(200,200,200); border-top: none; float: left; - padding: 20px 20px 30px; + padding: 16px 20px 30px; width: flex-grid(4); header { margin-bottom: 30px; - padding-bottom: 20px; + padding-bottom: 16px; position: relative; text-align: center; diff --git a/lms/static/sass/_courses.scss b/lms/static/sass/_courses.scss index 718f596a85..c78ba37878 100644 --- a/lms/static/sass/_courses.scss +++ b/lms/static/sass/_courses.scss @@ -4,7 +4,7 @@ header.search { background: rgb(240,240,240); - @include background-image(url('/static/images/shot-2-large.jpg')); + //@include background-image(url('/static/images/shot-2-large.jpg')); 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)); diff --git a/lms/static/sass/_course_object.scss b/lms/static/sass/_courseware_subnav.scss similarity index 100% rename from lms/static/sass/_course_object.scss rename to lms/static/sass/_courseware_subnav.scss diff --git a/lms/static/sass/_dashboard.scss b/lms/static/sass/_dashboard.scss index cc82bfed99..7e7c859c87 100644 --- a/lms/static/sass/_dashboard.scss +++ b/lms/static/sass/_dashboard.scss @@ -48,42 +48,43 @@ padding-bottom: 10px; &:hover { - .icon { + .title .icon { opacity: 1; } } - p { + span.title { color: $lighter-base-font-color; float: left; font-family: $sans-serif; - span { - font-weight: 700; - margin-left: 12px; + .icon { + background-size: cover; + float: left; + height: 19px; + margin: 2px 8px 0 0; + opacity: 0.6; + @include transition(all, 0.15s, linear); + width: 19px; + + &.email-icon { + @include background-image(url('/static/images/portal-icons/email-icon.png')); + } + + &.location-icon { + @include background-image(url('/static/images/portal-icons/home-icon.png')); + } + + &.language-icon { + @include background-image(url('/static/images/portal-icons/language-icon.png')); + } } } - .icon { - background-size: cover; - float: left; - height: 19px; - margin: 2px 8px 0 0; - opacity: 0.6; - @include transition(all, 0.15s, linear); - width: 19px; - - &.email-icon { - @include background-image(url('/static/images/portal-icons/email-icon.png')); - } - - &.location-icon { - @include background-image(url('/static/images/portal-icons/home-icon.png')); - } - - &.language-icon { - @include background-image(url('/static/images/portal-icons/language-icon.png')); - } + span.data { + color: $lighter-base-font-color; + font-weight: 700; + margin-left: 12px; } } } diff --git a/lms/static/sass/_home.scss b/lms/static/sass/_home.scss index 7c5eaf1ec5..a41009c9ff 100644 --- a/lms/static/sass/_home.scss +++ b/lms/static/sass/_home.scss @@ -17,6 +17,7 @@ @extend .animation-home-header-pop-up; max-width: 1200px; margin: 0 auto; + padding: 0 10px; position: relative; text-align: center; @@ -32,7 +33,7 @@ border: 1px solid rgb(100,100,100); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include inline-block; - padding: 30px 50px 30px; + padding: 20px 30px 30px; position: relative; text-align: center; z-index: 1; @@ -40,22 +41,10 @@ .title { @include inline-block; - //margin-right: 50px; - //padding-right: 50px; position: relative; text-align: left; vertical-align: middle; - &::before { - @extend .faded-vertical-divider; - //content: ""; - display: block; - height: 170px; - position: absolute; - right: 0px; - top: -20px; - } - &::after { @extend .faded-vertical-divider-light; content: ""; diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss index 1cdc7ce7e9..2daa0da8e9 100644 --- a/lms/static/sass/application.scss +++ b/lms/static/sass/application.scss @@ -1,32 +1,40 @@ @import 'bourbon/bourbon'; -@import 'base_styles/reset'; -@import 'base_styles/font_face'; -@import 'base_styles/base'; -@import 'base_styles/base_mixins'; -@import 'base_styles/base_extends'; -@import 'base_styles/base_animations'; +@import 'base/reset'; +@import 'base/font_face'; +@import 'base/variables'; +@import 'base/base'; +@import 'base/mixins'; +@import 'base/extends'; +@import 'base/animations'; + + +// Courseware styles @import 'sass_old/base/variables'; @import 'sass_old/base/extends'; @import 'sass_old/base/functions'; -@import 'shared_styles/shared_forms'; -@import 'shared_styles/shared_footer'; -@import 'shared_styles/shared_header'; -@import 'shared_styles/shared_list_of_courses'; -@import 'shared_styles/shared_course_filter'; -@import 'shared_styles/shared_modal'; -@import 'shared_styles/activation_messages'; + +// Multicourse styles +@import 'shared/forms'; +@import 'shared/footer'; +@import 'shared/header'; +@import 'shared/course_object'; +@import 'shared/course_filter'; +@import 'shared/modal'; +@import 'shared/activation_messages'; @import 'home'; @import 'dashboard'; -@import 'course_object'; +@import 'courseware_subnav'; @import 'courses'; @import 'course_about'; @import 'jobs'; @import 'about_pages'; @import 'press_release'; + +// Courseware styles @import 'sass_old/courseware/courseware'; @import 'sass_old/courseware/sequence-nav'; @import 'sass_old/courseware/sidebar'; diff --git a/lms/static/sass/base_styles/_base_animations.scss b/lms/static/sass/base/_animations.scss similarity index 100% rename from lms/static/sass/base_styles/_base_animations.scss rename to lms/static/sass/base/_animations.scss diff --git a/lms/static/sass/base_styles/_base.scss b/lms/static/sass/base/_base.scss similarity index 83% rename from lms/static/sass/base_styles/_base.scss rename to lms/static/sass/base/_base.scss index ed35178f68..0111041188 100644 --- a/lms/static/sass/base_styles/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -1,21 +1,3 @@ -$gw-column: 60px; -$gw-gutter: 25px; - -$fg-column: $gw-column; -$fg-gutter: $gw-gutter; -$fg-max-columns: 12; - -$sans-serif: 'Open Sans', $verdana; -$serif: $georgia; - -$base-font-color: rgb(60,60,60); -$lighter-base-font-color: rgb(160,160,160); - -$blue: rgb(29,157,217); -$pink: rgb(182,37,104); -$yellow: rgb(255, 252, 221); -$error-red: rgb(253, 87, 87); - html, body { background: rgb(250,250,250); font-family: $sans-serif; @@ -100,8 +82,8 @@ a:link, a:visited { .container { @include clearfix; margin: 0 auto 0; - max-width: 1200px; - width: flex-grid(12); + padding: 0px 10px; + width: grid-width(12); } .static-container { diff --git a/lms/static/sass/base_styles/_base_extends.scss b/lms/static/sass/base/_extends.scss similarity index 98% rename from lms/static/sass/base_styles/_base_extends.scss rename to lms/static/sass/base/_extends.scss index b4f076e3ec..7f6078252a 100644 --- a/lms/static/sass/base_styles/_base_extends.scss +++ b/lms/static/sass/base/_extends.scss @@ -77,6 +77,7 @@ border: none; } +//Styles for Error messages .error-message-colors { background: $error-red; border: 1px solid rgb(202, 17, 17); diff --git a/lms/static/sass/base_styles/_font_face.scss b/lms/static/sass/base/_font_face.scss similarity index 100% rename from lms/static/sass/base_styles/_font_face.scss rename to lms/static/sass/base/_font_face.scss diff --git a/lms/static/sass/base_styles/_base_mixins.scss b/lms/static/sass/base/_mixins.scss similarity index 100% rename from lms/static/sass/base_styles/_base_mixins.scss rename to lms/static/sass/base/_mixins.scss diff --git a/lms/static/sass/base_styles/_reset.scss b/lms/static/sass/base/_reset.scss similarity index 100% rename from lms/static/sass/base_styles/_reset.scss rename to lms/static/sass/base/_reset.scss diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss new file mode 100644 index 0000000000..7471ba5d13 --- /dev/null +++ b/lms/static/sass/base/_variables.scss @@ -0,0 +1,18 @@ +$gw-column: 80px; +$gw-gutter: 20px; + +$fg-column: $gw-column; +$fg-gutter: $gw-gutter; +$fg-max-columns: 12; + +$sans-serif: 'Open Sans', $verdana; +$serif: $georgia; + +$base-font-color: rgb(60,60,60); +$lighter-base-font-color: rgb(160,160,160); + +$blue: rgb(29,157,217); +$pink: rgb(182,37,104); +$yellow: rgb(255, 252, 221); +$error-red: rgb(253, 87, 87); + diff --git a/lms/static/sass/shared_styles/_activation_messages.scss b/lms/static/sass/shared/_activation_messages.scss similarity index 100% rename from lms/static/sass/shared_styles/_activation_messages.scss rename to lms/static/sass/shared/_activation_messages.scss diff --git a/lms/static/sass/shared_styles/_shared_course_filter.scss b/lms/static/sass/shared/_course_filter.scss similarity index 100% rename from lms/static/sass/shared_styles/_shared_course_filter.scss rename to lms/static/sass/shared/_course_filter.scss diff --git a/lms/static/sass/shared_styles/_shared_list_of_courses.scss b/lms/static/sass/shared/_course_object.scss similarity index 95% rename from lms/static/sass/shared_styles/_shared_list_of_courses.scss rename to lms/static/sass/shared/_course_object.scss index 377cd23d5c..cb72e18754 100644 --- a/lms/static/sass/shared_styles/_shared_list_of_courses.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -1,7 +1,7 @@ .highlighted-courses, .find-courses { .courses { @include clearfix; - padding: 40px 15px 15px; + padding: 40px 0px 15px; .course { background: rgb(250,250,250); @@ -33,6 +33,7 @@ p { color: rgb(255,255,255); + font-style: italic; line-height: 1.2em; padding: 4px 12px 5px; } @@ -69,7 +70,11 @@ h2 { color: $base-font-color; + font-family: $sans-serif; + font-size: 1em; + font-weight: 700; margin-bottom: 0px; + overflow: hidden; padding-top: 9px; text-shadow: 0 1px rgba(255,255,255, 0.6); text-overflow: ellipsis; diff --git a/lms/static/sass/shared_styles/_shared_footer.scss b/lms/static/sass/shared/_footer.scss similarity index 98% rename from lms/static/sass/shared_styles/_shared_footer.scss rename to lms/static/sass/shared/_footer.scss index 63df56c429..227350dfa8 100644 --- a/lms/static/sass/shared_styles/_shared_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -12,11 +12,10 @@ footer { } nav { - @include box-sizing(border-box); max-width: 1200px; margin: 0 auto; padding: 30px 10px 0; - width: flex-grid(12); + width: grid-width(12); .top { border-bottom: 1px solid rgb(200,200,200); diff --git a/lms/static/sass/shared_styles/_shared_forms.scss b/lms/static/sass/shared/_forms.scss similarity index 100% rename from lms/static/sass/shared_styles/_shared_forms.scss rename to lms/static/sass/shared/_forms.scss diff --git a/lms/static/sass/shared_styles/_shared_header.scss b/lms/static/sass/shared/_header.scss similarity index 97% rename from lms/static/sass/shared_styles/_shared_header.scss rename to lms/static/sass/shared/_header.scss index b3b66be303..a5d67079d1 100644 --- a/lms/static/sass/shared_styles/_shared_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -9,12 +9,11 @@ header.global { nav { @include clearfix; - @include box-sizing(border-box); height: 40px; margin: 0 auto; max-width: 1200px; - padding-top: 14px; - width: flex-grid(12); + padding: 14px 10px 0px; + width: grid-width(12); } h1.logo { @@ -187,7 +186,7 @@ header.global { ul.dropdown-menu { background: rgb(252,252,252); @include border-radius(4px); - @include box-shadow(0 2px 10px 0 rgba(0,0,0, 0.4)); + @include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3)); border: 1px solid rgb(100,100,100); display: none; padding: 5px 10px; diff --git a/lms/static/sass/shared_styles/_shared_modal.scss b/lms/static/sass/shared/_modal.scss similarity index 99% rename from lms/static/sass/shared_styles/_shared_modal.scss rename to lms/static/sass/shared/_modal.scss index f62e9ddc3e..4a3bed4859 100644 --- a/lms/static/sass/shared_styles/_shared_modal.scss +++ b/lms/static/sass/shared/_modal.scss @@ -20,7 +20,7 @@ left: 50%; padding: 8px; position: absolute; - width: grid-width(6); + width: grid-width(5); z-index: 12; &.video-modal { diff --git a/lms/templates/course.html b/lms/templates/course.html index b69994a76d..bcfcab2526 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/courses.html b/lms/templates/courses.html index d789f8fd9e..44ba213069 100644 --- a/lms/templates/courses.html +++ b/lms/templates/courses.html @@ -3,7 +3,7 @@ <%namespace name='static' file='static_content.html'/>
-
+