Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds about and jobs pages, cleans up header and login modal

Browse Source
This commit is contained in:
Galen Frechette
2012-06-21 14:46:45 -04:00
parent 9d0c52dfc4
commit 9bcdcec6ae
11 changed files with 411 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
lms/static/sass/_base_extends.scss
View File

@@ -1,11 +1,57 @@
.faded-hr-divider {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.8) 15%, rgb(200,200,200) 50%, rgba(200,200,200, 0.8) 85%, rgba(255,255,255, 0)));
@include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 1px;
width: 100%;
}
.faded-hr-divider-light {
@include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.8) 50%,
rgba(255,255,255, 0)));
height: 1px;
width: 100%;
}
.faded-vertical-divider {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.6) 25%, rgb(200,200,200) 50%, rgba(200,200,200, 0.6) 75%, rgba(255,255,255, 0)));
@include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
rgba(200,200,200, 1) 50%,
rgba(200,200,200, 0)));
height: 100%;
width: 1px;
}
.faded-vertical-divider-light {
@include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
rgba(255,255,255, 0.6) 50%,
rgba(255,255,255, 0)));
height: 100%;
width: 1px;
}
.vertical-divider {
@extend .faded-vertical-divider;
position: relative;
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
position: absolute;
left: 1px;
}
}
.horizontal-divider {
@extend .faded-hr-divider;
position: relative;
&::after {
@extend .faded-hr-divider-light;
content: "";
display: block;
position: absolute;
top: 1px;
}
}

2
lms/static/sass/_base_mixins.scss
View File

@@ -5,5 +5,5 @@
min-height: $height;
min-width: $width;
position: fixed;
top: 35%;
top: 45%;
}

17
lms/static/sass/_index.scss
View File

