diff --git a/lms/static/images/circuits.jpeg b/lms/static/images/circuits.jpeg new file mode 100644 index 0000000000..c939c8d604 Binary files /dev/null and b/lms/static/images/circuits.jpeg differ diff --git a/lms/static/sass/_about.scss b/lms/static/sass/_about.scss new file mode 100644 index 0000000000..4a4bfda7f0 --- /dev/null +++ b/lms/static/sass/_about.scss @@ -0,0 +1,2 @@ +.about { +} diff --git a/lms/static/sass/_base.scss b/lms/static/sass/_base.scss index 9f405f3281..3d1145f57f 100644 --- a/lms/static/sass/_base.scss +++ b/lms/static/sass/_base.scss @@ -26,6 +26,22 @@ h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased; } +h1 { + color: $lighter-base-font-color; + font: 300 2.4rem/3rem $sans-serif; + letter-spacing: 1px; + margin-bottom: 20px; + text-align: center; + text-transform: uppercase; +} + +h2 { + color: $lighter-base-font-color; + font: normal 1.4rem/2rem $serif; + margin-bottom: 15px; + text-transform: uppercase; +} + p { color: $base-font-color; font: normal 1.3rem/2rem $serif; @@ -36,9 +52,23 @@ p + p { margin-top: 20px; } +p { + a:link, a:visited { + color: $blue; + font: normal 1.3rem/2rem $serif; + text-decoration: none; + @include transition(all, 0.1s, linear); + + &:hover { + color: $blue; + text-decoration: underline; + } + } +} + a:link, a:visited { color: $blue; - font: normal 1rem/1.8rem $sans-serif; + font: normal 1.2rem/2rem $sans-serif; text-decoration: none; @include transition(all, 0.1s, linear); diff --git a/lms/static/sass/_base_extends.scss b/lms/static/sass/_base_extends.scss index 176b473b66..703a85c471 100644 --- a/lms/static/sass/_base_extends.scss +++ b/lms/static/sass/_base_extends.scss @@ -52,6 +52,7 @@ } .horizontal-divider { + border: none; @extend .faded-hr-divider; position: relative; @@ -63,3 +64,15 @@ top: 1px; } } + +.fade-right-hr-divider { + @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, + rgba(200,200,200, 1))); + border: none; +} + +.fade-left-hr-divider { + @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%, + rgba(200,200,200, 0))); + border: none; +} diff --git a/lms/static/sass/_course_info.scss b/lms/static/sass/_course_info.scss index d3fb5cdbea..924e0ce754 100644 --- a/lms/static/sass/_course_info.scss +++ b/lms/static/sass/_course_info.scss @@ -42,33 +42,14 @@ > hgroup { position: relative; - - hr { - @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%, - rgba(200,200,200, 1) 50%, - rgba(200,200,200, 1))); - border: none; - height: 1px; - margin: 10px 0; - position: relative; - - &::after { - @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, - rgba(255,255,255, 0.6) 50%, - rgba(255,255,255, 0.6))); - bottom: -1px; - content: ""; - display: block; - height: 1px; - position: absolute; - width: 100%; - } - } + margin-bottom: 12px; h1 { + color: $base-font-color; font: bold 2.8rem/3.2rem $sans-serif; @include inline-block; - margin-right: 5px; + margin: 0 5px 0 0; + letter-spacing: 0px; text-shadow: 0 1px rgba(255,255,255, 0.6); span { @@ -80,6 +61,7 @@ h2 { @include inline-block; + margin: 0; a { color: $lighter-base-font-color; @@ -97,19 +79,22 @@ p { color: $lighter-base-font-color; @include inline-block; - font: 300 1.2rem/1.6rem $sans-serif; + font: italic 1.2rem/1.6rem $serif; margin-top: 0px; margin-right: 20px; - text-transform: uppercase; &:last-child { margin: 0; } > span { + background: rgb(255,255,255); + border: 1px solid rgb(220,220,220); + @include border-radius(4px); color: $base-font-color; font: 300 1.2rem/1.6rem $sans-serif; margin-left: 5px; + padding: 2px 10px; } } } @@ -117,6 +102,7 @@ .actions { float: left; + margin-top: 5px; position: relative; width: flex-grid(4); z-index: 2; @@ -124,18 +110,14 @@ &:hover { .register-wrapper { @include box-shadow(0 1px 16px 0 rgba($blue, 0.35)); - border-color: rgb(180,180,180); } } .register-wrapper { @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-sizing(border-box); @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9)); - border: 1px solid rgb(210,210,210); @include border-radius(4px); @include transition(all, 0.15s, linear); - padding: 10px; a.register { @include button(shiny, $blue); @@ -156,14 +138,14 @@ padding: 0px 20px; p { - background: rgb(245,245,245); + 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)); border: 1px solid rgb(210,210,210); border-top: 0; @include border-bottom-radius(4px); - padding: 5px 10px; + padding: 3px 10px; margin: 0 auto; - color: $lighter-base-font-color; + color: $base-font-color; font: italic 300 1.2rem/1.6rem $serif; margin: 0 0 5px 0; text-align: center; diff --git a/lms/static/sass/_dashboard.scss b/lms/static/sass/_dashboard.scss index 05bbb3c47c..f416ff489b 100644 --- a/lms/static/sass/_dashboard.scss +++ b/lms/static/sass/_dashboard.scss @@ -3,9 +3,10 @@ margin: 40px 10px; .sidebar { - background: rgb(240,240,240); - margin-right: flex-gutter(); - position: absolute; + background: rgb(250,250,250); + border: 1px solid rgb(220,220,220); + @include border-radius(4px); + float: left; width: 250px; @media screen and (max-width: 768px) { @@ -108,7 +109,6 @@ } .my-courses { - @include box-sizing(border-box); margin: 0px; padding-left: 270px; @@ -121,45 +121,31 @@ width: flex-grid(12); } - nav.course-toggle { - background: rgb(230,230,230); - margin-bottom: 30px; - position: relative; + .empty-dashboard-message { + background: rgb(250,250,250); + border: 1px solid rgb(210,210,210); + @include border-radius(4px); + padding: 40px 0px; + text-align: center; - ol.filters { - @include clearfix; + p { + color: $lighter-base-font-color; + font-style: italic; + text-shadow: 0 1px rgba(255,255,255, 0.6); - li { - border-right: 1px solid rgb(200,200,200); + a { + background: rgb(240,240,240); + @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%)); + border: 1px solid rgb(220,220,220); + @include border-radius(4px); + @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1)); @include box-sizing(border-box); - list-style: none; - float: left; - padding: 15px 10px; - width: 25%; - text-align: center; - - &:last-child { - border: none; - } - - &:hover { - background: rgb(220,220,220); - cursor: pointer; - } - - &.selected { - background: rgb(220,220,220); - } - - h2 { - font: normal 1rem/1.2rem $sans-serif; - text-transform: none; - } - - span.count { - margin: 5px 0 0 0; - display: block; - } + color: $base-font-color; + font: 300 1.2rem/1.6rem $sans-serif; + @include inline-block; + margin-left: 5px; + padding: 5px 10px; + text-shadow: 0 1px rgba(255,255,255, 0.6); } } } @@ -273,7 +259,8 @@ } h2 { - font: bold 1.2rem/1.6rem $sans-serif; + color: $base-font-color; + font: bold 1.4rem/1.6rem $sans-serif; margin-bottom: 2px; overflow: hidden; text-shadow: 0 1px rgba(255,255,255, 0.6); @@ -282,9 +269,9 @@ white-space: nowrap; } - p { - color: $base-font-color; - font: normal 1rem/1.6rem $sans-serif; + h3 { + color: $lighter-base-font-color; + font: italic bold 1.2rem/1.6rem $sans-serif; overflow: hidden; text-shadow: 0 1px rgba(255,255,255, 0.6); text-overflow: ellipsis; diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss index 9699664b83..368bcd5702 100644 --- a/lms/static/sass/_index.scss +++ b/lms/static/sass/_index.scss @@ -43,12 +43,7 @@ padding-top: 20px; h1 { - color: $lighter-base-font-color; - font: 300 2.4rem/3rem $sans-serif; - letter-spacing: 1px; - margin-bottom: 20px; - position: relative; - text-transform: uppercase; + text-align: left; } .intro { @@ -256,12 +251,12 @@ } .courses { - background: rgb(245,245,245); - @include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%, - rgba(255,255,255, 0.5) 20%, - rgba(255,255,255, 0) 50%, - rgba(255,255,255, 0.5) 80%, - rgba(255,255,255, 1) 100%)); + //background: rgb(245,245,245); + //@include background-image(linear-gradient(180deg, rgba(255,255,255, 1) 0%, + //rgba(255,255,255, 0.5) 20%, + //rgba(255,255,255, 0) 50%, + //rgba(255,255,255, 0.5) 80%, + //rgba(255,255,255, 1) 100%)); } } diff --git a/lms/static/sass/_jobs.scss b/lms/static/sass/_jobs.scss new file mode 100644 index 0000000000..943b1f8430 --- /dev/null +++ b/lms/static/sass/_jobs.scss @@ -0,0 +1,157 @@ +.jobs { + margin: 60px auto 120px; + + h1 + hr { + margin-bottom: 80px; + } + + .message { + @include clearfix; + margin-bottom: 60px; + padding-bottom: 60px; + position: relative; + + hr { + bottom: 0px; + margin: 0px; + position: absolute; + width: 100%; + } + + .photo { + background: rgb(255,255,255); + border: 1px solid rgb(210,210,210); + padding: 1px; + width: flex-grid(4); + + img { + background: rgb(245,245,245); + display: block; + height: 200px; + width: 100%; + } + } + + &.left { + .photo { + float: left; + margin-right: flex-gutter(); + } + } + + &.right { + h2, p { + text-align: right; + } + + .photo { + float: right; + margin-left: flex-gutter(); + } + } + + &:last-child { + margin-bottom: 0px; + } + } + + .jobs-wrapper { + @include clearfix; + float: left; + width: flex-grid(12); + + > h2 { + border-bottom: 1px solid rgb(220,220,220); + margin-bottom: 60px; + padding-bottom: 20px; + //text-align: center; + } + + .jobs-sidebar { + @include box-sizing(border-box); + border-left: 1px solid rgb(220,220,220); + float: left; + padding-bottom: 20px; + padding-left: 20px; + width: flex-grid(3); + + nav { + margin-bottom: 40px; + + ol { + @include clearfix; + + li { + float: left; + margin-right: flex-gutter(); + width: flex-grid(12); + + &:nth-child(4n) { + margin-right: 0px; + } + + a { + display: block; + margin-left: -20px; + padding: 10px 0px 10px 20px; + position: relative; + text-transform: uppercase; + + &::after { + @include background-image(linear-gradient(180deg, rgba(235,235,235, 0) 0%, + rgba(235,235,235, 1))); + bottom: 0px; + //content: ""; + display: block; + height: 1px; + left: 0px; + position: absolute; + width: 100%; + } + + &:hover { + background: rgb(245,245,245); + //@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%, + //rgba(245,245,245, 1) 80%, + //rgba(245,245,245, 1) 100%)); + } + } + } + } + } + + p + h2 { + margin-top: 40px; + } + } + + .jobs-listing { + float: left; + margin-right: flex-gutter(); + width: flex-grid(9); + + .job { + border-bottom: 1px solid rgb(220,220,220); + padding: 40px 0px; + + &:first-child { + padding-top: 0px; + } + + &:last-child { + border: none; + padding-bottom: 0px; + } + + .inner-wrapper { + } + + h3 { + font-family: $sans-serif; + font-weight: bold; + margin-bottom: 15px; + } + } + } + } +} diff --git a/lms/static/sass/_shared_list_of_courses.scss b/lms/static/sass/_shared_list_of_courses.scss index fd1ad26edb..8c9814cd30 100644 --- a/lms/static/sass/_shared_list_of_courses.scss +++ b/lms/static/sass/_shared_list_of_courses.scss @@ -37,7 +37,6 @@ > a { @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.75))); - //@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.6), rgba(0,0,0, 0.8))); @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2)); border-bottom: 1px solid rgba(150,150,150, 0.7); display: block; @@ -51,6 +50,7 @@ top: 0px; h2 { + color: $base-font-color; font: bold 1.2rem/1.6rem $sans-serif; padding-top: 10px; text-shadow: 0 1px rgba(255,255,255, 0.6); diff --git a/lms/static/sass/_shared_modal.scss b/lms/static/sass/_shared_modal.scss index e34bdb2121..e924ecc3c7 100644 --- a/lms/static/sass/_shared_modal.scss +++ b/lms/static/sass/_shared_modal.scss @@ -30,22 +30,30 @@ width: grid-width(6); z-index: 10; + &::before { + @include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8))); + bottom: 0; + content: ""; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 1; + } + &.visible { display: block; } &.video-modal { - //height: 360px; left: 50%; - margin-left: -320px; - //margin-top: -180px; - //top: 50%; - width: 642px; + margin-left: -281px; + width: 562px; .inner-wrapper { - height: 360px; + height: 315px; padding: 0px; - width: 640px; + width: 560px; } } @@ -57,6 +65,7 @@ overflow: hidden; padding-bottom: 30px; position: relative; + z-index: 2; header { margin-bottom: 30px; diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css index 418062ece1..49b2b85b55 100755 --- a/lms/static/sass/application.css +++ b/lms/static/sass/application.css @@ -316,6 +316,20 @@ h1, h2, h3, h4, h5, h6 { margin: 0px; -webkit-font-smoothing: antialiased; } +h1 { + color: #a0a0a0; + font: 300 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif; + letter-spacing: 1px; + margin-bottom: 20px; + text-align: center; + text-transform: uppercase; } + +h2 { + color: #a0a0a0; + font: normal 1.4rem/2rem Georgia, Cambria, "Times New Roman", Times, serif; + margin-bottom: 15px; + text-transform: uppercase; } + p { color: #3c3c3c; font: normal 1.3rem/2rem Georgia, Cambria, "Times New Roman", Times, serif; @@ -324,9 +338,37 @@ p { p + p { margin-top: 20px; } +p a:link, p a:visited { + color: #1d9dd9; + font: normal 1.3rem/2rem Georgia, Cambria, "Times New Roman", Times, serif; + text-decoration: none; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + -ms-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + transition-duration: 0.1s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; } + p a:link:hover, p a:visited:hover { + color: #1d9dd9; + text-decoration: underline; } + a:link, a:visited { color: #1d9dd9; - font: normal 1rem/1.8rem "Open Sans", Verdana, Geneva, sans-serif; + font: normal 1.2rem/2rem "Open Sans", Verdana, Geneva, sans-serif; text-decoration: none; -webkit-transition-property: all; -moz-transition-property: all; @@ -416,6 +458,7 @@ a:link, a:visited { left: 1px; } .horizontal-divider { + border: none; position: relative; } .horizontal-divider::after { content: ""; @@ -423,6 +466,22 @@ a:link, a:visited { position: absolute; top: 1px; } +.fade-right-hr-divider { + background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8); + background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8); + background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8); + background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8); + background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8); + border: none; } + +.fade-left-hr-divider { + background-image: -webkit-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0)); + background-image: -moz-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0)); + background-image: -ms-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0)); + background-image: -o-linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0)); + background-image: linear-gradient(180deg, #c8c8c8 0%, rgba(200, 200, 200, 0)); + border: none; } + .animation-title-appear { -webkit-animation: title-appear 4.65s ease-out; -moz-animation: title-appear 4.65s ease-out; @@ -1780,6 +1839,7 @@ header.app { right: 60px; top: 0px; } .highlighted-courses .courses .course header.course-preview > a hgroup h2, .find-courses .courses .course header.course-preview > a hgroup h2 { + color: #3c3c3c; font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; padding-top: 10px; text-shadow: 0 1px rgba(255, 255, 255, 0.6); @@ -2076,16 +2136,29 @@ header.app { top: 170px; width: 485px; z-index: 10; } + .modal::before { + background-image: -webkit-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); + background-image: -moz-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); + background-image: -ms-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); + background-image: -o-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); + background-image: radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)); + bottom: 0; + content: ""; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 1; } .modal.visible { display: block; } .modal.video-modal { left: 50%; - margin-left: -320px; - width: 642px; } + margin-left: -281px; + width: 562px; } .modal.video-modal .inner-wrapper { - height: 360px; + height: 315px; padding: 0px; - width: 640px; } + width: 560px; } .modal .inner-wrapper { background: #f0f0f0; -webkit-border-radius: 0px; @@ -2099,7 +2172,8 @@ header.app { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7); overflow: hidden; padding-bottom: 30px; - position: relative; } + position: relative; + z-index: 2; } .modal .inner-wrapper header { margin-bottom: 30px; overflow: hidden; @@ -2331,12 +2405,7 @@ header.app { padding-right: 600px; padding-top: 20px; } .home > header .welcome h1 { - color: #a0a0a0; - font: 300 2.4rem/3rem "Open Sans", Verdana, Geneva, sans-serif; - letter-spacing: 1px; - margin-bottom: 20px; - position: relative; - text-transform: uppercase; } + text-align: left; } .home > header .welcome .intro { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -2671,13 +2740,6 @@ header.app { padding: 15px 10px; text-align: center; text-transform: uppercase; } - .home .highlighted-courses .courses { - background: #f5f5f5; - background-image: -webkit-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); - background-image: -moz-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); - background-image: -ms-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); - background-image: -o-linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); - background-image: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 80%, white 100%); } .home .more-info { margin-bottom: 60px; width: 100%; } @@ -2731,9 +2793,14 @@ header.app { .dashboard:after { clear: both; } .dashboard .sidebar, .dashboard section.course-index { - background: #f0f0f0; - margin-right: 2.024%; - position: absolute; + background: #fafafa; + border: 1px solid #dcdcdc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + float: left; width: 250px; } @media screen and (max-width: 768px) { .dashboard .sidebar, .dashboard section.course-index { @@ -2830,9 +2897,6 @@ header.app { font-weight: normal; text-transform: none; } .dashboard .my-courses { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; margin: 0px; padding-left: 270px; } @media screen and (max-width: 768px) { @@ -2842,40 +2906,51 @@ header.app { .dashboard .my-courses { float: none; width: 100%; } } - .dashboard .my-courses nav.course-toggle { - background: #e6e6e6; - margin-bottom: 30px; - position: relative; } - .dashboard .my-courses nav.course-toggle ol.filters { - zoom: 1; } - .dashboard .my-courses nav.course-toggle ol.filters:before, .dashboard .my-courses nav.course-toggle ol.filters:after { - content: ""; - display: table; } - .dashboard .my-courses nav.course-toggle ol.filters:after { - clear: both; } - .dashboard .my-courses nav.course-toggle ol.filters li { - border-right: 1px solid #c8c8c8; + .dashboard .my-courses .empty-dashboard-message { + background: #fafafa; + border: 1px solid #d2d2d2; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + padding: 40px 0px; + text-align: center; } + .dashboard .my-courses .empty-dashboard-message p { + color: #a0a0a0; + font-style: italic; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } + .dashboard .my-courses .empty-dashboard-message p a { + background: #f0f0f0; + background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + border: 1px solid #dcdcdc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - list-style: none; - float: left; - padding: 15px 10px; - width: 25%; - text-align: center; } - .dashboard .my-courses nav.course-toggle ol.filters li:last-child { - border: none; } - .dashboard .my-courses nav.course-toggle ol.filters li:hover { - background: #dcdcdc; - cursor: pointer; } - .dashboard .my-courses nav.course-toggle ol.filters li.selected { - background: #dcdcdc; } - .dashboard .my-courses nav.course-toggle ol.filters li h2 { - font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif; - text-transform: none; } - .dashboard .my-courses nav.course-toggle ol.filters li span.count { - margin: 5px 0 0 0; - display: block; } + color: #3c3c3c; + font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-left: 5px; + padding: 5px 10px; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } .dashboard .my-courses .my-course { background: #fafafa; border: 1px solid #dcdcdc; @@ -3073,7 +3148,8 @@ header.app { .dashboard .my-courses .my-course .info > hgroup { margin: 0px; } } .dashboard .my-courses .my-course .info > hgroup h2 { - font: bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + color: #3c3c3c; + font: bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; margin-bottom: 2px; overflow: hidden; text-shadow: 0 1px rgba(255, 255, 255, 0.6); @@ -3099,9 +3175,9 @@ header.app { transition-delay: 0; text-overflow: ellipsis; white-space: nowrap; } - .dashboard .my-courses .my-course .info > hgroup p { - color: #3c3c3c; - font: normal 1rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + .dashboard .my-courses .my-course .info > hgroup h3 { + color: #a0a0a0; + font: italic bold 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; overflow: hidden; text-shadow: 0 1px rgba(255, 255, 255, 0.6); text-overflow: ellipsis; @@ -3446,30 +3522,10 @@ nav.course-material { .course-info header.course-profile .intro-inner-wrapper .intro:after { clear: both; } .course-info header.course-profile .intro-inner-wrapper .intro > hgroup { - position: relative; } - .course-info header.course-profile .intro-inner-wrapper .intro > hgroup hr { - background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8); - background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8); - background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8); - background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8); - background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, #c8c8c8); - border: none; - height: 1px; - margin: 10px 0; - position: relative; } - .course-info header.course-profile .intro-inner-wrapper .intro > hgroup hr::after { - background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6)); - background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6)); - background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6)); - background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6)); - background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6)); - bottom: -1px; - content: ""; - display: block; - height: 1px; - position: absolute; - width: 100%; } + position: relative; + margin-bottom: 12px; } .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 { + color: #3c3c3c; font: bold 2.8rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif; display: -moz-inline-box; -moz-box-orient: vertical; @@ -3478,7 +3534,8 @@ nav.course-material { zoom: 1; *display: inline; *vertical-align: auto; - margin-right: 5px; + margin: 0 5px 0 0; + letter-spacing: 0px; text-shadow: 0 1px rgba(255, 255, 255, 0.6); } .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 span { color: #a0a0a0; @@ -3491,7 +3548,8 @@ nav.course-material { vertical-align: baseline; zoom: 1; *display: inline; - *vertical-align: auto; } + *vertical-align: auto; + margin: 0; } .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a { color: #a0a0a0; font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; @@ -3507,39 +3565,42 @@ nav.course-material { zoom: 1; *display: inline; *vertical-align: auto; - font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; margin-top: 0px; - margin-right: 20px; - text-transform: uppercase; } + margin-right: 20px; } .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p:last-child { margin: 0; } .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p > span { + background: white; + border: 1px solid #dcdcdc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; color: #3c3c3c; font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; - margin-left: 5px; } + margin-left: 5px; + padding: 2px 10px; } .course-info header.course-profile .intro-inner-wrapper .actions { float: left; + margin-top: 5px; position: relative; width: 31.984%; z-index: 2; } .course-info header.course-profile .intro-inner-wrapper .actions:hover .register-wrapper { -webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); -moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); - box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); - border-color: #b4b4b4; } + box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); } .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper { background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); - border: 1px solid #d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; @@ -3564,8 +3625,7 @@ nav.course-material { -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; - transition-delay: 0; - padding: 10px; } + transition-delay: 0; } .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register { border: 1px solid #002e88; border-bottom: 1px solid #001e5f; @@ -3624,7 +3684,7 @@ nav.course-material { .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing { padding: 0px 20px; } .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p { - background: #f5f5f5; + background: white; -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9); -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9); @@ -3642,9 +3702,9 @@ nav.course-material { -ms-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; - padding: 5px 10px; + padding: 3px 10px; margin: 0 auto; - color: #a0a0a0; + color: #3c3c3c; font: italic 300 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; margin: 0 0 5px 0; text-align: center; @@ -3817,6 +3877,121 @@ nav.course-material { .course-info .course-sidebar .media:hover .play-intro::after { color: #b62568; } +.jobs { + margin: 60px auto 120px; } + .jobs h1 + hr { + margin-bottom: 80px; } + .jobs .message { + zoom: 1; + margin-bottom: 60px; + padding-bottom: 60px; + position: relative; } + .jobs .message:before, .jobs .message:after { + content: ""; + display: table; } + .jobs .message:after { + clear: both; } + .jobs .message hr { + bottom: 0px; + margin: 0px; + position: absolute; + width: 100%; } + .jobs .message .photo { + background: white; + border: 1px solid #d2d2d2; + padding: 1px; + width: 31.984%; } + .jobs .message .photo img { + background: #f5f5f5; + display: block; + height: 200px; + width: 100%; } + .jobs .message.left .photo { + float: left; + margin-right: 2.024%; } + .jobs .message.right h2, .jobs .message.right p { + text-align: right; } + .jobs .message.right .photo { + float: right; + margin-left: 2.024%; } + .jobs .message:last-child { + margin-bottom: 0px; } + .jobs .jobs-wrapper { + zoom: 1; + float: left; + width: 100%; } + .jobs .jobs-wrapper:before, .jobs .jobs-wrapper:after { + content: ""; + display: table; } + .jobs .jobs-wrapper:after { + clear: both; } + .jobs .jobs-wrapper > h2 { + border-bottom: 1px solid #dcdcdc; + margin-bottom: 60px; + padding-bottom: 20px; } + .jobs .jobs-wrapper .jobs-sidebar { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-left: 1px solid #dcdcdc; + float: left; + padding-bottom: 20px; + padding-left: 20px; + width: 23.482%; } + .jobs .jobs-wrapper .jobs-sidebar nav { + margin-bottom: 40px; } + .jobs .jobs-wrapper .jobs-sidebar nav ol { + zoom: 1; } + .jobs .jobs-wrapper .jobs-sidebar nav ol:before, .jobs .jobs-wrapper .jobs-sidebar nav ol:after { + content: ""; + display: table; } + .jobs .jobs-wrapper .jobs-sidebar nav ol:after { + clear: both; } + .jobs .jobs-wrapper .jobs-sidebar nav ol li { + float: left; + margin-right: 2.024%; + width: 100%; } + .jobs .jobs-wrapper .jobs-sidebar nav ol li:nth-child(4n) { + margin-right: 0px; } + .jobs .jobs-wrapper .jobs-sidebar nav ol li a { + display: block; + margin-left: -20px; + padding: 10px 0px 10px 20px; + position: relative; + text-transform: uppercase; } + .jobs .jobs-wrapper .jobs-sidebar nav ol li a::after { + background-image: -webkit-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb); + background-image: -moz-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb); + background-image: -ms-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb); + background-image: -o-linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb); + background-image: linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb); + bottom: 0px; + display: block; + height: 1px; + left: 0px; + position: absolute; + width: 100%; } + .jobs .jobs-wrapper .jobs-sidebar nav ol li a:hover { + background: #f5f5f5; } + .jobs .jobs-wrapper .jobs-sidebar p + h2 { + margin-top: 40px; } + .jobs .jobs-wrapper .jobs-listing { + float: left; + margin-right: 2.024%; + width: 74.494%; } + .jobs .jobs-wrapper .jobs-listing .job { + border-bottom: 1px solid #dcdcdc; + padding: 40px 0px; } + .jobs .jobs-wrapper .jobs-listing .job:first-child { + padding-top: 0px; } + .jobs .jobs-wrapper .jobs-listing .job:last-child { + border: none; + padding-bottom: 0px; } + .jobs .jobs-wrapper .jobs-listing .job h3 { + font-family: "Open Sans", Verdana, Geneva, sans-serif; + font-weight: bold; + margin-bottom: 15px; } + html { height: 100%; max-height: 100%; } diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss index abb4ed19ce..bdbd467b89 100644 --- a/lms/static/sass/application.scss +++ b/lms/static/sass/application.scss @@ -24,6 +24,8 @@ @import 'course'; @import 'find_courses'; @import 'course_info'; +@import 'jobs'; +@import 'about'; @import 'sass_old/courseware/courseware'; @import 'sass_old/courseware/sequence-nav'; diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 1b6990c32f..c3fc5bf8de 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -33,22 +33,9 @@
- +
+

My Current Courses

+
% if len(courses) > 0: % for course in courses: @@ -57,13 +44,13 @@
- +

${course.title}

% for instructor in course.instructors: -

${instructor}, ${course.institution}

+

${course.institution}

% endfor
options
@@ -85,11 +72,9 @@ % endfor % else: -
-
- Find Courses -
-
+
+

Looks like you aren't registered for any courses. You should take a minute and Find some courses!

+
% endif
diff --git a/lms/templates/jobs.html b/lms/templates/jobs.html index c60ae34484..c8694ed723 100644 --- a/lms/templates/jobs.html +++ b/lms/templates/jobs.html @@ -1,3 +1,101 @@ <%inherit file="main.html" /> -

Jobs

+
+

Want to change the future of education?

+
+ +
+
+
+ +
+

Mission: Educate 1 billion people around the world

+

“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.

+

Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.” +

+
+
+ +
+
+ +
+

What it's like to work here

+

“Harvard and MIT will use these new technologies and the research they will make possible to lead the direction of online learning in a way that benefits our students, our peers, and people across the nation and the globe,” Faust continued.

+

[fast-moving not-for-profit startup][institutional backing, funding, benefits, and stability][industry salaries]

+
+
+ +
+
+ +
+

Mission: Educate 1 billion people around the world

+

“EdX represents a unique opportunity to improve education on our own campuses through online learning, while simultaneously creating a bold new educational path for millions of learners worldwide,” MIT President Susan Hockfield said.

+

Harvard President Drew Faust said, “edX gives Harvard and MIT an unprecedented opportunity to dramatically extend our collective reach by conducting groundbreaking research into effective education and by extending online access to quality higher education.” +

+ +
+

We are currently looking for

+ +
+
+
+

edX Fellow

+

The edX fellows program is intended as an alternative to the traditional academic track for candidates with a strong focus on teaching. Fellows act as contact points for departments at MIT and Harvard, and help facilitate putting together on-line courses.

+

If you're interested in this position, send an e-mail to fellow-jobs@edxonline.org

+
+
+ +
+
+

Content Engineer

+

Content engineers help create the technology for specific courses. The tasks include:

+
    +
  • +

    Development of course-specific user-facing elements, such as the circuit editor and simulator that Chris Terman and Jacob White developed for 6.002x

    +
    • +
  • +

    Simple integration of course materials into courses

    +
    • +
  • +

    Developing programs to grade rich design questions, such as the ones developed by Gerald Sussman to allow basic design problems in 6.002x.

    +
    • +
+

Knowledge of Python, XML, and/or JavaScript is desired. Strong interest and background in pedagogy and education is desired as well.

+

If you're interested in this position, send an e-mail to content-engineer@edxonline.org

+
+
+ +
+
+

Technology Team

+

[Looking for both back-end and front-end developers. Strong backgrounds in machine learning, education, user interaction design, big data, or social network analysis are desirable, but team members do wear many hats. Best candidate would be a masterful hacker who went and did startups after finishing their Ph.D. We should find a way to make some positions that parallel fellows, and can leverage MIT/Harvard prestige]

+

If you're interested in this position, send an e-mail to content-engineer@edxonline.org

+
+
+
+ +
+

Positions

+ +

How to Apply

+

E-mail your resume, coverletter and any other materials to careers@edxonline.org

+

Our Location

+

11 Cambridge Center, Cambridge MA USA

+
+
+ +
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index f474a3f888..82912b33b5 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -65,7 +65,4 @@ %if not user.is_authenticated(): <%include file="login_modal.html" /> <%include file="signup_modal.html" /> - -
-
%endif diff --git a/lms/templates/portal/course_about.html b/lms/templates/portal/course_about.html index ec84626400..ac497d8593 100644 --- a/lms/templates/portal/course_about.html +++ b/lms/templates/portal/course_about.html @@ -12,7 +12,6 @@

${course.get_about_section("title")}

${course.get_about_section("university")}

-

Class Starts: 7/12/12

@@ -53,13 +52,13 @@

Syllabus

${course.get_about_section("syllabus")}

-

Textbook

+

Textbook

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

Frequently Asked Questions

- ${course.get_about_section("faq")} +

Frequently Asked Questions

+

${course.get_about_section("faq")}

- ${course.get_about_section("more_info")} +

${course.get_about_section("more_info")}

@@ -98,7 +97,6 @@
<%include file="../video_modal.html" /> - ${course.get_about_section("video")}
diff --git a/lms/templates/video_modal.html b/lms/templates/video_modal.html index 89744fb214..377af43917 100644 --- a/lms/templates/video_modal.html +++ b/lms/templates/video_modal.html @@ -2,7 +2,7 @@
- + ${course.get_about_section("video")}

✕