Commit 1be9196d by Galen Frechette

wip header, wip header refactoring, improves course object visual design, improves footer

parent 897a89c5
lms/static/images/logo.png

2.74 KB | W: | H:

lms/static/images/logo.png

4.04 KB | W: | H:

lms/static/images/logo.png
lms/static/images/logo.png
lms/static/images/logo.png
lms/static/images/logo.png
  • 2-up
  • Swipe
  • Onion skin
$(document).ready(function () {
$('a.options').toggle(function() {
$('ol.user-options').addClass("expanded");
$('a.options').addClass("active");
$('a.dropdown').toggle(function() {
$('ul.dropdown-menu').addClass("expanded");
$('a.dropdown').addClass("active");
}, function() {
$('ol.user-options').removeClass("expanded");
$('a.options').removeClass("active");
$('ul.dropdown-menu').removeClass("expanded");
$('a.dropdown').removeClass("active");
});
});
......@@ -87,7 +87,7 @@
}
.faq {
//display: none;
display: none;
@include clearfix;
nav.categories {
......@@ -99,6 +99,7 @@
width: flex-grid(3);
a {
color: $lighter-base-font-color;
display: block;
letter-spacing: 1px;
margin-right: -20px;
......@@ -107,6 +108,7 @@
text-transform: uppercase;
&:hover {
color: $blue;
background: rgb(245,245,245);
}
}
......
......@@ -77,6 +77,11 @@ a:link, a:visited {
}
}
.content-wrapper {
margin: 0 auto 0;
width: flex-grid(12);
}
.container {
@include clearfix;
margin: 0 auto 0;
......
.find-courses {
.container {
margin-bottom: 60px;
}
header.search-intro {
background: rgb(240,240,240);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
@include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
width: 100%;
.inner-wrapper {
......
.home {
margin: 50px 10px 100px;
margin: 0px 0px 100px;
> header {
background: rgb(250,250,250);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
@include clearfix;
min-height: 335px;
margin-bottom: 40px;
position: relative;
padding: 60px 0px 50px;
width: flex-grid(12);
.inner-wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.video-wrapper {
right: 0px;
position: absolute;
......@@ -98,7 +106,6 @@
@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
rgba(245,245,245, 1) 50%,
rgba(245,245,245, 0) 100%));
border-top: 1px solid rgb(210,210,210);
border-bottom: 1px solid rgb(210,210,210);
margin-bottom: 0px;
overflow: hidden;
......@@ -234,25 +241,23 @@
width: flex-grid(12);
> h2 {
background: rgb(245,245,245);
border: 1px solid rgb(220,220,220);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4));
border: 1px solid rgb(210,210,210);
border-top: none;
@include border-bottom-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
color: $lighter-base-font-color;
letter-spacing: 1px;
margin-bottom: 0px;
padding: 15px 10px;
text-align: center;
text-transform: uppercase;
}
text-shadow: 0 1px rgba(255,255,255, 0.6);
.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%));
.lowercase {
text-transform: none;
}
}
}
......
footer {
max-width: 1200px;
background: rgb(250,250,250);
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 3px 0 rgba(0,0,0, 0.1));
margin: 0 auto;
padding: 0 0 40px;
width: flex-grid(12);
......@@ -11,7 +13,6 @@ footer {
}
nav {
border-top: 1px solid rgb(200,200,200);
@include box-sizing(border-box);
@include clearfix;
max-width: 1200px;
......@@ -24,16 +25,23 @@ footer {
padding-top: 2px;
a.logo {
@include box-sizing(border-box);
@include background-image(url('/static/images/logo.png'));
background-position: 0 -24px;
background-repeat: no-repeat;
@include inline-block;
float: left;
height: 100%;
margin-right: 14px;
margin-top: 1px;
height: 23px;
margin-right: 15px;
margin-top: 2px;
padding-right: 15px;
position: relative;
width: 47px;
vertical-align: middle;
&:hover {
background-position: 0 0;
}
&::after {
@extend .faded-vertical-divider;
content: "";
......@@ -44,16 +52,11 @@ footer {
top: -2px;
width: 1px;
}
img {
position: relative;
z-index: 2;
}
}
p {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
font: italic 1.2rem/1.6rem $serif;
@include inline-block;
margin: 0 auto;
padding-top: 4px;
......@@ -62,9 +65,9 @@ footer {
a {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
font: italic 1.2rem/1.6rem $serif;
margin-left: 5px;
text-decoration: underline;
//text-decoration: underline;
}
}
}
......@@ -74,7 +77,6 @@ footer {
font-size: 0em;
li {
//border-right: 1px solid rgb(200,200,200);
@include inline-block;
list-style: none;
padding: 0px 15px;
......@@ -94,7 +96,8 @@ footer {
a:link, a:visited {
color: $lighter-base-font-color;
font: normal 1.2rem/1.6rem $serif;
font: 300 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 6px 0px;
}
......
header.app {
header.global {
background: rgb(255,255,255);
border-bottom: 1px solid rgb(200,200,200);
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
height: 55px;
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
//@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(245,245,245, 1)));
height: 75px;
position: relative;
width: 100%;
z-index: 10;
.wrapper {
nav {
@include clearfix;
@include box-sizing(border-box);
max-width: 1200px;
height: 40px;
margin: 0 auto;
padding: 0px 10px;
max-width: 1200px;
padding-top: 20px;
width: flex-grid(12);
}
a.logo {
@include box-sizing(border-box);
display: block;
h1.logo {
float: left;
height: 100%;
margin: 16px 15px 0px 0px;
margin: 7px 15px 0px 0px;
padding-right: 20px;
position: relative;
img {
position: relative;
z-index: 2;
&::before {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 45px;
position: absolute;
right: 1px;
top: -12px;
width: 1px;
}
}
.divider {
@extend .vertical-divider;
@include inline-block;
height: 40px;
vertical-align: middle;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 36px;
position: absolute;
right: 0px;
top: 0px;
width: 1px;
}
nav {
height: 40px;
margin-top: 8px;
a {
@include background-image(url('/static/images/logo.png'));
background-position: 0 0;
background-repeat: no-repeat;
display: block;
height: 23px;
width: 47px;
}
}
ol {
&.find-courses {
float: left;
}
......@@ -47,67 +65,70 @@ header.app {
float: right;
}
ol {
font-size: 0em;
> li {
@include inline-block;
margin-right: 20px;
position: relative;
vertical-align: middle;
li {
@include inline-block;
vertical-align: top;
&:last-child {
margin-right: 0px;
}
a {
letter-spacing: 1px;
vertical-align: middle;
}
}
li.secondary {
margin: 0px 15px;
li.secondary {
> a {
color: $lighter-base-font-color;
color: $blue;
display: block;
//font: italic 1.2rem/1.4rem $serif;
font: normal 1.2rem/1.4rem $sans-serif;
@include inline-block;
margin: 0px 20px 0px 0px;
text-decoration: none;
//text-transform: lowercase;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
a {
@include border-radius(3px);
border: 1px solid transparent;
@include box-sizing(border-box);
color: $lighter-base-font-color;
display: block;
font: italic 1.2rem/1.4rem $serif;
height: 30px;
@include inline-block;
margin: 5px 15px 5px 0px;
padding: 7px 2px;
text-decoration: none;
text-transform: lowercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:last-child {
margin-right: 0px;
}
&:last-child {
margin-right: 0px;
}
&:hover {
color: $base-font-color;
}
&:hover {
color: $base-font-color;
}
}
}
li.primary {
position: relative;
li.primary {
> a {
@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 transparent;
border-color: rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color;
display: inline-block;
font: normal 1.2rem/1.4rem $sans-serif;
@include inline-block;
margin: 1px 5px;
padding: 8px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
a {
border: 1px solid transparent;
@include border-radius(3px);
@include box-sizing(border-box);
color: $base-font-color;
display: block;
font: normal 1.2rem/1.4rem $sans-serif;
height: 38px;
@include inline-block;
margin: 1px 5px;
padding: 10px 8px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:hover, &.active {
@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-color: rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
}
&:last-child {
margin-right: 0px;
}
&:hover, &.active {
}
}
}
......@@ -116,7 +137,7 @@ header.app {
float: right;
a.user-link {
padding: 9px 8px 11px 40px;
padding: 8px 12px 8px 40px;
position: relative;
text-transform: none;
......@@ -129,15 +150,15 @@ header.app {
.avatar {
background: rgb(220,220,220);
@include border-radius(3px);
border: 1px solid rgb(180,180,180);
border: 1px solid rgb(80,80,80);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
height: 22px;
height: 21px;
@include inline-block;
left: 8px;
left: 6px;
overflow: hidden;
position: absolute;
top: 6px;
width: 22px;
top: 5px;
width: 21px;
&::after {
@include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
......@@ -160,17 +181,17 @@ header.app {
}
}
ol.user-options {
ul.dropdown-menu {
@include border-radius(4px);
@include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
border: 1px solid rgb(0,0,0);
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%));
display: none;
right: 0px;
padding: 5px 10px;
position: absolute;
top: 52px;
right: 4px;
top: 50px;
width: 150px;
z-index: 3;
......@@ -209,6 +230,7 @@ header.app {
> a {
@include box-sizing(border-box);
@include border-radius(3px);
color: rgba(255,255,255, 0.9);
display: block;
font: italic 1.2rem/1.4rem $serif;
......
......@@ -21,26 +21,27 @@
margin-right: 0;
}
//.meta-info {
//background: rgba(0,0,0, 0.6);
//bottom: 8px;
//border: 1px solid rgba(0,0,0, 0.5);
//@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15));
//@include clearfix;
//left: -4px;
//position: absolute;
//@include transition(all, 0.15s, linear);
//p {
//color: rgb(255,255,255);
//font: 300 1.2rem/1.4rem $sans-serif;
//padding: 5px 12px;
//&.university {
//float: left;
//}
//}
//}
.meta-info {
background: rgba(0,0,0, 0.6);
bottom: 6px;
border: 1px solid rgba(0,0,0, 0.5);
@include border-right-radius(2px);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15));
@include clearfix;
position: absolute;
right: -3px;
@include transition(all, 0.15s, linear);
p {
color: rgb(255,255,255);
font: 300 1.2rem/1.4rem $sans-serif;
padding: 5px 12px;
&.university {
float: left;
}
}
}
.inner-wrapper {
border: 1px solid rgba(255,255,255, 1);
......@@ -114,6 +115,7 @@
}
.info {
background: rgb(255,255,255);
height: 180px + 130px;
left: 0px;
position: absolute;
......@@ -121,31 +123,6 @@
@include transition(all, 0.15s, linear);
width: 100%;
.meta-info {
background: rgba(0,0,0, 0.6);
bottom: 130px;
border-top: 1px solid rgba(0,0,0, 0.5);
@include clearfix;
position: absolute;
@include transition(all, 0.15s, linear);
width: 100%;
p {
color: rgb(255,255,255);
font: 300 1.2rem/1.4rem $sans-serif;
padding: 5px 10px;
&.university {
float: left;
}
&.dates {
float: right;
margin-top: 0px;
}
}
}
.cover-image {
height: 180px;
overflow: hidden;
......@@ -159,13 +136,49 @@
}
.desc {
background: rgb(255,255,255);
@include box-sizing(border-box);
height: 130px;
height: 100px;
overflow: hidden;
padding: 10px;
padding: 10px 10px 15px 10px;
position: relative;
width: 100%;
p {
height: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
.bottom {
@include box-sizing(border-box);
@include clearfix;
padding: 6px 10px;
width: 100%;
> p, a {
color: $lighter-base-font-color;
font: 300 1.2rem/1.4rem $sans-serif;
letter-spacing: 1px;
padding: 0;
&.university {
border-right: 1px solid $lighter-base-font-color;
display: block;
float: left;
margin-right: 10px;
padding-right: 10px;
&:hover {
color: $blue;
}
}
&.dates {
float: left;
margin-top: 0px;
}
}
}
}
......@@ -176,10 +189,10 @@
.info {
top: -130px;
}
.meta-info {
opacity: 0;
}
.meta-info {
opacity: 0;
}
}
}
......
......@@ -393,6 +393,10 @@ a:link, a:visited {
a:link:hover, a:visited:hover {
color: #3c3c3c; }
.content-wrapper {
margin: 0 auto 0;
width: 100%; }
.container {
zoom: 1;
margin: 0 auto 0;
......@@ -431,7 +435,7 @@ a:link, a:visited {
height: 1px;
width: 100%; }
.faded-vertical-divider, .vertical-divider, header.app .divider, footer nav .copyright a.logo::after, footer nav ol li::after, .home .university-partners .partners li.partner::before {
.faded-vertical-divider, .vertical-divider, footer nav .copyright a.logo::after, footer nav ol li::after, header.global h1.logo::before, .home .university-partners .partners li.partner::before {
background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
......@@ -440,7 +444,7 @@ a:link, a:visited {
height: 100%;
width: 1px; }
.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after, .home .university-partners .partners li.partner::after {
.faded-vertical-divider-light, .vertical-divider::after, header.global h1.logo::after, .home .university-partners .partners li.partner::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
......@@ -449,9 +453,9 @@ a:link, a:visited {
height: 100%;
width: 1px; }
.vertical-divider, header.app .divider {
.vertical-divider {
position: relative; }
.vertical-divider::after, header.app .divider::after {
.vertical-divider::after {
content: "";
display: block;
position: absolute;
......@@ -1326,7 +1330,11 @@ form {
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
footer {
max-width: 1200px;
background: #fafafa;
border-top: 1px solid #c8c8c8;
-webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding: 0 0 40px;
width: 100%; }
......@@ -1335,7 +1343,6 @@ footer {
max-width: 100%;
position: absolute; }
footer nav {
border-top: 1px solid #c8c8c8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
......@@ -1353,9 +1360,13 @@ footer {
float: left;
padding-top: 2px; }
footer nav .copyright a.logo {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-position: 0 -24px;
background-repeat: no-repeat;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
......@@ -1364,12 +1375,15 @@ footer {
*display: inline;
*vertical-align: auto;
float: left;
height: 100%;
margin-right: 14px;
margin-top: 1px;
height: 23px;
margin-right: 15px;
margin-top: 2px;
padding-right: 15px;
position: relative;
width: 47px;
vertical-align: middle; }
footer nav .copyright a.logo:hover {
background-position: 0 0; }
footer nav .copyright a.logo::after {
content: "";
display: block;
......@@ -1378,12 +1392,9 @@ footer {
position: absolute;
top: -2px;
width: 1px; }
footer nav .copyright a.logo img {
position: relative;
z-index: 2; }
footer nav .copyright p {
color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
......@@ -1397,9 +1408,8 @@ footer {
vertical-align: middle; }
footer nav .copyright p a {
color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-left: 5px;
text-decoration: underline; }
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-left: 5px; }
footer nav ol {
float: right;
font-size: 0em; }
......@@ -1425,7 +1435,8 @@ footer {
width: 1px; }
footer nav ol li a:link, footer nav ol li a:visited {
color: #a0a0a0;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
padding: 6px 0px; }
footer nav ol li.social {
border: none;
......@@ -1458,42 +1469,125 @@ footer {
footer nav ol li.social a:hover {
opacity: 0.7; }
header.app {
header.global {
background: white;
border-bottom: 1px solid #c8c8c8;
background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: -o-linear-gradient(-90deg, #f5f5f5, #e6e6e6);
background-image: linear-gradient(-90deg, #f5f5f5, #e6e6e6);
height: 55px;
width: 100%; }
header.app .wrapper {
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
height: 75px;
position: relative;
width: 100%;
z-index: 10; }
header.global nav {
zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 1200px;
height: 40px;
margin: 0 auto;
padding: 0px 10px;
max-width: 1200px;
padding-top: 20px;
width: 100%; }
header.app .wrapper:before, header.app .wrapper:after {
header.global nav:before, header.global nav:after {
content: "";
display: table; }
header.app .wrapper:after {
header.global nav:after {
clear: both; }
header.app a.logo {
header.global h1.logo {
float: left;
margin: 7px 15px 0px 0px;
padding-right: 20px;
position: relative; }
header.global h1.logo::before {
content: "";
display: block;
height: 45px;
position: absolute;
right: 1px;
top: -12px;
width: 1px; }
header.global h1.logo::after {
content: "";
display: block;
height: 36px;
position: absolute;
right: 0px;
top: 0px;
width: 1px; }
header.global h1.logo a {
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-position: 0 0;
background-repeat: no-repeat;
display: block;
height: 23px;
width: 47px; }
header.global ol.find-courses {
float: left; }
header.global ol.guest {
float: right; }
header.global ol > li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 20px;
position: relative;
vertical-align: middle; }
header.global ol > li:last-child {
margin-right: 0px; }
header.global ol > li a {
letter-spacing: 1px;
vertical-align: middle; }
header.global ol li.secondary > a {
color: #a0a0a0;
color: #1d9dd9;
display: block;
font: normal 1.2rem/1.4rem "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: 0px 20px 0px 0px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
header.global ol li.secondary > a:last-child {
margin-right: 0px; }
header.global ol li.secondary > a:hover {
color: #3c3c3c; }
header.global ol li.primary > a {
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 transparent;
border-color: #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
float: left;
height: 100%;
margin: 16px 15px 0px 0px;
position: relative; }
header.app a.logo img {
position: relative;
z-index: 2; }
header.app .divider {
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
color: #3c3c3c;
display: inline-block;
font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
......@@ -1501,18 +1595,37 @@ header.app {
zoom: 1;
*display: inline;
*vertical-align: auto;
height: 40px;
margin: 1px 5px;
padding: 8px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
vertical-align: middle; }
header.app nav {
height: 40px;
margin-top: 8px; }
header.app nav.find-courses {
float: left; }
header.app nav.guest {
float: right; }
header.app nav ol {
font-size: 0em; }
header.app nav ol li {
header.global ol li.primary > a:last-child {
margin-right: 0px; }
header.global ol.user {
float: right; }
header.global ol.user a.user-link {
padding: 8px 12px 8px 40px;
position: relative;
text-transform: none; }
@media screen and (max-width: 768px) {
header.global ol.user a.user-link {
font-size: 0em;
padding: 10px 0px;
width: 38px; } }
header.global ol.user a.user-link .avatar {
background: #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border: 1px solid #505050;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
height: 21px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
......@@ -1520,242 +1633,144 @@ header.app {
zoom: 1;
*display: inline;
*vertical-align: auto;
vertical-align: top; }
header.app nav ol li.secondary {
margin: 0px 15px; }
header.app nav ol li.secondary a {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border: 1px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #a0a0a0;
left: 6px;
overflow: hidden;
position: absolute;
top: 5px;
width: 21px; }
header.global ol.user a.user-link .avatar::after {
background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
content: "";
display: block;
font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 30px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 5px 15px 5px 0px;
padding: 7px 2px;
text-decoration: none;
text-transform: lowercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
vertical-align: middle; }
header.app nav ol li.secondary a:last-child {
margin-right: 0px; }
header.app nav ol li.secondary a:hover {
color: #3c3c3c; }
header.app nav ol li.primary {
position: relative; }
header.app nav ol li.primary a {
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 100%; }
header.global ol.user a.user-link .avatar img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
height: 100%; }
header.global ol.user ul.dropdown-menu {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
border: 1px solid black;
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
display: none;
padding: 5px 10px;
position: absolute;
right: 4px;
top: 50px;
width: 150px;
z-index: 3; }
header.global ol.user ul.dropdown-menu.expanded {
display: block; }
header.global ol.user ul.dropdown-menu::before {
background: transparent;
border-top: 6px solid black;
border-right: 6px solid black;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
-webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
-moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
content: "";
display: block;
height: 0px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 12px;
top: -6px;
width: 0px; }
header.global ol.user ul.dropdown-menu li {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }
header.global ol.user ul.dropdown-menu li:first-child {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
header.global ol.user ul.dropdown-menu li > a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #3c3c3c;
display: block;
font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
height: 38px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 1px 5px;
padding: 10px 8px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
vertical-align: middle; }
header.app nav ol li.primary a:hover, header.app nav ol li.primary a.active, header.app nav.sequence-nav ol li.primary a.seq_video_active, header.app nav.sequence-nav ol li.primary a.seq_other_active, header.app nav.sequence-nav ol li.primary a.seq_vertical_active, header.app nav.sequence-nav ol li.primary a.seq_problem_active {
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-color: #c8c8c8;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
header.app nav.user {
float: right; }
header.app nav.user a.user-link {
padding: 9px 8px 11px 40px;
position: relative;
text-transform: none; }
@media screen and (max-width: 768px) {
header.app nav.user a.user-link {
font-size: 0em;
padding: 10px 0px;
width: 38px; } }
header.app nav.user a.user-link .avatar {
background: #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
border: 1px solid #b4b4b4;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
height: 22px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
left: 8px;
overflow: hidden;
position: absolute;
top: 6px;
width: 22px; }
header.app nav.user a.user-link .avatar::after {
background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
content: "";
display: block;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
width: 100%; }
header.app nav.user a.user-link .avatar img {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
display: block;
min-height: 100%;
min-width: 100%;
height: 100%; }
header.app nav.user ol.user-options {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
border: 1px solid black;
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
display: none;
right: 0px;
padding: 5px 10px;
position: absolute;
top: 52px;
width: 150px;
z-index: 3; }
header.app nav.user ol.user-options.expanded {
display: block; }
header.app nav.user ol.user-options::before {
background: transparent;
border-top: 6px solid black;
border-right: 6px solid black;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
-webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
-moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
content: "";
color: rgba(255, 255, 255, 0.9);
display: block;
height: 0px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 12px;
top: -6px;
width: 0px; }
header.app nav.user ol.user-options li {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }
header.app nav.user ol.user-options li:first-child {
border: none;
font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: auto;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis;
text-transform: none;
-webkit-transition-property: padding;
-moz-transition-property: padding;
-ms-transition-property: padding;
-o-transition-property: padding;
transition-property: padding;
-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;
white-space: nowrap;
width: 100%; }
header.global ol.user ul.dropdown-menu li > a:hover {
background: #1d9dd9;
background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
border-color: black;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
header.app nav.user ol.user-options li > a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: rgba(255, 255, 255, 0.9);
display: block;
font: italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: auto;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
text-shadow: none;
text-overflow: ellipsis;
text-transform: none;
-webkit-transition-property: padding;
-moz-transition-property: padding;
-ms-transition-property: padding;
-o-transition-property: padding;
transition-property: padding;
-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;
white-space: nowrap;
width: 100%; }
header.app nav.user ol.user-options li > a:hover {
background: #1d9dd9;
background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
border-color: black;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding-left: 8px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
box-shadow: none;
padding-left: 8px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
.highlighted-courses .courses, .find-courses .courses {
zoom: 1;
......@@ -1807,6 +1822,59 @@ header.app {
transition-delay: 0; }
.highlighted-courses .courses .course:nth-child(3n+3), .find-courses .courses .course:nth-child(3n+3) {
margin-right: 0; }
.highlighted-courses .courses .course .meta-info, .find-courses .courses .course .meta-info {
background: rgba(0, 0, 0, 0.6);
bottom: 6px;
border: 1px solid rgba(0, 0, 0, 0.5);
-webkit-border-top-right-radius: 2px;
-moz-border-top-right-radius: 2px;
-moz-border-radius-topright: 2px;
-ms-border-top-right-radius: 2px;
-o-border-top-right-radius: 2px;
border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-bottom-right-radius: 2px;
-moz-border-radius-bottomright: 2px;
-ms-border-bottom-right-radius: 2px;
-o-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
zoom: 1;
position: absolute;
right: -3px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-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; }
.highlighted-courses .courses .course .meta-info:before, .highlighted-courses .courses .course .meta-info:after, .find-courses .courses .course .meta-info:before, .find-courses .courses .course .meta-info:after {
content: "";
display: table; }
.highlighted-courses .courses .course .meta-info:after, .find-courses .courses .course .meta-info:after {
clear: both; }
.highlighted-courses .courses .course .meta-info p, .find-courses .courses .course .meta-info p {
color: white;
font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
padding: 5px 12px; }
.highlighted-courses .courses .course .meta-info p.university, .find-courses .courses .course .meta-info p.university {
float: left; }
.highlighted-courses .courses .course .inner-wrapper, .find-courses .courses .course .inner-wrapper {
border: 1px solid white;
height: 100%;
......@@ -1873,6 +1941,7 @@ header.app {
.highlighted-courses .courses .course header.course-preview > a:hover h2, .find-courses .courses .course header.course-preview > a:hover h2 {
text-decoration: underline; }
.highlighted-courses .courses .course .info, .find-courses .courses .course .info {
background: white;
height: 310px;
left: 0px;
position: absolute;
......@@ -1898,47 +1967,6 @@ header.app {
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
.highlighted-courses .courses .course .info .meta-info, .find-courses .courses .course .info .meta-info {
background: rgba(0, 0, 0, 0.6);
bottom: 130px;
border-top: 1px solid rgba(0, 0, 0, 0.5);
zoom: 1;
position: absolute;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-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;
width: 100%; }
.highlighted-courses .courses .course .info .meta-info:before, .highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:before, .find-courses .courses .course .info .meta-info:after {
content: "";
display: table; }
.highlighted-courses .courses .course .info .meta-info:after, .find-courses .courses .course .info .meta-info:after {
clear: both; }
.highlighted-courses .courses .course .info .meta-info p, .find-courses .courses .course .info .meta-info p {
color: white;
font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
padding: 5px 10px; }
.highlighted-courses .courses .course .info .meta-info p.university, .find-courses .courses .course .info .meta-info p.university {
float: left; }
.highlighted-courses .courses .course .info .meta-info p.dates, .find-courses .courses .course .info .meta-info p.dates {
float: right;
margin-top: 0px; }
.highlighted-courses .courses .course .info .cover-image, .find-courses .courses .course .info .cover-image {
height: 180px;
overflow: hidden;
......@@ -1948,14 +1976,46 @@ header.app {
min-height: 100%;
width: 100%; }
.highlighted-courses .courses .course .info .desc, .find-courses .courses .course .info .desc {
background: white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 130px;
height: 100px;
overflow: hidden;
padding: 10px;
padding: 10px 10px 15px 10px;
position: relative;
width: 100%; }
.highlighted-courses .courses .course .info .desc p, .find-courses .courses .course .info .desc p {
height: 100%;
overflow: hidden;
text-overflow: ellipsis; }
.highlighted-courses .courses .course .info .bottom, .find-courses .courses .course .info .bottom {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
zoom: 1;
padding: 6px 10px;
width: 100%; }
.highlighted-courses .courses .course .info .bottom:before, .highlighted-courses .courses .course .info .bottom:after, .find-courses .courses .course .info .bottom:before, .find-courses .courses .course .info .bottom:after {
content: "";
display: table; }
.highlighted-courses .courses .course .info .bottom:after, .find-courses .courses .course .info .bottom:after {
clear: both; }
.highlighted-courses .courses .course .info .bottom > p, .highlighted-courses .courses .course .info .bottom a, .find-courses .courses .course .info .bottom > p, .find-courses .courses .course .info .bottom a {
color: #a0a0a0;
font: 300 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
letter-spacing: 1px;
padding: 0; }
.highlighted-courses .courses .course .info .bottom > p.university, .highlighted-courses .courses .course .info .bottom a.university, .find-courses .courses .course .info .bottom > p.university, .find-courses .courses .course .info .bottom a.university {
border-right: 1px solid #a0a0a0;
display: block;
float: left;
margin-right: 10px;
padding-right: 10px; }
.highlighted-courses .courses .course .info .bottom > p.university:hover, .highlighted-courses .courses .course .info .bottom a.university:hover, .find-courses .courses .course .info .bottom > p.university:hover, .find-courses .courses .course .info .bottom a.university:hover {
color: #1d9dd9; }
.highlighted-courses .courses .course .info .bottom > p.dates, .highlighted-courses .courses .course .info .bottom a.dates, .find-courses .courses .course .info .bottom > p.dates, .find-courses .courses .course .info .bottom a.dates {
float: left;
margin-top: 0px; }
.highlighted-courses .courses .course:hover, .find-courses .courses .course:hover {
background: #f5f5f5;
border-color: #aaaaaa;
......@@ -1964,8 +2024,8 @@ header.app {
box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.4); }
.highlighted-courses .courses .course:hover .info, .find-courses .courses .course:hover .info {
top: -130px; }
.highlighted-courses .courses .course:hover .info .meta-info, .find-courses .courses .course:hover .info .meta-info {
opacity: 0; }
.highlighted-courses .courses .course:hover .meta-info, .find-courses .courses .course:hover .meta-info {
opacity: 0; }
.filter {
height: 60px; }
......@@ -2361,18 +2421,26 @@ header.app {
color: #3c3c3c; }
.home {
margin: 50px 10px 100px; }
margin: 0px 0px 100px; }
.home > header {
background: #fafafa;
border-bottom: 1px solid #c8c8c8;
-webkit-box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
zoom: 1;
min-height: 335px;
margin-bottom: 40px;
position: relative;
padding: 60px 0px 50px;
width: 100%; }
.home > header:before, .home > header:after {
content: "";
display: table; }
.home > header:after {
clear: both; }
.home > header .inner-wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative; }
.home > header .video-wrapper {
right: 0px;
position: absolute;
......@@ -2534,7 +2602,6 @@ header.app {
background-image: -ms-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
background-image: -o-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
background-image: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
margin-bottom: 0px;
overflow: hidden;
......@@ -2732,8 +2799,15 @@ header.app {
margin-bottom: 60px;
width: 100%; }
.home .highlighted-courses > h2 {
background: #f5f5f5;
border: 1px solid #dcdcdc;
background-image: -webkit-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: -moz-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: -ms-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: -o-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: linear-gradient(-90deg, #fafafa, #e6e6e6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
border: 1px solid #d2d2d2;
border-top: none;
-webkit-border-bottom-left-radius: 4px;
-moz-border-bottom-left-radius: 4px;
......@@ -2752,9 +2826,13 @@ header.app {
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
color: #a0a0a0;
letter-spacing: 1px;
margin-bottom: 0px;
padding: 15px 10px;
text-align: center;
text-transform: uppercase; }
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
.home .highlighted-courses > h2 .lowercase {
text-transform: none; }
.home .more-info {
margin-bottom: 60px;
width: 100%; }
......@@ -3441,12 +3519,14 @@ nav.course-material {
background: #f0f0f0;
height: 600px; }
.find-courses .container {
margin-bottom: 60px; }
.find-courses header.search-intro {
background: #f0f0f0;
border-bottom: 1px solid #c8c8c8;
-webkit-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
width: 100%; }
.find-courses header.search-intro .inner-wrapper {
height: 120px;
......@@ -4092,6 +4172,7 @@ nav.course-material {
.about .vision .message:last-child {
margin-bottom: 0px; }
.about .faq {
display: none;
zoom: 1; }
.about .faq:before, .about .faq:after {
content: "";
......@@ -4108,6 +4189,7 @@ nav.course-material {
padding-right: 20px;
width: 23.482%; }
.about .faq nav.categories a {
color: #a0a0a0;
display: block;
letter-spacing: 1px;
margin-right: -20px;
......@@ -4115,6 +4197,7 @@ nav.course-material {
text-align: right;
text-transform: uppercase; }
.about .faq nav.categories a:hover {
color: #1d9dd9;
background: #f5f5f5; }
.about .faq .responses {
float: left;
......
......@@ -14,16 +14,188 @@
</a>
</header>
<section class="info">
<div class="meta-info">
<p class="university">${course.get_about_section('university')}</p>
<p class="dates"><span class="start">7/23/12</span> &rarr; <span class="end">12/15/12</span></p>
</div>
<div class="cover-image">
<img src="${static.url('images/courses/history.png')}">
</div>
<div class="desc">
<p>${course.get_about_section('university')} An advanced introduction to analog circuits. An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
%endfor
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/math.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/python.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space1.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space2.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space4.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.title}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/space3.jpg')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.institution}</a>
<p class="dates"><span class="start">7/23/12</span></p>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.institution}</p>
</div>
</article>
......@@ -4,10 +4,8 @@
<footer>
<nav>
<section class="copyright">
<a href="${reverse('root')}" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
<a href="${reverse('root')}" class="logo"></a>
<p>&copy; 2012 edX, <a href="#">some rights reserved.</a></p>
</section>
<ol>
<li>
......
......@@ -2,9 +2,9 @@
<%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>
<section class="container">
<section class="home">
<header>
<section class="content-wrapper home">
<header>
<div class="inner-wrapper">
<section class="video-wrapper">
<div class="video-player">
<div class="video-inner">
......@@ -16,7 +16,7 @@
<div class="intro">
<h1>The Future of Online Education</h1>
<p>
EdX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. EdX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education.
edX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. edX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education.
</p>
</div>
<div class="signup-wrapper">
......@@ -25,39 +25,42 @@
</section>
</div>
</section>
</header>
<section class="university-partners">
<ol class="partners">
<li class="partner mit">
<a href="/university_profile.html">
<img src="${static.url('images/mit.png')}" />
<div class="name">
<span>MITx</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard.png')}" />
<div class="name">
<span>HarvardX</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/berkeley.png')}" />
<div class="name">
<span>BerkeleyX</span>
</div>
</a>
</li>
</ol>
</section>
</div>
</header>
<section class="container">
<section class="highlighted-courses">
<h2>Explore courses from edX universities</h2>
<h2>Explore courses from <span class="lowercase">edX</span> universities</h2>
<section class="university-partners">
<ol class="partners">
<li class="partner mit">
<a href="/university_profile.html">
<img src="${static.url('images/mit.png')}" />
<div class="name">
<span>MITx</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/harvard.png')}" />
<div class="name">
<span>HarvardX</span>
</div>
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<img src="${static.url('images/berkeley.png')}" />
<div class="name">
<span>BerkeleyX</span>
</div>
</a>
</li>
</ol>
</section>
<section class="courses">
%for course in courses:
<%include file="course.html" args="course=course" />
......
<%namespace name='static' file='static_content.html'/>
<%inherit file="main.html" />
<section class="container jobs">
......@@ -7,7 +9,7 @@
<section class="company-mission message left">
<div class="inner-wrapper">
<div class="photo">
<img src="">
<img src="${static.url('images/courses/space5.jpg')}">
</div>
<h2>Mission: Educate 1 billion people around the world</h2>
<p>“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.</p>
......@@ -18,7 +20,7 @@
<section class="our-culture message right">
<div class="photo">
<img src="">
<img src="${static.url('images/courses/space2.jpg')}">
</div>
<h2>What it's like to work here</h2>
<p>“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.</p>
......@@ -28,7 +30,7 @@
<section class="benefits message left">
<div class="photo">
<img src="">
<img src="${static.url('images/courses/space3.jpg')}">
</div>
<h2>Mission: Educate 1 billion people around the world</h2>
<p>“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.</p>
......
......@@ -3,63 +3,48 @@
## instead of using settings.COURSE_TITLE
<%namespace name='static' file='static_content.html'/>
<%! from django.core.urlresolvers import reverse %>
<header class="app" aria-label="Global Navigation">
<section class="wrapper">
<a href="${reverse('root')}" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<nav class="find-courses">
<ol>
<li class="primary">
<div class="divider"></div>
<a href="${reverse('courses')}">Find Courses</a>
<div class="divider"></div>
</li>
%if not user.is_authenticated():
<li class="secondary">
<a href="${reverse('about_edx')}">About</a>
<a href="#">Blog</a>
<a href="${reverse('jobs')}">Jobs</a>
</li>
%endif
</ol>
</nav>
%if user.is_authenticated():
<nav class="user">
<ol>
<li class="primary">
<div class="divider"></div>
<a href="${reverse('dashboard')}" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
${user.username}
</a>
<div class="divider"></div>
<a href="#" class="options">&#9662</a>
<div class="divider"></div>
<ol class="user-options">
<header class="global" aria-label="Global Navigation">
<nav>
<h1 class="logo"><a href="${reverse('root')}"></a></h1>
<ol class="find-courses">
<li class="primary">
<a href="${reverse('courses')}">Find Courses</a>
</li>
</ol>
%if user.is_authenticated():
<ol class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
${user.username}
</a>
</li>
<li class="primary">
<a href="#" class="dropdown">&#9662</a>
<ul class="dropdown-menu">
<li><a href="#">Account Settings</a></li>
<li><a href="${reverse('help')}">Help</a></li>
<li><a href="${reverse('logout')}">Log Out</a></li>
</ol>
</li>
</ol>
</nav>
</ul>
</li>
</ol>
%else:
<nav class="guest">
<ol>
<li class="primary">
<div class="divider"></div>
<a href="#" id="login">Log In</a>
<div class="divider"></div>
<a href="#" id="signup">Sign Up</a>
<div class="divider"></div>
</li>
</ol>
</nav>
%endif
</section>
%else:
<ol class="guest">
<li class="secondary">
<a href="${reverse('about_edx')}">About</a>
<a href="#">Blog</a>
<a href="${reverse('jobs')}">Jobs</a>
<a href="#" id="login">Log In</a>
</li>
<li class="primary">
<a href="#" id="signup">Sign Up</a>
</li>
</ol>
</nav>
%endif
</header>
%if not user.is_authenticated():
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment