Skip to content

E
edx-platform
Commit f7a1873a by Galen Frechette
Options

adds banner images to and refines header on find courses pages, various visual… 

adds banner images to and refines header on find courses pages, various visual tweeks and imporvements
parent 5484cfd0
Showing with 140 additions and 159 deletions
lms/static/sass/_about.scss
.about {
margin: 40px auto 120px;
margin: 20px auto 120px;
> nav {
margin-bottom: 80px;
......@@ -14,12 +14,14 @@
a {
border-bottom: 3px solid transparent;
color: $lighter-base-font-color;
font: italic 1.2rem/1.4rem $serif;
@include inline-block;
letter-spacing: 1px;
margin: 0px 5px;
margin: 0px 15px;
padding: 20px 10px;
@include transition(all, 0.15s, linear);
text-transform: uppercase;
text-transform: lowercase;
&:hover, &.active {
border-color: rgb(200,200,200);
......@@ -29,7 +31,7 @@
}
.vision {
display: none;
//display: none;
h1 + hr {
margin-bottom: 80px;
......@@ -99,7 +101,6 @@
width: flex-grid(3);
a {
color: $lighter-base-font-color;
display: block;
letter-spacing: 1px;
margin-right: -20px;
......@@ -108,7 +109,6 @@
text-transform: uppercase;
&:hover {
color: $blue;
background: rgb(245,245,245);
}
}
......
lms/static/sass/_base.scss
......@@ -38,6 +38,7 @@ h1 {
h2 {
color: $lighter-base-font-color;
font: normal 1.4rem/2rem $serif;
letter-spacing: 1px;
margin-bottom: 15px;
text-transform: uppercase;
}
......
lms/static/sass/_find_courses.scss
.find-courses {
.container {
margin-bottom: 60px;
}
.find-courses, .university-profile {
background: rgb(252,252,252);
padding-bottom: 60px;
header.search-intro {
header.search {
background: rgb(240,240,240);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
@include background-image(url('/static/images/shot-2-large.jpg'));
background-size: cover;
border-bottom: 1px solid rgb(100,100,100);
@include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));
margin-top: -69px;
width: 100%;
.inner-wrapper {
......@@ -14,15 +16,16 @@
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
padding: 40px 0px 30px;
padding: 154px 0px 80px;
position: relative;
text-align: center;
width: flex-grid(12);
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
bottom: -300px;
content: "";
display: block;
display: none;
height: 600px;
margin: 0 auto;
position: absolute;
......@@ -30,22 +33,59 @@
z-index: 1;
}
img {
display: block;
margin: 0 auto;
> hgroup {
background: rgba(255,255,255, 0.9);
border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
padding: 20px 30px;
position: relative;
width: 100px;
z-index: 2;
}
h1 {
color: $lighter-base-font-color;
font: normal 1.2rem/1.8rem $serif;
letter-spacing: 1px;
position: relative;
text-transform: uppercase;
&.main-search, &.university-search {
text-align: center;
z-index: 2;
hgroup {
@include inline-block;
}
.logo {
@include inline-block;
height: 80px;
margin-right: 30px;
padding-right: 30px;
position: relative;
vertical-align: middle;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 80px;
position: absolute;
right: 0px;
top: 0px;
}
img {
height: 100%;
}
}
h1 {
color: $base-font-color;
font: italic bold 2.4rem/3rem $sans-serif;
text-transform: none;
}
h1, h2 {
@include inline-block;
letter-spacing: 1px;
margin-bottom: 0px;
text-shadow: 0 1px rgba(255,255,255, 0.8);
vertical-align: middle;
}
}
}
}
......
lms/static/sass/_index.scss
......@@ -2,9 +2,9 @@
margin: 0px 0px 100px;
> header {
background: rgb(250,250,250);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
//background: rgb(250,250,250);
//border-bottom: 1px solid rgb(200,200,200);
//@include box-shadow(inset 0 -1px 5px 0 rgba(0,0,0, 0.1));
@include clearfix;
min-height: 335px;
padding: 60px 0px 50px;
......@@ -16,89 +16,20 @@
position: relative;
}
.video-wrapper {
right: 0px;
position: absolute;
top: 0px;
.video-player {
background: rgb(45,45,45);
border: 1px solid rgb(0,0,0);
@include border-radius(4px);
height: 315px;
padding: 5px;
width: 560px;
&:hover {
@include box-shadow(0 0 12px 0 rgba(0,0,0, 0.3));
}
.video-inner {
background: transparent;
height: 315px;
margin: 0 auto;
width: 560px;
}
}
h1 {
text-align: left;
}
.welcome {
a {
@include button(shiny, $blue);
@include box-sizing(border-box);
float: left;
font-size: 0em;
width: flex-grid(12);
padding-right: 600px;
padding-top: 20px;
h1 {
text-align: left;
}
.intro {
@include box-sizing(border-box);
margin-bottom: 40px;
width: flex-grid(12);
p {
color: $base-font-color;
margin: 0px;
width: flex-grid(12);
}
}
.signup-wrapper {
@include box-sizing(border-box);
width: flex-grid(11);
.sign-up {
background: rgb(240,240,240);
@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(220,220,220);
@include border-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font-size: 0em;
padding: 12px;
@include transition(all, 0.15s, linear);
width: flex-grid(12);
&:hover {
@include box-shadow(0 0 16px 0 rgba($blue, 0.35));
}
a {
@include button(shiny, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@include inline-block;
font: italic 1.2rem/1.6rem $serif;
padding: 15px 0px;
text-transform: uppercase;
text-align: center;
width: flex-grid(12);
}
}
}
@include border-radius(3px);
@include inline-block;
font: italic 1.2rem/1.6rem $serif;
padding: 15px 0px;
text-transform: uppercase;
text-align: center;
width: flex-grid(3);
}
}
......@@ -242,11 +173,10 @@
> h2 {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4));
border: 1px solid rgb(210,210,210);
border-top: none;
@include border-bottom-radius(4px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), 0 1px 8px 0 rgba(0,0,0, 0.1));
color: $lighter-base-font-color;
letter-spacing: 1px;
margin-bottom: 0px;
......
lms/static/sass/_shared_course_filter.scss
......@@ -3,9 +3,10 @@
nav {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4), inset 0 0 0 -1px rgba(255,255,255, 0.4));
@include box-sizing(border-box);
border: 1px solid rgb(200,200,200);
border: 1px solid rgb(190,190,190);
border-bottom-color: rgb(200,200,200);
border-top: none;
@include border-bottom-radius(4px);
@include clearfix;
......
lms/static/sass/_shared_header.scss
header.global {
background: rgb(255,255,255);
border-bottom: 1px solid rgb(200,200,200);
//background: rgb(255,255,255);
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(245,245,245, 1)));
height: 75px;
@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(235,235,235, 0.9)));
//border-color: rgb(177, 210, 222);
height: 68px;
position: relative;
width: 100%;
z-index: 10;
......@@ -14,13 +17,13 @@ header.global {
height: 40px;
margin: 0 auto;
max-width: 1200px;
padding-top: 20px;
padding-top: 14px;
width: flex-grid(12);
}
h1.logo {
float: left;
margin: 7px 15px 0px 0px;
margin: 9px 15px 0px 0px;
padding-right: 20px;
position: relative;
......@@ -28,7 +31,7 @@ header.global {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 45px;
height: 50px;
position: absolute;
right: 1px;
top: -12px;
......@@ -39,10 +42,10 @@ header.global {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 36px;
height: 50px;
position: absolute;
right: 0px;
top: 0px;
top: -12px;
width: 1px;
}
......@@ -57,7 +60,7 @@ header.global {
}
ol {
&.find-courses {
&.left {
float: left;
}
......@@ -89,7 +92,7 @@ header.global {
//font: italic 1.2rem/1.4rem $serif;
font: normal 1.2rem/1.4rem $sans-serif;
@include inline-block;
margin: 0px 20px 0px 0px;
margin: 0px 30px 0px 0px;
text-decoration: none;
//text-transform: lowercase;
text-transform: uppercase;
......@@ -106,6 +109,8 @@ header.global {
}
li.primary {
margin-right: 5px;
> 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;
......@@ -118,7 +123,7 @@ header.global {
font: normal 1.2rem/1.4rem $sans-serif;
@include inline-block;
margin: 1px 5px;
padding: 8px 12px;
padding: 10px 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px rgba(255,255,255, 0.6);
......@@ -137,7 +142,7 @@ header.global {
float: right;
a.user-link {
padding: 8px 12px 8px 40px;
padding: 10px 12px 10px 42px;
position: relative;
text-transform: none;
......@@ -154,10 +159,10 @@ header.global {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
height: 21px;
@include inline-block;
left: 6px;
left: 8px;
overflow: hidden;
position: absolute;
top: 5px;
top: 7px;
width: 21px;
&::after {
......
lms/templates/courses.html
......@@ -3,16 +3,20 @@
<%namespace name='static' file='static_content.html'/>
<section class="find-courses">
<header class="search-intro">
<div class="inner-wrapper">
<img src="${static.url('images/edx_bw.png')}" />
<h1>Explore courses from universities around the world.</h1>
<header class="search">
<div class="inner-wrapper main-search">
<hgroup>
<div class="logo">
<img src="${static.url('images/edx_bw.png')}" />
</div>
<h2>Explore courses from universities around the world.</h2>
</hgroup>
</div>
</header>
<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/index.html
......@@ -5,26 +5,8 @@
<section class="content-wrapper home">
<header>
<div class="inner-wrapper">
<section class="video-wrapper">
<div class="video-player">
<div class="video-inner">
<iframe width="560" height="315" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
<section class="welcome">
<div class="intro">
<h1>The Future of Online Education</h1>
<p>
edX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. edX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education.
</p>
</div>
<div class="signup-wrapper">
<section class="sign-up">
<a href="${reverse('courses')}" class="find-courses">Find Courses</a>
</section>
</div>
</section>
<h1>The Future of Online Education</h1>
<a href="${reverse('courses')}" class="find-courses">Find Courses</a>
</div>
</header>
......@@ -35,7 +17,7 @@
<section class="university-partners">
<ol class="partners">
<li class="partner mit">
<a href="/university_profile.html">
<a href="/university_profile">
<img src="${static.url('images/mit.png')}" />
<div class="name">
<span>MITx</span>
......@@ -43,7 +25,7 @@
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<a href="/university_profile">
<img src="${static.url('images/harvard.png')}" />
<div class="name">
<span>HarvardX</span>
......@@ -51,7 +33,7 @@
</a>
</li>
<li class="partner">
<a href="/university_profile.html">
<a href="/university_profile">
<img src="${static.url('images/berkeley.png')}" />
<div class="name">
<span>BerkeleyX</span>
......
lms/templates/navigation.html
......@@ -7,7 +7,7 @@
<header class="global" aria-label="Global Navigation">
<nav>
<h1 class="logo"><a href="${reverse('root')}"></a></h1>
<ol class="find-courses">
<ol class="left">
<li class="primary">
<a href="${reverse('courses')}">Find Courses</a>
</li>
......
lms/templates/university_profile.html
<section class="university_profile">
<h1>HarvardX</h1>
<%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>
<section class="university-profile">
<header class="search">
<div class="inner-wrapper university-search">
<hgroup>
<div class="logo">
<img src="${static.url('images/harvard.png')}" />
</div>
<h1>HarvardX</h1>
</hgroup>
</div>
</header>
<section class="container">
<section class="courses">
</section>
</section>
</section>
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