Skip to content

E
edx-platform
Commit 8faa539a by Galen Frechette
Options

makes some tweeks to global nav style, home page header and font styles

parent f7a1873a
Showing with 83 additions and 64 deletions
lms/static/sass/_base.scss
...@@ -15,7 +15,7 @@ $blue: rgb(29,157,217); ...@@ -15,7 +15,7 @@ $blue: rgb(29,157,217);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
html, body { html, body {
background: rgb(255,255,255); background: rgb(253,253,253);
font-size: 75%; font-size: 75%;
} }
...@@ -47,6 +47,7 @@ p { ...@@ -47,6 +47,7 @@ p {
color: $base-font-color; color: $base-font-color;
font: normal 1.3rem/2rem $serif; font: normal 1.3rem/2rem $serif;
margin: 0px; margin: 0px;
//-webkit-font-smoothing: antialiased;
} }
p + p { p + p {
...@@ -72,6 +73,7 @@ a:link, a:visited { ...@@ -72,6 +73,7 @@ a:link, a:visited {
font: normal 1.2rem/2rem $sans-serif; font: normal 1.2rem/2rem $sans-serif;
text-decoration: none; text-decoration: none;
@include transition(all, 0.1s, linear); @include transition(all, 0.1s, linear);
//-webkit-font-smoothing: antialiased;
&:hover { &:hover {
color: $base-font-color; color: $base-font-color;
......
lms/static/sass/_index.scss
...@@ -3,11 +3,14 @@ ...@@ -3,11 +3,14 @@
> header { > header {
//background: rgb(250,250,250); //background: rgb(250,250,250);
//border-bottom: 1px solid rgb(200,200,200); @include background-image(url('/static/images/shot-5-large.jpg'));
//@include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1)); background-size: cover;
border-bottom: 1px solid rgb(80,80,80);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.9), inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
@include clearfix; @include clearfix;
min-height: 335px; margin-top: -69px;
padding: 60px 0px 50px; min-height: 300px;
padding: 129px 0px 50px;
width: flex-grid(12); width: flex-grid(12);
.inner-wrapper { .inner-wrapper {
...@@ -17,19 +20,27 @@ ...@@ -17,19 +20,27 @@
} }
h1 { h1 {
text-align: left; color: rgb(255,255,255);
text-align: center;
} }
a { a {
@include button(shiny, $blue); @include button(shiny, $blue);
@include box-sizing(border-box); @include box-sizing(border-box);
@include border-radius(3px); @include border-radius(3px);
@include inline-block; display: block;
font: italic 1.2rem/1.6rem $serif; font: italic 1.4rem/1.6rem $serif;
letter-spacing: 1px;
margin: 0 auto;
padding: 15px 0px; padding: 15px 0px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased;
width: flex-grid(3); width: flex-grid(3);
&:hover {
color: rgb(255,255,255);
}
} }
} }
...@@ -173,13 +184,14 @@ ...@@ -173,13 +184,14 @@
> h2 { > h2 {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230))); @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
border: 1px solid rgb(210,210,210); border: 1px solid rgb(200,200,200);
border-top: none; @include border-radius(4px);
@include border-bottom-radius(4px); border-top-color: rgb(190,190,190);
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 1px 8px 0 rgba(0,0,0, 0.1)); @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; color: $lighter-base-font-color;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 0px; margin-bottom: 0px;
margin-top: -15px;
padding: 15px 10px; padding: 15px 10px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
......
lms/static/sass/_shared_forms.scss
...@@ -3,9 +3,10 @@ form { ...@@ -3,9 +3,10 @@ form {
label { label {
color: $base-font-color; color: $base-font-color;
font: normal 1.2rem/1.6rem $serif; font: italic 300 1.2rem/1.6rem $serif;
margin-bottom: 5px; margin-bottom: 5px;
text-shadow: 0 1px rgba(255,255,255, 0.4); text-shadow: 0 1px rgba(255,255,255, 0.4);
-webkit-font-smoothing: antialiased;
} }
input[type="text"], input[type="text"],
...@@ -16,11 +17,12 @@ form { ...@@ -16,11 +17,12 @@ form {
@include border-radius(3px); @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-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); @include box-sizing(border-box);
font: italic 1.2rem/1.6rem $serif; font: italic 300 1.2rem/1.6rem $sans-serif;
height: 35px; height: 35px;
@include inline-block; @include inline-block;
padding: 5px 12px; padding: 5px 12px;
vertical-align: top; vertical-align: top;
-webkit-font-smoothing: antialiased;
&:last-child { &:last-child {
margin-right: 0px; margin-right: 0px;
...@@ -36,10 +38,12 @@ form { ...@@ -36,10 +38,12 @@ form {
input[type="submit"] { input[type="submit"] {
@include button(shiny, $blue); @include button(shiny, $blue);
@include border-radius(3px); @include border-radius(3px);
font: italic 1.2rem/1.6rem $serif; font: 300 1.2rem/1.6rem $sans-serif;
height: 35px; height: 35px;
@include inline-block; @include inline-block;
letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
vertical-align: top; vertical-align: top;
-webkit-font-smoothing: antialiased;
} }
} }
lms/static/sass/_shared_header.scss
header.global { header.global {
//background: rgb(255,255,255); //background: rgb(255,255,255);
background: rgba(245,245,245, 0.9);
border-bottom: 1px solid rgb(190,190,190); border-bottom: 1px solid rgb(190,190,190);
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1)); @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(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, rgb(255,255,255), rgba(228,239,243, 1)));
@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(235,235,235, 0.9))); //@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgba(240,240,240, 0.9)));
//border-color: rgb(177, 210, 222); //border-color: rgb(177, 210, 222);
height: 68px; height: 68px;
position: relative; position: relative;
......
lms/static/sass/_shared_modal.scss
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
} }
.inner-wrapper { .inner-wrapper {
background: rgb(240,240,240); background: rgb(245,245,245);
@include border-radius(0px); @include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9); border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7)); @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
......
lms/static/sass/application.css
...@@ -307,7 +307,7 @@ td { ...@@ -307,7 +307,7 @@ td {
h2, h3 { h2, h3 {
page-break-after: avoid; } } page-break-after: avoid; } }
html, body { html, body {
background: white; background: #fdfdfd;
font-size: 75%; } font-size: 75%; }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
...@@ -1232,9 +1232,10 @@ form { ...@@ -1232,9 +1232,10 @@ form {
font-size: 0em; } font-size: 0em; }
form label { form label {
color: #3c3c3c; color: #3c3c3c;
font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: italic 300 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
margin-bottom: 5px; margin-bottom: 5px;
text-shadow: 0 1px rgba(255, 255, 255, 0.4); } text-shadow: 0 1px rgba(255, 255, 255, 0.4);
-webkit-font-smoothing: antialiased; }
form input[type="text"], form input[type="text"],
form input[type="email"], form input[type="email"],
form input[type="password"] { form input[type="password"] {
...@@ -1251,7 +1252,7 @@ form { ...@@ -1251,7 +1252,7 @@ form {
-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;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: italic 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
height: 35px; height: 35px;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
...@@ -1261,7 +1262,8 @@ form { ...@@ -1261,7 +1262,8 @@ form {
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
padding: 5px 12px; padding: 5px 12px;
vertical-align: top; } vertical-align: top;
-webkit-font-smoothing: antialiased; }
form input[type="text"]:last-child, form input[type="text"]:last-child,
form input[type="email"]:last-child, form input[type="email"]:last-child,
form input[type="password"]:last-child { form input[type="password"]:last-child {
...@@ -1305,7 +1307,7 @@ form { ...@@ -1305,7 +1307,7 @@ form {
-ms-border-radius: 3px; -ms-border-radius: 3px;
-o-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
height: 35px; height: 35px;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
...@@ -1314,8 +1316,10 @@ form { ...@@ -1314,8 +1316,10 @@ form {
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
vertical-align: top; } vertical-align: top;
-webkit-font-smoothing: antialiased; }
form input[type="submit"]:hover { form input[type="submit"]:hover {
cursor: pointer; cursor: pointer;
background-color: #108ec7; background-color: #108ec7;
...@@ -1471,20 +1475,11 @@ footer { ...@@ -1471,20 +1475,11 @@ footer {
opacity: 0.7; } opacity: 0.7; }
header.global { header.global {
background: rgba(245, 245, 245, 0.9);
border-bottom: 1px solid #bebebe; border-bottom: 1px solid #bebebe;
-webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(-90deg, white, #ebebeb);
background-image: -moz-linear-gradient(-90deg, white, #ebebeb);
background-image: -ms-linear-gradient(-90deg, white, #ebebeb);
background-image: -o-linear-gradient(-90deg, white, #ebebeb);
background-image: linear-gradient(-90deg, white, #ebebeb);
background-image: -webkit-linear-gradient(-90deg, white, rgba(235, 235, 235, 0.9));
background-image: -moz-linear-gradient(-90deg, white, rgba(235, 235, 235, 0.9));
background-image: -ms-linear-gradient(-90deg, white, rgba(235, 235, 235, 0.9));
background-image: -o-linear-gradient(-90deg, white, rgba(235, 235, 235, 0.9));
background-image: linear-gradient(-90deg, white, rgba(235, 235, 235, 0.9));
height: 68px; height: 68px;
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -2235,7 +2230,7 @@ header.global { ...@@ -2235,7 +2230,7 @@ header.global {
padding: 0px; padding: 0px;
width: 560px; } width: 560px; }
.modal .inner-wrapper { .modal .inner-wrapper {
background: #f0f0f0; background: #f5f5f5;
-webkit-border-radius: 0px; -webkit-border-radius: 0px;
-moz-border-radius: 0px; -moz-border-radius: 0px;
-ms-border-radius: 0px; -ms-border-radius: 0px;
...@@ -2436,9 +2431,20 @@ header.global { ...@@ -2436,9 +2431,20 @@ header.global {
.home { .home {
margin: 0px 0px 100px; } margin: 0px 0px 100px; }
.home > header { .home > header {
background-image: url("/static/images/shot-5-large.jpg");
background-image: url("/static/images/shot-5-large.jpg");
background-image: url("/static/images/shot-5-large.jpg");
background-image: url("/static/images/shot-5-large.jpg");
background-image: url("/static/images/shot-5-large.jpg");
background-size: cover;
border-bottom: 1px solid #505050;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 -1px 5px 0 rgba(0, 0, 0, 0.1);
zoom: 1; zoom: 1;
min-height: 335px; margin-top: -69px;
padding: 60px 0px 50px; min-height: 300px;
padding: 129px 0px 50px;
width: 100%; } width: 100%; }
.home > header:before, .home > header:after { .home > header:before, .home > header:after {
content: ""; content: "";
...@@ -2450,7 +2456,8 @@ header.global { ...@@ -2450,7 +2456,8 @@ header.global {
margin: 0 auto; margin: 0 auto;
position: relative; } position: relative; }
.home > header h1 { .home > header h1 {
text-align: left; } color: white;
text-align: center; }
.home > header a { .home > header a {
border: 1px solid #002e88; border: 1px solid #002e88;
border-bottom: 1px solid #001e5f; border-bottom: 1px solid #001e5f;
...@@ -2485,17 +2492,14 @@ header.global { ...@@ -2485,17 +2492,14 @@ header.global {
-ms-border-radius: 3px; -ms-border-radius: 3px;
-o-border-radius: 3px; -o-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
display: -moz-inline-box; display: block;
-moz-box-orient: vertical; font: italic 1.4rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
display: inline-block; letter-spacing: 1px;
vertical-align: baseline; margin: 0 auto;
zoom: 1;
*display: inline;
*vertical-align: auto;
font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
padding: 15px 0px; padding: 15px 0px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased;
width: 23.482%; } width: 23.482%; }
.home > header a:hover { .home > header a:hover {
cursor: pointer; cursor: pointer;
...@@ -2510,6 +2514,8 @@ header.global { ...@@ -2510,6 +2514,8 @@ header.global {
-webkit-box-shadow: inset 0 0 20px 0 #00295f, 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; -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; } box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.home > header a:hover {
color: white; }
.home .university-partners { .home .university-partners {
background-image: -webkit-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%); background-image: -webkit-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
background-image: -moz-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%); background-image: -moz-linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, #f5f5f5 50%, rgba(245, 245, 245, 0) 100%);
...@@ -2718,26 +2724,20 @@ header.global { ...@@ -2718,26 +2724,20 @@ header.global {
background-image: -ms-linear-gradient(-90deg, #fafafa, #e6e6e6); background-image: -ms-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: -o-linear-gradient(-90deg, #fafafa, #e6e6e6); background-image: -o-linear-gradient(-90deg, #fafafa, #e6e6e6);
background-image: linear-gradient(-90deg, #fafafa, #e6e6e6); background-image: linear-gradient(-90deg, #fafafa, #e6e6e6);
border: 1px solid #d2d2d2; border: 1px solid #c8c8c8;
border-top: none; -webkit-border-radius: 4px;
-webkit-border-bottom-left-radius: 4px; -moz-border-radius: 4px;
-moz-border-bottom-left-radius: 4px; -ms-border-radius: 4px;
-moz-border-radius-bottomleft: 4px; -o-border-radius: 4px;
-ms-border-bottom-left-radius: 4px; border-radius: 4px;
-o-border-bottom-left-radius: 4px; border-top-color: #bebebe;
border-bottom-left-radius: 4px; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0px 12px 0 rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 4px; -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0px 12px 0 rgba(0, 0, 0, 0.2);
-moz-border-bottom-right-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0px 12px 0 rgba(0, 0, 0, 0.2);
-moz-border-radius-bottomright: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 8px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 8px 0 rgba(0, 0, 0, 0.1);
color: #a0a0a0; color: #a0a0a0;
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 0px; margin-bottom: 0px;
margin-top: -15px;
padding: 15px 10px; padding: 15px 10px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
......
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