Skip to content

E
edx-platform
Commit d9e293f9 by Galen Frechette
Options

imporves typography and typography implimentation

parent 3be186c1
Showing with 213 additions and 332 deletions
lms/static/sass/_about.scss
......@@ -15,7 +15,8 @@
a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color;
font: italic 1.2rem/1.4rem $serif;
font-family: $serif;
font-style: italic;
@include inline-block;
letter-spacing: 1px;
margin: 0px 15px;
......@@ -26,6 +27,7 @@
&:hover, &.active {
border-color: rgb(200,200,200);
color: $base-font-color;
text-decoration: none;
}
}
}
......@@ -97,12 +99,12 @@
display: block;
letter-spacing: 1px;
margin: 0px -20px;
padding: 10px 0px 10px 20px;
padding: 12px 0px 12px 20px;
text-align: left;
text-transform: uppercase;
&:hover {
background: rgb(245,245,245);
text-decoration: none;
}
}
}
......@@ -130,7 +132,7 @@
h3 {
font-family: $sans-serif;
font-weight: bold;
font-weight: 700;
margin-bottom: 15px;
}
}
......@@ -193,16 +195,16 @@
width: flex-grid(10);
header {
margin-bottom: 15px;
margin-bottom: 10px;
h3 {
font-family: $sans-serif;
font-weight: bold;
font-weight: 700;
margin-bottom: 5px;
}
span.post-date {
color: $lighter-base-font-color;
font: 300 italic 1.2rem/1.6rem $sans-serif;
margin-right: 10px;
}
}
......
lms/static/sass/_base.scss
......@@ -13,21 +13,24 @@ $lighter-base-font-color: rgb(160,160,160);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
html, body {
background: rgb(250,250,250);
font-size: 75%;
font-family: $sans-serif;
font-size: 1em;
line-height: 1em;
}
h1, h2, h3, h4, h5, h6 {
color: $base-font-color;
font: normal 1.4rem/2rem $serif;
font: normal 1.2em/1.2em $serif;
margin: 0px;
}
h1 {
color: $base-font-color;
font: 300 2.4rem/3rem $sans-serif;
font: normal 2em/1.4em $sans-serif;
letter-spacing: 1px;
margin-bottom: 30px;
text-align: center;
......@@ -36,7 +39,7 @@ h1 {
h2 {
color: $lighter-base-font-color;
font: normal 1.4rem/2rem $serif;
font: normal 1.2em/1.2em $serif;
letter-spacing: 1px;
margin-bottom: 15px;
text-transform: uppercase;
......@@ -49,10 +52,14 @@ p + h2, ul + h2, ol + h2 {
p {
color: $base-font-color;
font: normal 1.3rem/2rem $serif;
font: normal 1em/1.6em $serif;
margin: 0px;
}
span {
font: normal 1em/1.6em $sans-serif;
}
p + p, ul + p, ol + p {
margin-top: 20px;
}
......@@ -60,7 +67,7 @@ p + p, ul + p, ol + p {
p {
a:link, a:visited {
color: $blue;
font: normal 1.3rem/2rem $serif;
font: normal 1em/1em $serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
......@@ -73,15 +80,16 @@ p {
a:link, a:visited {
color: $blue;
font: normal 1.2rem/2rem $sans-serif;
font: normal 1em/1em $sans-serif;
text-decoration: none;
@include transition(all, 0.1s, linear);
&:hover {
color: $base-font-color;
text-decoration: underline;
}
}
.content-wrapper {
background: rgb(255,255,255);
margin: 0 auto 0;
......@@ -112,7 +120,7 @@ a:link, a:visited {
li {
color: $base-font-color;
font: normal 1.3rem/2rem $serif;
font: normal 1em/1.4em $serif;
margin: 0px;
}
}
......
lms/static/sass/_base_animations.scss
......@@ -2,19 +2,21 @@
//************************************************************************//
.animation-home-header-pop-up {
@include animation(home-header-pop-up 1.25s ease-in-out);
@include animation(home-header-pop-up 1.15s ease-in-out);
@include animation-fill-mode(both);
@include animation-delay(1s);
}
@mixin home-header-pop-up-keyframes {
0% {
//opacity: 0;
opacity: 0;
top: 300px;
//@include transform(scale(0.9));
}
45% {
opacity: 1;
}
65% {
//opacity: 1;
top: -40px;
//@include transform(scale(1));
}
......
lms/static/sass/_dashboard.scss
......@@ -14,7 +14,7 @@
@include border-radius(4px);
@include box-sizing(border-box);
color: $base-font-color;
font: bold 1.4rem/1.6rem $sans-serif;
font: 700 1.2em/1.2em $sans-serif;
margin: 0px;
overflow: hidden;
padding: 15px 10px 17px;
......@@ -44,12 +44,12 @@
p {
color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
font-family: $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.8);
span {
font-weight: 700;
margin-left: 5px;
margin-left: 10px;
text-transform: none;
}
}
......@@ -66,7 +66,7 @@
> header {
border-bottom: 1px solid rgb(210,210,210);
margin-bottom: 40px;
margin-bottom: 30px;
}
.empty-dashboard-message {
......@@ -78,7 +78,6 @@
font-style: italic;
margin-bottom: 20px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
-webkit-font-smoothing: antialiased;
}
a {
......@@ -89,7 +88,7 @@
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
color: $base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
font-family: $sans-serif;
@include inline-block;
letter-spacing: 1px;
margin-left: 5px;
......@@ -98,7 +97,7 @@
&:hover {
color: $blue;
//text-decoration: none;
text-decoration: none;
}
}
}
......@@ -111,7 +110,6 @@
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
@include box-sizing(border-box);
@include clearfix;
font-size: 0em;
margin-right: flex-gutter();
margin-bottom: 25px;
overflow: hidden;
......@@ -190,73 +188,66 @@
> hgroup {
border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
padding: 15px 0px;
padding: 12px 0px;
width: 100%;
h2 {
a.university {
background: rgba(255,255,255, 1);
border: 1px solid rgb(180,180,180);
@include border-radius(3px);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.2), 0 1px 0 0 rgba(255,255,255, 0.6));
color: $lighter-base-font-color;
display: block;
font-style: italic;
font-weight: 800;
@include inline-block;
margin-bottom: 0px;
margin-right: 10px;
padding: 5px 10px;
vertical-align: middle;
a {
color: $base-font-color;
font: 800 1.6rem/2rem $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
&:hover {
color: $blue;
text-decoration: none;
}
}
h3 {
@include inline-block;
margin-right: 10px;
margin-bottom: 0px;
vertical-align: middle;
a {
background: rgba(255,255,255, 1);
border: 1px solid rgb(180,180,180);
@include border-radius(3px);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.2), 0 1px 0 0 rgba(255,255,255, 0.6));
color: $lighter-base-font-color;
display: block;
font: italic 800 1.2rem/1.6rem $sans-serif;
padding: 5px 10px;
color: $base-font-color;
font-weight: 700;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
color: $blue;
text-decoration: underline;
}
}
}
}
.course-status {
background: rgb(250,250,250);
background: $yellow;
border: 1px solid rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
margin-top: 14px;
margin-top: 16px;
padding: 5px;
p {
color: $lighter-base-font-color;
font: italic 300 1.2rem/1.4rem $sans-serif;
font-style: italic;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
span {
color: $base-font-color;
font: italic 800 1.2rem/1.6rem $sans-serif;
}
}
}
.meta {
@include clearfix;
margin-top: 19px;
margin-top: 22px;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%;
......@@ -265,26 +256,23 @@
.course-work-icon {
background: rgb(200,200,200);
float: left;
font: 300 1.2rem/1.6rem $sans-serif;
height: 22px;
width: 22px;
}
.complete {
float: right;
padding-top: 2px;
p {
color: $lighter-base-font-color;
font: italic 1.2rem/1.4rem $serif;
font-style: italic;
@include inline-block;
text-align: right;
text-shadow: 0 1px rgba(255,255,255, 0.6);
-webkit-font-smoothing: antialiased;
.completeness {
color: $base-font-color;
font: 700 1.2rem/1.4rem $sans-serif;
font-weight: 700;
margin-right: 5px;
}
}
......@@ -294,7 +282,7 @@
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 40px;
position: absolute;
right: 110px;
right: 130px;
.meter {
background: rgb(245,245,245);
......@@ -308,7 +296,7 @@
width: 100%;
.meter-fill {
background: rgb(120,120,120);
background: $blue;
@include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
transparent 25%,
transparent 50%,
......
lms/static/sass/_find_courses.scss
......@@ -75,7 +75,9 @@
h1 {
color: $base-font-color;
font: italic 800 2.4rem/3rem $sans-serif;
font-family: $sans-serif;
font-style: italic;
font-weight: 800;
letter-spacing: 0px;
text-transform: none;
}
......
lms/static/sass/_index.scss
......@@ -74,16 +74,6 @@
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
p {
color: $lighter-base-font-color;
display: none;
font-style: italic;
letter-spacing: 2px;
margin-bottom: 30px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: lowercase;
}
.main-cta {
@include clearfix;
float: left;
......@@ -96,12 +86,11 @@
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
font: italic 1.4rem/1.6rem $serif;
font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 12px 0px;
padding: 10px 0px;
text-transform: uppercase;
text-align: center;
-webkit-font-smoothing: antialiased;
width: flex-grid(12);
&:hover {
......@@ -121,7 +110,7 @@
&:hover {
.sharing-message {
opacity: 1;
top: 63px;
top: 56px;
}
}
......@@ -134,35 +123,21 @@
@include box-sizing(border-box);
color: rgb(255,255,255);
float: right;
font: italic 1.2rem/1.6rem $serif;
font-family: $serif;
font-size: 0.9em;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 5px 10px;
padding: 6px 10px;
position: absolute;
text-align: center;
@include transition(all, 0.15s, ease-out);
top: 73px;
top: 65px;
width: 220px;
&::before {
background: transparent;
border: {
top: 6px solid rgba(0,0,0, 1);
right: 6px solid rgba(0,0,0, 1);
bottom: 6px solid transparent;
left: 6px solid transparent;
}
@include box-shadow(1px 0 0 0 rgb(0,0,0), 0 -1px 0 0 rgb(0,0,0));
content: "";
display: block;
height: 0px;
left: 50%;
margin-left: -7px;
position: absolute;
@include transform(rotate(-45deg));
top: -6px;
width: 0px;
&:hover {
opacity: 0;
}
}
......@@ -206,28 +181,29 @@
position: relative;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4)));
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
@include border-radius(4px);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.3);
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
border: 2px solid rgba(255,255,255, 0.8);
height: 80px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
@include transition(all, 0.15s, linear);
width: 80px;
&::after {
color: $base-font-color;
color: rgba(255,255,255, 0.8);
content: "\25B6";
display: block;
font: normal 3.2rem/3.2rem $sans-serif;
font: normal 2em/1em $sans-serif;
left: 50%;
margin-left: -12px;
margin-top: -17px;
margin-left: -11px;
margin-top: -16px;
position: absolute;
text-shadow: 0 1px rgba(255,255,255, 0.8);
text-shadow: 0 -1px rgba(0,0,0, 0.8);
top: 50%;
}
}
......@@ -242,12 +218,12 @@
cursor: pointer;
.play-intro {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5)));
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2));
border: 1px solid rgba(0,0,0, 0.4);
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5));
border-color: rgba(255,255,255, 0.9);
&::after {
color: $pink;
color: rgba(255,255,255, 1);
}
}
}
......@@ -268,24 +244,25 @@
border-top-color: rgb(190,190,190);
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 0px 12px 0 rgba(0,0,0, 0.2));
color: $lighter-base-font-color;
//display: none;
letter-spacing: 1px;
margin-bottom: 0px;
margin-top: -15px;
padding: 15px 10px;
padding: 10px 10px 8px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
.lowercase {
color: $lighter-base-font-color;
font-family: inherit;
font-size: inherit;
font-style: inherit;
text-transform: none;
}
}
}
.university-partners {
//@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(240,240,240)));
@include background-image(linear-gradient(180deg, rgba(245,245,245, 0) 0%,
rgba(245,245,245, 1) 50%,
rgba(245,245,245, 0) 100%));
......@@ -308,7 +285,6 @@
}
.partners {
font-size: 0em;
margin: 0 auto;
padding: 20px 0px;
text-align: center;
......@@ -372,17 +348,17 @@
}
.name {
bottom: -60px;
left: 0px;
position: absolute;
text-align: center;
bottom: -60px;
@include transition(all, 0.25s, ease-in-out);
width: 100%;
z-index: 2;
span {
> span {
color: $base-font-color;
font: 800 italic 2rem/2.2rem $sans-serif;
font: 800 italic 1.4em/1.4em $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(all, 0.15s, ease-in-out);
......@@ -418,7 +394,6 @@
}
.more-info {
//background: rgb(245,245,245);
border: 1px solid rgb(200,200,200);
margin-bottom: 80px;
width: flex-grid(12);
......@@ -427,7 +402,6 @@
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border-bottom: 1px solid rgb(200,200,200);
@include clearfix;
//margin-bottom: 30px;
padding: 10px 20px 8px;
h2 {
......@@ -439,7 +413,8 @@
a {
color: $lighter-base-font-color;
float: right;
font: italic 1.2rem/1.6rem $serif;
font-style: italic;
font-family: $serif;
padding-top: 3px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -450,23 +425,17 @@
}
.news {
//border: 1px solid rgb(200,200,200);
@include box-sizing(border-box);
padding: 20px;
width: flex-grid(12);
.blog-posts {
@include clearfix;
//border-bottom: 1px solid rgb(220,220,220);
//margin-bottom: 30px;
//padding-bottom: 30px;
> article {
//background: rgb(250,250,250);
border: 1px dotted transparent;
border-color: rgb(220,220,220);
@include box-sizing(border-box);
//@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.1));
@include clearfix;
float: left;
margin-right: flex-gutter();
......@@ -487,6 +456,7 @@
.post-graphics {
border: 1px solid rgb(190,190,190);
@include box-sizing(border-box);
display: block;
float: left;
height: 65px;
margin-right: flex-gutter();
......@@ -505,24 +475,18 @@
width: flex-grid(8);
vertical-align: top;
h3 {
font: 700 1.2rem/1.6rem $sans-serif;
margin-bottom: 5px;
a {
color: $base-font-color;
font: 700 1.2rem/1.6rem $sans-serif;
a {
color: $base-font-color;
font: 700 1em/1.2em $sans-serif;
&:hover {
color: $blue;
text-decoration: underline;
}
&:hover {
color: $blue;
text-decoration: underline;
}
}
.post-date {
color: $lighter-base-font-color;
font: italic 300 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
}
}
......
lms/static/sass/_jobs.scss
......@@ -34,7 +34,6 @@
width: flex-grid(12);
> h2 {
//border-bottom: 1px solid rgb(220,220,220);
display: none;
margin-bottom: 60px;
padding-bottom: 20px;
......@@ -50,30 +49,16 @@
nav {
margin-bottom: 40px;
ol {
@include clearfix;
li {
float: left;
margin-right: flex-gutter();
width: flex-grid(12);
&:nth-child(4n) {
margin-right: 0px;
}
a {
display: block;
letter-spacing: 1px;
margin: 0px -20px;
padding: 10px 0 10px 20px;
position: relative;
text-transform: uppercase;
&:hover {
background: rgb(245,245,245);
}
}
a {
display: block;
letter-spacing: 1px;
margin: 0px -20px;
padding: 12px 0px 12px 20px;
text-align: left;
&:hover {
background: rgb(245,245,245);
text-decoration: none;
}
}
}
......@@ -106,7 +91,7 @@
h3 {
font-family: $sans-serif;
font-weight: bold;
font-weight: 700;
margin-bottom: 15px;
}
}
......
lms/static/sass/_shared_course_filter.scss
......@@ -34,11 +34,10 @@
@include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6));
border: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
color: $base-font-color;
cursor: pointer;
font: normal 1.2rem/1.8rem $sans-serif;
height: 36px;
padding: 6px;
padding: 9px;
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
......@@ -51,7 +50,7 @@
@include border-radius(0px 4px 4px 4px);
border: 1px solid rgb(200,200,200);
@include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2));
padding: 10px;
padding: 20px 0px 5px 20px;
position: absolute;
visibility: hidden;
width: 200px;
......@@ -59,9 +58,7 @@
li {
list-style: none;
a {
}
margin-bottom: 15px;
}
}
......@@ -70,7 +67,7 @@
background: rgb(255,255,255);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255)));
@include border-radius(4px 4px 0px 0px);
border-bottom: none;
border-bottom: 1px dotted rgb(200,200,200);
@include box-shadow(0 2px 0 -1px rgb(255,255,255));
color: $base-font-color;
height: 40px;
......@@ -87,13 +84,16 @@
input[type="text"] {
@include border-radius(3px 0px 0px 3px);
float: left;
height: 36px;
width: 200px;
}
input[type="submit"] {
@include border-radius(0px 3px 3px 0px);
float: left;
height: 36px;
padding: 2px 20px;
}
}
}
......
lms/static/sass/_shared_footer.scss
......@@ -28,8 +28,6 @@ footer {
text-align: left;
a {
color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
margin-right: 20px;
}
......@@ -71,16 +69,16 @@ footer {
p {
color: $lighter-base-font-color;
font: italic 1.2rem/1.6rem $serif;
font-style: italic;
@include inline-block;
margin: 0 auto;
padding-top: 4px;
padding-top: 1px;
text-align: center;
vertical-align: middle;
a {
color: $lighter-base-font-color;
font: italic 1.2rem/1.6rem $serif;
font-style: italic;
margin-left: 5px;
}
}
......@@ -88,7 +86,6 @@ footer {
ol {
float: right;
font-size: 0em;
li {
@include inline-block;
......@@ -110,7 +107,6 @@ footer {
a:link, a:visited {
color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 6px 0px;
}
......@@ -120,15 +116,13 @@ footer {
margin: 0 0 0 5px;
padding: 0;
&::after {
display: none;
}
a {
opacity: 0.7;
padding: 0 0 0 10px;
@include transition(all, 0.1s, linear);
&:hover {
opacity: 0.7;
opacity: 1;
}
}
}
......
lms/static/sass/_shared_forms.scss
......@@ -3,7 +3,7 @@ form {
label {
color: $base-font-color;
font: italic 300 1.2rem/1.6rem $serif;
font: italic 300 1rem/1.6rem $serif;
margin-bottom: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.4);
-webkit-font-smoothing: antialiased;
......@@ -17,9 +17,8 @@ form {
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font: italic 300 1.2rem/1.6rem $serif;
font: italic 300 1rem/1.6rem $serif;
height: 35px;
@include inline-block;
padding: 5px 12px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
......@@ -38,9 +37,8 @@ form {
input[type="submit"] {
@include button(shiny, $blue);
@include border-radius(3px);
font: 300 1.2rem/1.6rem $sans-serif;
font: normal 1.2rem/1.6rem $sans-serif;
height: 35px;
@include inline-block;
letter-spacing: 1px;
text-transform: uppercase;
vertical-align: top;
......
lms/static/sass/_shared_header.scss
header.global {
//background: rgb(255,255,255);
//background: rgba(245,245,245, 0.9);
border-bottom: 1px solid rgb(190,190,190);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
//@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(235,235,235, 1)));
//@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(228,239,243, 1)));
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)));
//border-color: rgb(177, 210, 222);
height: 68px;
position: relative;
width: 100%;
......@@ -90,12 +85,10 @@ header.global {
color: $lighter-base-font-color;
color: $blue;
display: block;
//font: italic 1.2rem/1.4rem $serif;
font: normal 1.2rem/1.4rem $sans-serif;
font-family: $sans-serif;
@include inline-block;
margin: 0px 30px 0px 0px;
text-decoration: none;
//text-transform: lowercase;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -121,8 +114,9 @@ header.global {
@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;
font-family: $sans-serif;
@include inline-block;
line-height: 1em;
margin: 1px 5px;
padding: 10px 12px;
text-decoration: none;
......@@ -147,12 +141,6 @@ header.global {
position: relative;
text-transform: none;
@media screen and (max-width: 768px) {
font-size: 0em;
padding: 10px 0px;
width: 38px;
}
.avatar {
background: rgb(220,220,220);
@include border-radius(3px);
......@@ -239,8 +227,9 @@ header.global {
@include border-radius(3px);
color: rgba(255,255,255, 0.9);
display: block;
font: italic 1.2rem/1.4rem $serif;
font-family: $serif;
height: auto;
line-height: 1em;
margin: 5px 0px;
overflow: hidden;
padding: 3px 5px 4px;
......
lms/static/sass/_shared_list_of_courses.scss
......@@ -10,7 +10,6 @@
@include box-sizing(border-box);
@include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9));
float: left;
font-size: 0em;
margin-right: flex-gutter();
margin-bottom: 30px;
position: relative;
......@@ -34,12 +33,8 @@
p {
color: rgb(255,255,255);
font: 300 1.2rem/1.4rem $sans-serif;
padding: 5px 12px;
&.university {
float: left;
}
line-height: 1.2em;
padding: 4px 12px 5px;
}
}
......@@ -74,8 +69,8 @@
h2 {
color: $base-font-color;
font: 800 1.2rem/1.6rem $sans-serif;
padding-top: 10px;
margin-bottom: 0px;
padding-top: 9px;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
......@@ -87,7 +82,7 @@
@include box-sizing(border-box);
color: $base-font-color;
display: block;
font: bold 2rem/2.2rem $sans-serif;
font: bold 1.6em/1.2em $sans-serif;
height: 100%;
opacity: 0.6;
padding-top: 10px;
......@@ -102,7 +97,7 @@
&:hover {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
h2, p, .info-link {
h2, .info-link {
color: $blue;
opacity: 1;
}
......@@ -139,7 +134,7 @@
@include box-sizing(border-box);
height: 100px;
overflow: hidden;
padding: 10px 10px 15px 10px;
padding: 10px 10px 12px 10px;
position: relative;
width: 100%;
......@@ -152,33 +147,26 @@
.bottom {
@include box-sizing(border-box);
@include clearfix;
padding: 6px 10px;
padding: 0px 10px 10px 10px;
width: 100%;
> p, a {
.university {
border-right: 1px solid rgb(200,200,200);
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;
}
}
margin-right: 10px;
padding-right: 10px;
&.dates {
float: left;
margin-top: 0px;
&:hover {
color: $blue;
}
}
.start-date {
color: $lighter-base-font-color;
letter-spacing: 1px;
}
}
}
......
lms/static/sass/_shared_modal.scss
......@@ -18,7 +18,6 @@
color: #fff;
display: none;
left: 50%;
//margin-left: -(grid-width(6)) / 2;
padding: 8px;
position: absolute;
width: grid-width(6);
......@@ -99,17 +98,10 @@
}
}
h3 {
color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif;
letter-spacing: 1px;
padding-bottom: 20px;
h2 {
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
z-index: 2;
}
}
......@@ -154,8 +146,8 @@
}
a {
font: italic normal 1.2rem/1.6rem $serif;
text-decoration: underline;
font-family: $serif;
font-style: italic;
}
}
......@@ -166,7 +158,7 @@
p {
color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
font-family: $sans-serif;
}
hr {
......@@ -222,18 +214,19 @@
p {
color: $lighter-base-font-color;
font: italic 1.2rem/1.6rem $serif;
font-style: italic;
text-align: center;
-webkit-font-smoothing: antialiased;
span {
color: $lighter-base-font-color;
font: italic 1.2rem/1.6rem $serif;
font-family: $serif;
font-style: italic;
}
a {
color: $lighter-base-font-color;
font: italic 1.2rem/1.6rem $serif;
font-family: $serif;
font-style: italic;
text-decoration: underline;
&:hover {
......
lms/static/sass/application.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/templates/course.html
......@@ -23,7 +23,7 @@
</div>
<div class="bottom">
<a href="#" class="university">${course.get_about_section('university')}</a>
<p class="dates"><span class="start">7/23/12</span></p>
<span class="start-date">7/23/12</span>
</div>
</section>
</div>
......
lms/templates/courses.html
......@@ -16,7 +16,7 @@
<section class="container">
## I'm removing this for now since we aren't using it for the fall.
## <%include file="course_filter.html" />
<%include file="course_filter.html" />
<section class="courses">
%for course in courses:
<%include file="course.html" args="course=course" />
......
lms/templates/dashboard.html
......@@ -39,11 +39,11 @@
</a>
<section class="info">
<hgroup>
<h3><a href="#">${course.get_about_section('university')}</a></h3>
<h2><a href="${reverse('info', args=[course.id])}">${course.get_about_section("title")}</a></h2>
<a href="#" class="university">${course.get_about_section('university')}</a>
<h3><a href="${reverse('info', args=[course.id])}">${course.get_about_section("title")}</a></h3>
</hgroup>
<section class="course-status">
<p>Class starts - <span>9/2/2012</span></div>
<p>Class Starts - <span>9/2/2012</span></div>
</section>
<section class="meta">
<div src="" class="course-work-icon"></div>
......
lms/templates/index.html
......@@ -8,7 +8,6 @@
<div class="inner-wrapper">
<div class="title">
<h1>The Future of Online Education</h1>
<p>Free. Online. World Class.</p>
<div class="main-cta">
<a href="${reverse('courses')}" class="find-courses">Find Courses</a>
</div>
......@@ -87,31 +86,31 @@
<section class="news">
<section class="blog-posts">
<article>
<div class="post-graphics">
<a href="#" class="post-graphics">
<img src="${static.url('images/courses/space1.jpg')}" />
</div>
</a>
<div class="post-name">
<h3><a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a></h3>
<a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
<p class="post-date">7/12/2012</p>
</div>
</article>
<article>
<div class="post-graphics">
<a href="#" class="post-graphics">
<img src="${static.url('images/courses/space1.jpg')}" />
</div>
</a>
<div class="post-name">
<h3><a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a></h3>
<a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
<p class="post-date">7/12/2012</p>
</div>
</article>
<article>
<div class="post-graphics">
<a href="#" class="post-graphics">
<img src="${static.url('images/courses/space1.jpg')}" />
</div>
</a>
<div class="post-name">
<h3><a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a></h3>
<a href="">Online Classes Cut Costs, But Do They Dilute Brands?</a>
<p class="post-date">7/12/2012</p>
</div>
</article>
......
lms/templates/jobs.html
......@@ -62,17 +62,9 @@
<section class="jobs-sidebar">
<h2>Positions</h2>
<nav>
<ol>
<li>
<a href="#edx-fellow">edX Fellow</a>
</li>
<li>
<a href="#content-engineer">Content Engineer</a>
</li>
<li>
<a href="#technology-team">Technology Team</a>
</li>
</ol>
<a href="#edx-fellow">edX Fellow</a>
<a href="#content-engineer">Content Engineer</a>
<a href="#technology-team">Technology Team</a>
</nav>
<h2>How to Apply</h2>
<p>E-mail your resume, coverletter and any other materials to <a href="#">careers@edxonline.org</a></p>
......
lms/templates/login_modal.html
......@@ -4,7 +4,7 @@
<section id="login-modal" class="modal login-modal">
<div class="inner-wrapper">
<header>
<h3>Log In</h3>
<h2>Log In</h2>
<hr>
</header>
......@@ -18,7 +18,7 @@
Remember me
</label>
<div class="submit">
<input name="submit" type="submit" value="Submit">
<input name="submit" type="submit" value="Access My Courses">
</div>
</form>
......
lms/templates/portal/course_about.html
......@@ -13,21 +13,24 @@
<hgroup>
<h1>${course.get_about_section("title")}</h1><h2><a href="#">${course.get_about_section("university")}</a></h2>
</hgroup>
<div class="course-dates">
<p><span class="university"><a href="#">${course.get_about_section("university")}</a></span></p>
<p><span class="course-number">${course.get_about_section("number")}</span></p>
<p><span class="course-length">15 weeks</span></p>
<p>Start: <span class="start-date">7/12/12</span></p>
<p>Final Exam: <span class="start-date">12/09/12</span></p>
<div class="main-cta">
<a href="${reverse('enroll', args=[course.id])}" class="register">Register</a>
</div>
<section class="actions">
<div class="register-wrapper">
<a href="${reverse('enroll', args=[course.id])}" class="register">Register</a>
</div>
<section class="social-sharing">
<p><span class="num-people-registered">1,435</span> students already registed!</p>
</section>
</section>
<div class="social-sharing">
<div class="sharing-message">Share with friends and family!</div>
<a href="#" class="share">
<img src="${static.url('images/twitter-sharing.png')}">
</a>
<a href="#" class="share">
<img src="${static.url('images/facebook-sharing.png')}">
</a>
<a href="#" class="share">
<img src="${static.url('images/email-sharing.png')}">
</a>
</div>
</section>
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
......@@ -102,50 +105,24 @@
<p>${course.get_about_section("faq")}</p>
</section>
</section>
</div>
</div>
</section>
<section class="course-sidebar">
<section class="course-summary">
<header>
<a href="#" class="university-name">${course.get_about_section("university")}</a><span>${course.get_about_section("title")}</span>
</header>
<ol class="important-dates">
<li><img src=""><p>Classes Start</p><span class="start-date">7/12/12</span></li>
<li><img src=""><p>Final Exam</p><span class="start-date">12/09/12</span></li>
<li><img src=""><p>Final Exam</p><span class="final-date">12/09/12</span></li>
<li><img src=""><p>Course Length</p><span class="course-length">15 weeks</span></li>
<li><img src=""><p>Course Number</p><span class="course-number">${course.get_about_section("number")}</span></li>
</ol>
<section class="course-staff">
<h2>Course staff</h3>
<article class="teacher">
<div class="teacher-image">
<img src="${static.url('images/anant.jpg')}" />
</div>
<h3>Anant Agarwal</h3>
<p>Director of MIT’s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT’s Smullin and Jamieson prizes for teaching and co-authored the course textbook “Foundations of Analog and Digital Electronic Circuits.”</p>
</article>
<article class="teacher">
<div class="teacher-image">
<img src="${static.url('images/gerald.jpg')}" />
</div>
<h3>Gerald Sussman</h3>
<p>Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.</p>
</article>
<article class="teacher">
<div class="teacher-image">
<img src="${static.url('images/piotr.jpg')}" />
</div>
<h3>Piotr Mitros</h3>
<p>Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.</p>
</article>
</section>
</section>
</section>
</section>
</section>
......
lms/templates/signup_modal.html
......@@ -3,7 +3,7 @@
<section id="signup-modal" class="modal signup-modal">
<div class="inner-wrapper">
<header>
<h3>Sign Up for edX</h3>
<h2>Sign Up for edX</h2>
<hr>
</header>
......
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