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