diff --git a/lms/static/sass/_base.scss b/lms/static/sass/_base.scss index 52790b3bee..02575607e3 100644 --- a/lms/static/sass/_base.scss +++ b/lms/static/sass/_base.scss @@ -49,6 +49,12 @@ p { margin: 0px; } +span { + color: $lighter-base-font-color; + font: normal 1.3rem/2rem $sans-serif; + margin: 0px; +} + p + p { margin-top: 20px; } diff --git a/lms/static/sass/_course_info.scss b/lms/static/sass/_course_info.scss index 0dd6eb326d..cde7eb373f 100644 --- a/lms/static/sass/_course_info.scss +++ b/lms/static/sass/_course_info.scss @@ -1,54 +1,70 @@ .course-info { .container { - margin-bottom: 60px; + padding-bottom: 120px; } header.course-profile { background: rgb(245,245,245); + @include background-image(url('/static/images/shot-2-large.jpg')); + background-size: cover; //@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245))); @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); - border-bottom: 1px solid rgb(200,200,200); + border-bottom: 1px solid rgb(100,100,100); @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); + margin-top: -69px; overflow: hidden; + padding: 134px 0px 60px; + position: relative; width: 100%; + &::before { + @include background-image(radial-gradient(50% 50%, ellipse closest-side, rgba(#fff, 1), rgba(#fff, 0))); + //content: ""; + display: block; + height: 200%; + left: 50%; + margin-left: -(flex-grid(5)); + margin-top: -100%; + position: absolute; + top: 50%; + width: flex-grid(10); + z-index: 1; + } + .intro-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 box-sizing(border-box); @include clearfix; margin: 0 auto; max-width: 1200px; - padding: 50px 0px 40px; position: relative; width: flex-grid(12); + z-index: 2; - &::before { - @include background-image(radial-gradient(50% 50%, ellipse closest-side, rgba(#fff, 1), rgba(#fff, 0))); - content: ""; - display: block; - height: 200%; - left: 0px; - position: absolute; - top: 80px; - width: flex-grid(8); - z-index: 1; - } .intro { + @include box-sizing(border-box); @include clearfix; float: left; - margin-right: flex-gutter(); + padding: 20px 20px; position: relative; - width: flex-grid(8); + width: flex-grid(8) + flex-gutter(); z-index: 2; > hgroup { - position: relative; - margin-bottom: 12px; + border-bottom: 1px solid rgb(210,210,210); + @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + margin-bottom: 30px; + padding-bottom: 20px; + width: 100%; h1 { color: $base-font-color; - font: bold 2.8rem/3.2rem $sans-serif; + font: 600 2.8rem/3.2rem $sans-serif; @include inline-block; - margin: 0 5px 0 0; + margin: 0 10px 0 0; letter-spacing: 0px; text-shadow: 0 1px rgba(255,255,255, 0.6); @@ -65,8 +81,10 @@ a { color: $lighter-base-font-color; - font: italic bold 1.4rem/1.6rem $sans-serif; + font: italic 800 1.4rem/1.6rem $sans-serif; + letter-spacing: 0px; text-shadow: 0 1px rgba(255,255,255, 0.6); + text-transform: none; &:hover { color: $blue; @@ -76,6 +94,9 @@ } .course-dates { + display: none; + margin-bottom: 20px; + p { color: $lighter-base-font-color; @include inline-block; @@ -100,13 +121,73 @@ } } - .actions { - float: left; - margin-top: 5px; + .media { + border-left: 1px solid rgb(100,100,100); + @include box-sizing(border-box); + float: right; + padding: 1px; position: relative; width: flex-grid(4); z-index: 2; + .hero { + height: 180px; + overflow: hidden; + position: relative; + + .play-intro { + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4))); + @include border-radius(4px); + @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2)); + border: 1px solid rgba(0,0,0, 0.3); + height: 80px; + left: 50%; + margin-top: -40px; + margin-left: -40px; + position: absolute; + top: 50%; + width: 80px; + + &::after { + color: $base-font-color; + content: "\25B6"; + display: block; + font: normal 3.2rem/3.2rem $sans-serif; + left: 50%; + margin-left: -12px; + margin-top: -17px; + position: absolute; + text-shadow: 0 1px rgba(255,255,255, 0.8); + top: 50%; + } + } + + img { + min-width: 100%; + } + } + + &:hover { + cursor: pointer; + + .play-intro { + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5))); + @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2)); + border: 1px solid rgba(0,0,0, 0.4); + + &::after { + color: $pink; + } + } + } + } + + .actions { + @include clearfix; + position: relative; + width: flex-grid(12); + z-index: 2; + &:hover { .register-wrapper { @include box-shadow(0 1px 16px 0 rgba($blue, 0.35)); @@ -117,7 +198,10 @@ @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9)); @include border-radius(4px); + float: left; + margin-right: flex-gutter(); @include transition(all, 0.15s, linear); + width: flex-grid(6); a.register { @include button(shiny, $blue); @@ -135,16 +219,15 @@ } .social-sharing { - padding: 0px 20px; + float: left; + width: flex-grid(6); p { background: rgb(255,255,255); - @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9)); + @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); border: 1px solid rgb(210,210,210); - border-top: 0; - @include border-bottom-radius(4px); - padding: 3px 10px; - margin: 0 auto; + @include border-radius(4px); + padding: 9px 10px; color: $base-font-color; font: italic 300 1.2rem/1.6rem $serif; margin: 0 0 5px 0; @@ -183,13 +266,14 @@ a { border-bottom: 3px solid transparent; + color: $lighter-base-font-color; @include inline-block; - font: normal 1.2rem/1.6rem $sans-serif; + font: italic 1.2rem/1.6rem $serif; letter-spacing: 1px; margin: 0 15px; padding: 0px 5px 15px; text-align: center; - text-transform: uppercase; + text-transform: lowercase; &:first-child { margin-left: 0px; @@ -223,6 +307,7 @@ .inner-wrapper { > section { + margin-bottom: 40px; &::after { @extend .faded-hr-divider; @@ -230,19 +315,128 @@ display: none; margin-top: 60px; } - margin-bottom: 60px; p + h2 { margin-top: 40px; } } + + .course-staff { + .teacher { + margin-bottom: 40px; + + h3 { + color: $base-font-color; + font-family: $sans-serif; + font-weight: 700; + margin-bottom: 15px; + letter-spacing: 1px; + text-transform: uppercase; + } + + .teacher-image { + background: rgb(255,255,255); + border: 1px solid rgb(200,200,200); + float: left; + margin: 0 15px 15px 0; + padding: 1px; + } + } + } + } + } + + .course-sidebar { + @include box-sizing(border-box); + @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); + border: 1px solid rgb(200,200,200); + border-top: none; + float: left; + padding: 30px 20px; + width: flex-grid(4); + + header { + margin-bottom: 30px; + padding-bottom: 26px; + position: relative; + text-align: center; + + &::after { + @extend .faded-hr-divider; + content: ""; + display: block; + height: 1px; + position: absolute; + bottom: 0px; + width: 100%; + } + + a.university-name { + border-right: 1px solid rgb(200,200,200); + color: $base-font-color; + font: italic 800 1.4rem/1.6rem $sans-serif; + @include inline-block; + letter-spacing: 0px; + margin-right: 15px; + padding-right: 15px; + + &:hover { + color: $lighter-base-font-color; + } + } + + span { + font: 300 1.2rem/1.6rem $sans-serif; + } + } + + .important-dates { + list-style: none; + margin: 0px; + padding: 0px 10px; + + li { + @include clearfix; + border-bottom: 1px dotted rgb(220,220,220); + margin-bottom: 20px; + padding-bottom: 10px; + + p { + float: left; + font: 300 1.2rem/1.6rem $sans-serif; + } + + img { + background: rgb(230,230,230); + float: left; + height: 19px; + margin-right: 10px; + width: 19px; + } + + span { + font: 700 1.2rem/1.6rem $sans-serif; + float: right; + } + } } .course-staff { + display: none; + .teacher { margin-bottom: 30px; + h3 { + color: $base-font-color; + font-family: $sans-serif; + font-weight: 700; + margin-bottom: 15px; + letter-spacing: 1px; + text-transform: uppercase; + } + &::after { @extend .faded-hr-divider; content: ""; @@ -266,86 +460,4 @@ } } } - - .course-sidebar { - @include box-sizing(border-box); - float: left; - padding-top: 40px; - width: flex-grid(4); - - h3 { - color: $lighter-base-font-color; - font-family: $serif; - font-weight: 300; - margin-bottom: 15px; - text-transform: uppercase; - } - - > section { - border: 1px solid rgb(220,220,220); - @include border-radius(4px); - background: rgb(245,245,245); - margin-bottom: 20px; - padding: 15px; - } - - .media { - border: 1px solid rgb(200,200,200); - @include box-sizing(border-box); - margin-bottom: 20px; - padding: 1px; - width: flex-grid(12); - - .hero { - height: 180px; - overflow: hidden; - position: relative; - - .play-intro { - @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4))); - @include border-radius(4px); - @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2)); - border: 1px solid rgba(0,0,0, 0.3); - height: 80px; - left: 50%; - margin-top: -40px; - margin-left: -40px; - position: absolute; - top: 50%; - width: 80px; - - &::after { - color: $base-font-color; - content: "\25B6"; - display: block; - font: normal 3.2rem/3.2rem $sans-serif; - left: 50%; - margin-left: -12px; - margin-top: -17px; - position: absolute; - text-shadow: 0 1px rgba(255,255,255, 0.8); - top: 50%; - } - } - - img { - min-width: 100%; - } - } - - &:hover { - cursor: pointer; - - .play-intro { - @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5))); - @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2)); - border: 1px solid rgba(0,0,0, 0.4); - - &::after { - color: $pink; - } - } - } - } - } } diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss index 4a5d1e8a8a..40be1b1d39 100644 --- a/lms/static/sass/_index.scss +++ b/lms/static/sass/_index.scss @@ -1,5 +1,5 @@ .home { - margin: 0px 0px 100px; + padding: 0px 0px 100px; > header { //background: rgb(250,250,250); @@ -198,6 +198,7 @@ text-shadow: 0 1px rgba(255,255,255, 0.6); .lowercase { + color: $lighter-base-font-color; text-transform: none; } } diff --git a/lms/static/sass/_press_release.scss b/lms/static/sass/_press_release.scss index cf94e623db..d135c8b81f 100644 --- a/lms/static/sass/_press_release.scss +++ b/lms/static/sass/_press_release.scss @@ -4,9 +4,6 @@ .container { padding: 60px 0 120px; - h1 { - } - h1 + hr { margin-bottom: 60px; } diff --git a/lms/static/sass/_shared_modal.scss b/lms/static/sass/_shared_modal.scss index 6df10db950..ac05ea52d4 100644 --- a/lms/static/sass/_shared_modal.scss +++ b/lms/static/sass/_shared_modal.scss @@ -231,6 +231,11 @@ text-align: center; -webkit-font-smoothing: antialiased; + span { + color: $lighter-base-font-color; + font: italic 1.2rem/1.6rem $serif; + } + a { color: $lighter-base-font-color; font: italic 1.2rem/1.6rem $serif; diff --git a/lms/templates/portal/course_about.html b/lms/templates/portal/course_about.html index ba5102d84f..90b5bd397a 100644 --- a/lms/templates/portal/course_about.html +++ b/lms/templates/portal/course_about.html @@ -11,22 +11,31 @@
-

${course.get_about_section("title")}

${course.get_about_section("university")}

+

${course.get_about_section("title")}

${course.get_about_section("university")}

-

Class Starts: 7/12/12

+

${course.get_about_section("university")}

+

${course.get_about_section("number")}

+

15 weeks

+

Start: 7/12/12

Final Exam: 12/09/12

-

Total Length: 15 weeks

-
-
-
- Register -
- +
+
+ +
+
+ <%include file="../video_modal.html" /> +
@@ -45,20 +54,6 @@

About this course

${course.get_about_section("description")}

- -

Requirements

-

${course.get_about_section("requirements")}

- -

Syllabus

-

${course.get_about_section("syllabus")}

- -

Textbook

- ${course.get_about_section("textbook")} - -

Frequently Asked Questions

-

${course.get_about_section("faq")}

- -

${course.get_about_section("more_info")}

@@ -87,26 +82,70 @@

Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.

+ +
+

Requirements

+

${course.get_about_section("requirements")}

+
+ +
+

Syllabus

+

${course.get_about_section("syllabus")}

+
+ +
+

Textbook

+ ${course.get_about_section("textbook")} +
+ +
+

Frequently Asked Questions

+

${course.get_about_section("faq")}

+
+
-
-
- -
-
- <%include file="../video_modal.html" /> -
-
-

Course Sumamry

-

${course.get_about_section("short_description")}

+
+ ${course.get_about_section("university")}${course.get_about_section("title")} +
+
    +

  1. Classes Start

    7/12/12
    2. +

  2. Final Exam

    12/09/12
    3. +

  3. Course Length

    15 weeks
    4. +

  4. Course Number

    ${course.get_about_section("number")}
    5. +
+ +
+

Course staff

+
+
+ +
+

Anant Agarwal

+

Director of MIT’s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT’s Smullin and Jamieson prizes for teaching and co-authored the course textbook “Foundations of Analog and Digital Electronic Circuits.”

+
+ +
+
+ +
+

Gerald Sussman

+

Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.

+
+ +
+
+ +
+

Piotr Mitros

+

Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.

+
+
-
-

Course Number (${course.get_about_section("number")})

-