@@ -87,7 +87,7 @@
}
a {
@include button(shiny, $pink);
@include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@include inline-block;
@@ -95,20 +95,7 @@
padding: 15px 0px;
text-transform: uppercase;
text-align: center;
width: flex-grid(6);
&:first-child {
margin-right: flex-gutter();
}
&.find-courses {
@include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@include inline-block;
font: normal italic 1.2rem/1.6rem $serif;
padding: 15px 0px;
}
width: flex-grid(12);
}
form {

102
lms/static/sass/_shared_header.scss
View File

@@ -18,75 +18,87 @@ header.app {
display: block;
float: left;
height: 100%;
margin: 16px 30px 0px 0px;
position: relative;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 50px;
position: absolute;
right: -15px;
top: -12px;
}
margin: 16px 15px 0px 0px;
}
a.discover-courses {
@include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
color: $base-font-color;
display: block;
float: left;
font: normal 1rem/1.2rem $sans-serif;
height: 15px;
margin-top: 12px;
padding: 8px 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
&:hover {
}
.divider {
@extend .vertical-divider;
@include inline-block;
height: 40px;
vertical-align: middle;
}
nav.guest {
float: right;
nav {
height: 40px;
margin-top: 8px;
&.find-courses {
float: left;
}
&.guest {
float: right;
}
ol {
font-size: 0em;
li {
@include inline-block;
margin-top: 12px;
padding: 0px 5px;
position: relative;
vertical-align: bottom;
vertical-align: top;
}
&:last-child {
padding-right: 0px;
}
li.secondary {
margin: 0px 15px;
a {
@include border-radius(3px);
border: 1px solid transparent;
color: $base-font-color;
@include box-sizing(border-box);
color: $lighter-base-font-color;
display: block;
font: normal italic 1.2rem/1.2rem $serif;
height: 15px;
padding: 8px;
font: normal 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 {
color: $base-font-color;
}
}
}
li.primary {
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: 30px;
@include inline-block;
margin: 5px;
padding: 6px 8px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
vertical-align: middle;
&:hover {
background: rgb(220,220,220);
@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));
color: $base-font-color;
}
}
}

119
lms/static/sass/_shared_login_modal.scss
View File

@@ -1,5 +1,5 @@
.modal-wrapper {
@include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7)));
@include background-image(radial-gradient(50% 45%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
bottom: 0;
content: "";
display: none;
@@ -16,48 +16,58 @@
.login-modal {
background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(4px);
@include box-shadow(0 10px 60px 10px rgba(0,0,0, 0.5));
@include border-radius(0px);
@include box-shadow(0 15px 70px 5px rgba(0,0,0, 0.5));
color: #fff;
padding: 10px;
width: grid-width(7);
@include vertically-and-horizontally-centered(400px, grid-width(7));
padding: 8px;
width: grid-width(6);
@include vertically-and-horizontally-centered(410px, grid-width(6));
z-index: 10;
.inner-wrapper {
@include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
@include border-radius(4px);
background: rgb(240,240,240);
@include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
height: 380px;
height: 410px;
overflow: hidden;
padding: 30px;
position: relative;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
bottom: -140px;
width: 100%;
}
header {
margin-bottom: 30px;
padding-top: 5px;
overflow: hidden;
padding: 28px 20px 0px;
position: relative;
z-index: 2;
&::after {
@extend .faded-hr-divider;
bottom: 0px;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: 1;
}
hr {
@extend .faded-hr-divider-light;
border: none;
margin: 0px;
position: relative;
z-index: 2;
&::after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
position: absolute;
top: -1px;
}
}
h3 {
@@ -68,12 +78,15 @@
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase;
vertical-align: middle;
position: relative;
z-index: 2;
}
}
form {
@include clearfix;
margin-bottom: 12px;
padding: 0px 20px;
position: relative;
z-index: 2;
@@ -81,37 +94,30 @@
display: none;
}
label.remember-me {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 60px;
padding: 8px 10px;
position: relative;
&::before {
@extend .faded-hr-divider;
bottom: -30px;
content: "";
display: block;
position: absolute;
}
}
input[type="checkbox"] {
margin-right: 5px;
}
input[type="email"],
input[type="password"] {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
label.remember-me {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 38px;
padding: 8px 10px;
position: relative;
}
input[type="submit"] {
display: block;
height: 45px;
@@ -121,9 +127,8 @@
}
.login-extra {
padding: 15px 0px;
position: relative;
z-index: 2;
p {
color: $lighter-base-font-color;
@@ -134,6 +139,10 @@
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-decoration: underline;
&:hover {
color: $base-font-color;
}
}
span + a {
@@ -143,17 +152,14 @@
}
.close-modal {
//background: rgb(240,240,240);
//border: 1px solid rgba(180,180,180, 0.7);
@include border-radius(2px);
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.1));
cursor: pointer;
@include inline-block;
padding: 5px 10px;
padding: 10px;
position: absolute;
right: 5px;
top: 5px;
@include transition(all, 0.15s, ease-out);
right: 2px;
top: 0px;
z-index: 3;
.inner {
p {
@@ -166,9 +172,6 @@
}
&:hover {
//background: rgb(235,235,235);
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.125));
p {
color: $base-font-color;
}

444
lms/static/sass/application.css
View File

@@ -340,24 +340,58 @@ a:link, a:visited {
.container:after {
clear: both; }
.faded-hr-divider, .modal-wrapper .login-modal .inner-wrapper header::after, .modal-wrapper .login-modal .inner-wrapper form label.remember-me::before, .home .university-partners:before, .home .university-partners:after {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
.faded-hr-divider, .horizontal-divider, .modal-wrapper .login-modal .inner-wrapper header hr::after, .home .university-partners:before, .home .university-partners:after {
background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
height: 1px;
width: 100%; }
.faded-vertical-divider, header.app a.logo::after {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
.faded-hr-divider-light, .horizontal-divider::after, .modal-wrapper .login-modal .inner-wrapper header hr {
background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
height: 1px;
width: 100%; }
.faded-vertical-divider, .vertical-divider, header.app .divider {
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));
background-image: -o-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
height: 100%;
width: 1px; }
.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::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));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
height: 100%;
width: 1px; }
.vertical-divider, header.app .divider {
position: relative; }
.vertical-divider::after, header.app .divider::after {
content: "";
display: block;
position: absolute;
left: 1px; }
.horizontal-divider {
position: relative; }
.horizontal-divider::after {
content: "";
display: block;
position: absolute;
top: 1px; }
.animation-title-appear {
-webkit-animation: title-appear 4.65s ease-out;
-moz-animation: title-appear 4.65s ease-out;
@@ -996,79 +1030,93 @@ header.app {
display: block;
float: left;
height: 100%;
margin: 16px 30px 0px 0px;
position: relative; }
header.app a.logo::after {
content: "";
display: block;
height: 50px;
position: absolute;
right: -15px;
top: -12px; }
header.app a.discover-courses {
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 #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-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: block;
float: left;
font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
height: 15px;
margin-top: 12px;
padding: 8px 10px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
header.app nav.guest {
float: right; }
header.app nav.guest ol {
margin: 16px 15px 0px 0px; }
header.app .divider {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
height: 40px;
vertical-align: middle; }
header.app nav {
height: 40px;
margin-top: 8px; }
header.app nav.find-courses {
float: left; }
header.app nav.guest, header.app nav.user {
float: right; }
header.app nav ol {
font-size: 0em; }
header.app nav.guest ol li {
header.app nav ol li {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-top: 12px;
padding: 0px 5px;
position: relative;
vertical-align: bottom; }
header.app nav.guest ol li:last-child {
padding-right: 0px; }
header.app nav.guest ol li a {
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;
border-radius: 3px;
border: 1px solid transparent;
color: #3c3c3c;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #a0a0a0;
display: block;
font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 15px;
padding: 8px;
font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
height: 30px;
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); }
header.app nav.guest ol li a:hover {
background: #dcdcdc;
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);
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 a {
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-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: 30px;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 5px;
padding: 6px 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 {
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 ol {
@@ -1630,11 +1678,11 @@ header.app {
height: 36px; }
.modal-wrapper {
background-image: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: -ms-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
background-image: -webkit-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -moz-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -ms-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: -o-radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: radial-gradient(50% 45%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
bottom: 0;
content: "";
display: none;
@@ -1648,64 +1696,67 @@ header.app {
.modal-wrapper .login-modal {
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 15px 70px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 15px 70px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 15px 70px 5px rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
width: 570px;
padding: 8px;
width: 485px;
left: 50%;
margin-left: -285px;
margin-top: -200px;
min-height: 400px;
min-width: 570px;
margin-left: -242.5px;
margin-top: -205px;
min-height: 410px;
min-width: 485px;
position: fixed;
top: 35%;
top: 45%;
z-index: 10; }
.modal-wrapper .login-modal .inner-wrapper {
background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: -o-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
background-image: linear-gradient(-90deg, #f5f5f5, #e1e1e1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #f0f0f0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
height: 380px;
height: 410px;
overflow: hidden;
padding: 30px;
position: relative; }
.modal-wrapper .login-modal .inner-wrapper::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
content: "";
display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
bottom: -140px;
width: 100%; }
.modal-wrapper .login-modal .inner-wrapper header {
margin-bottom: 30px;
padding-top: 5px;
overflow: hidden;
padding: 28px 20px 0px;
position: relative;
z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper header::after {
bottom: 0px;
.modal-wrapper .login-modal .inner-wrapper header::before {
background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
content: "";
display: block;
position: absolute; }
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: 1; }
.modal-wrapper .login-modal .inner-wrapper header hr {
border: none;
margin: 0px;
position: relative;
z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper header hr::after {
bottom: 0px;
content: "";
display: block;
position: absolute;
top: -1px; }
.modal-wrapper .login-modal .inner-wrapper header h3 {
color: #a0a0a0;
font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
@@ -1713,18 +1764,25 @@ header.app {
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
text-transform: uppercase;
vertical-align: middle; }
vertical-align: middle;
position: relative;
z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper form {
zoom: 1;
margin-bottom: 12px;
padding: 0px 20px;
position: relative;
z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper form:before, .modal-wrapper .login-modal .inner-wrapper form:after {
content: "";
display: table; }
.modal-wrapper .login-modal .inner-wrapper form:after {
clear: both; }
.modal-wrapper .login-modal .inner-wrapper form label {
display: none; }
.modal-wrapper .login-modal .inner-wrapper form input[type="checkbox"] {
margin-right: 5px; }
.modal-wrapper .login-modal .inner-wrapper form input[type="email"],
.modal-wrapper .login-modal .inner-wrapper form input[type="password"] {
background: white;
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%; }
.modal-wrapper .login-modal .inner-wrapper form label.remember-me {
background: #e6e6e6;
border: 1px solid #c8c8c8;
@@ -1735,30 +1793,17 @@ header.app {
-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);
display: block;
margin-bottom: 60px;
margin-bottom: 38px;
padding: 8px 10px;
position: relative; }
.modal-wrapper .login-modal .inner-wrapper form label.remember-me::before {
bottom: -30px;
content: "";
display: block;
position: absolute; }
.modal-wrapper .login-modal .inner-wrapper form input[type="checkbox"] {
margin-right: 5px; }
.modal-wrapper .login-modal .inner-wrapper form input[type="email"],
.modal-wrapper .login-modal .inner-wrapper form input[type="password"] {
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%; }
.modal-wrapper .login-modal .inner-wrapper form input[type="submit"] {
display: block;
height: 45px;
margin: 0 auto;
width: 70%; }
.modal-wrapper .login-modal .inner-wrapper .login-extra {
padding: 15px 0px;
position: relative; }
position: relative;
z-index: 2; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p {
color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
@@ -1767,6 +1812,8 @@ header.app {
color: #a0a0a0;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
text-decoration: underline; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p a:hover {
color: #3c3c3c; }
.modal-wrapper .login-modal .inner-wrapper .login-extra p span + a {
margin-left: 15px; }
.modal-wrapper .login-modal .inner-wrapper .close-modal {
@@ -1779,15 +1826,11 @@ header.app {
zoom: 1;
*display: inline;
*vertical-align: auto;
padding: 5px 10px;
padding: 10px;
position: absolute;
right: 5px;
top: 5px;
-webkit-transition: all, 0.15s, ease-out;
-moz-transition: all, 0.15s, ease-out;
-ms-transition: all, 0.15s, ease-out;
-o-transition: all, 0.15s, ease-out;
transition: all, 0.15s, ease-out; }
right: 2px;
top: 0px;
z-index: 3; }
.modal-wrapper .login-modal .inner-wrapper .close-modal .inner p {
color: #a0a0a0;
font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
@@ -1900,29 +1943,29 @@ header.app {
-moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); }
.home > header .welcome .signup-wrapper .sign-up a {
border: 1px solid #410017;
border-bottom: 1px solid #380000;
border: 1px solid #002e88;
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #db4274;
-moz-box-shadow: inset 0 1px 0 0 #db4274;
box-shadow: inset 0 1px 0 0 #db4274;
-webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
background-color: #b62568;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a));
background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #2a0000;
text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@@ -1938,78 +1981,23 @@ header.app {
padding: 15px 0px;
text-transform: uppercase;
text-align: center;
width: 48.744%; }
width: 100%; }
.home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) {
cursor: pointer;
background-color: #a91656;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029));
background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); }
background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.home > header .welcome .signup-wrapper .sign-up a:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; }
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .welcome .signup-wrapper .sign-up a:disabled {
opacity: 0.5;
cursor: not-allowed; }
.home > header .welcome .signup-wrapper .sign-up a:first-child {
margin-right: 2.513%; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses {
border: 1px solid #002e88;
border-bottom: 1px solid #001e5f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-moz-box-shadow: inset 0 1px 0 0 #42bae5;
box-shadow: inset 0 1px 0 0 #42bae5;
color: white;
display: inline-block;
font-size: 14px;
font-weight: bold;
background-color: #1d9dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
padding: 8px 20px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px #001067;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 15px 0px; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:hover:not(:disabled) {
cursor: pointer;
background-color: #108ec7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:active:not(:disabled) {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header .welcome .signup-wrapper .sign-up a.find-courses:disabled {
opacity: 0.5;
cursor: not-allowed; }
.home > header .welcome .signup-wrapper .sign-up form input[type="text"],
.home > header .welcome .signup-wrapper .sign-up form input[type="email"],
.home > header .welcome .signup-wrapper .sign-up form input[type="password"] {
@@ -2555,7 +2543,7 @@ nav.course-material {
padding-bottom: 20px;
position: relative;
width: 31.658%; }
.course-info .sidebar .faded-vertical-divider, .course-info .sidebar header.app a.logo::after, header.app .course-info .sidebar a.logo::after {
.course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));

3
lms/templates/about.html Normal file
View File

@@ -0,0 +1,3 @@
<%inherit file="main.html" />
<h1>About Us</h1>

1
lms/templates/index.html
View File

@@ -22,7 +22,6 @@
<div class="signup-wrapper">
<section class="sign-up">
<a href="#" class="find-courses">Find Courses</a>
<a href="#" class="create-account">Sign Up</a>
</section>
</div>
</section>

3
lms/templates/jobs.html Normal file
View File

@@ -0,0 +1,3 @@
<%inherit file="main.html" />
<h1>Jobs</h1>

1
lms/templates/login_modal.html
View File

@@ -5,6 +5,7 @@
<div class="inner-wrapper">
<header>
<h3>Log In</h3>
<hr>
</header>
<form id="login_form" method="post">

33
lms/templates/navigation.html
View File

@@ -7,7 +7,20 @@
<a href="${ MITX_ROOT_URL }" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<a href="/courses" class="discover-courses">Find Courses</a>
<nav class="find-courses">
<ol>
<li class="primary">
<div class="divider"></div>
<a href="/courses">Find Courses</a>
<div class="divider"></div>
</li>
<li class="secondary">
<a href="/about">About</a>
<a href="#">Blog</a>
<a href="/jobs">Jobs</a>
</li>
</ol>
</nav>
%if user.is_authenticated():
<nav class="user">
@@ -31,20 +44,12 @@
%else:
<nav class="guest">
<ol>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<li class="primary">
<div class="divider"></div>
<a href="#" class="login">Log In</a>
</li>
<li>
<a href="#">Sign Up</a>
<div class="divider"></div>
<a href="#" class="signup">Sign Up</a>
<div class="divider"></div>
</li>
</ol>
</nav>