Skip to content

E
edx-platform
Commit f714849d by Galen Frechette
Options

updates and imporves design of the home page header

parent 7db6e302
Showing with 242 additions and 208 deletions
lms/static/sass/_course_about.scss
...@@ -10,21 +10,21 @@ ...@@ -10,21 +10,21 @@
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(100,100,100); border-bottom: 1px solid rgb(100,100,100);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
height: 280px;
margin-top: -69px; margin-top: -69px;
padding-top: 150px;
overflow: hidden; overflow: hidden;
padding: 134px 0px 60px;
position: relative; position: relative;
width: 100%; width: 100%;
.intro-inner-wrapper { .intro-inner-wrapper {
background: rgba(255,255,255, 0.9); background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100); border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix; @include clearfix;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
padding: 0px 10px;
position: relative; position: relative;
width: grid-width(12); width: grid-width(12);
z-index: 2; z-index: 2;
......
lms/static/sass/_courses.scss
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
background-size: cover; background-size: cover;
border-bottom: 1px solid rgb(100,100,100); 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)); @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));
height: 430px;
margin-top: -69px; margin-top: -69px;
width: 100%; width: 100%;
...@@ -15,26 +16,13 @@ ...@@ -15,26 +16,13 @@
height: 120px; height: 120px;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
overflow: hidden; padding-top: 150px;
padding: 154px 0px 80px;
position: relative; position: relative;
text-align: center; text-align: center;
width: flex-grid(12); 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: none;
height: 600px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 1;
}
> hgroup { > hgroup {
background: rgba(255,255,255, 0.9); background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100); border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
padding: 20px 30px; padding: 20px 30px;
......
lms/static/sass/_home.scss
...@@ -8,239 +8,227 @@ ...@@ -8,239 +8,227 @@
border-bottom: 1px solid rgb(80,80,80); 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 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;
height: 430px;
margin-top: -69px; margin-top: -69px;
overflow: hidden; overflow: hidden;
padding: 149px 0px 90px; padding: 0px;
width: flex-grid(12); width: flex-grid(12);
.outer-wrapper { .outer-wrapper {
@extend .animation-home-header-pop-up; @extend .animation-home-header-pop-up;
max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 10px; padding: 200px 10px 0px;
position: relative; position: relative;
text-align: center; width: grid-width(12);
&:hover {
.main-cta {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
}
}
} }
.inner-wrapper { .title {
background: rgba(255,255,255, 0.9); background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100); border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5)); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box);
height: 120px;
//@include clearfix;
@include inline-block; @include inline-block;
padding: 20px 30px 30px; margin-left: grid-width(1) + $gw-gutter;
margin-right: $gw-gutter;
//overflow: hidden;
//padding: 20px 30px 20px;
position: relative; position: relative;
text-align: center; text-align: center;
z-index: 1; @include transition(all, 0.2s, linear);
} //width: grid-width(6);
vertical-align: top;
.title { &:hover {
@include inline-block; height: 165px;
position: relative;
text-align: left;
vertical-align: middle;
&::after {
@extend .faded-vertical-divider-light;
content: "";
display: block;
height: 170px;
position: absolute;
right: -1px;
top: -20px;
}
h1 { > hgroup {
border-bottom: 1px solid rgb(200,200,200); h1 {
margin-bottom: 25px; border-bottom: 1px solid rgb(200,200,200);
padding-bottom: 15px; padding-bottom: 10px;
text-align: left; }
text-shadow: 0 1px rgba(255,255,255, 0.6); h2 {
opacity: 0;
}
}
.actions {
opacity: 1;
}
} }
.main-cta { > hgroup {
@include clearfix; //background: rgba(255,255,255, 0.93);
float: left; //border: 1px solid rgb(100,100,100);
margin-right: flex-gutter(); //@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include transition(all, 0.15s, linear); @include box-sizing(border-box);
width: flex-grid(6); height: 120px;
@include inline-block;
left: 0px;
//margin-left: grid-width(1) + $gw-gutter;
//margin-right: $gw-gutter;
opacity: 1;
padding: 20px 30px;
//position: absolute;
top: 0px;
@include transition(all, 0.2s, linear);
text-align: left;
//vertical-align: middle;
> a.find-courses { &::after {
@include button(shiny, $blue); @extend .faded-vertical-divider-light;
@include box-sizing(border-box); content: "";
@include border-radius(3px);
display: block; display: block;
font: normal 1.2rem/1.6rem $sans-serif; height: 170px;
letter-spacing: 1px; position: absolute;
padding: 10px 0px; right: -1px;
text-transform: uppercase; top: -20px;
text-align: center; }
width: flex-grid(12);
&:hover { h1 {
color: rgb(255,255,255); //border-bottom: 1px solid rgb(200,200,200);
} //margin-bottom: 25px;
margin-bottom: 0px;
//padding-bottom: 15px;
text-align: left;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
}
h2 {
font-style: italic;
margin-bottom: 0px;
text-transform: lowercase;
} }
} }
.secondary-actions { .actions {
@include box-sizing(border-box);
@include clearfix; @include clearfix;
float: left; @include box-sizing(border-box);
height: 47px; left: 0px;
width: flex-grid(6); opacity: 0;
padding: 20px 30px 0px;
a.intro-video { position: absolute;
background: rgb(245,245,245); @include transition(opacity, 0.2s, linear);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(235,235,235))); top: 75px;
border: 1px solid rgb(200,200,200); width: flex-grid(12);
@include border-radius(30px);
@include box-sizing(border-box); .main-cta {
@include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8)); //display: none;
@include clearfix;
display: block;
float: left; float: left;
height: 100%; margin-right: flex-gutter();
overflow: hidden;
text-align: middle;
width: flex-grid(6); width: flex-grid(6);
&:hover { > a.find-courses {
text-decoration: none; @include button(shiny, $blue);
@include box-sizing(border-box);
p { @include border-radius(3px);
color: $base-font-color; display: block;
} font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
.video { padding: 10px 0px;
opacity: 1; text-transform: uppercase;
} text-align: center;
} width: flex-grid(12);
.video { &:hover {
@include background-image(url('/static/images/shot-2-large.jpg')); color: rgb(255,255,255);
background-size: cover;
border-right: 1px solid rgb(200,200,200);
@include border-left-radius(30px);
@include box-shadow(1px 0 0 0 rgba(255,255,255, 0.6), inset 1px 0 0 0 rgba(255,255,255, 0.8), inset 0 0 0 1px rgba(255,255,255, 0.7));
float: left;
height: 100%;
opacity: 0.8;
position: relative;
@include transition(all, 0.15s, linear);
width: 60px;
vertical-align: middle;
.play {
@include background-image(url('/static/images/portal-icons/video-play-icon.png'));
background-size: cover;
height: 31px;
margin-left: -13px;
margin-top: -15px;
left: 50%;
position: absolute;
top: 50%;
width: 31px;
} }
} }
p {
color: $lighter-base-font-color;
font-style: italic;
padding-top: 10px;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(all, 0.15s, linear);
vertical-align: middle;
}
} }
.social-sharing {
.secondary-actions {
//display: none;
@include box-sizing(border-box); @include box-sizing(border-box);
@include clearfix;
float: left; float: left;
height: 44px; //height: 47px;
margin-right: flex-gutter();
position: relative;
text-align: center;
width: flex-grid(6); width: flex-grid(6);
&:hover { .social-sharing {
.sharing-message {
opacity: 1;
top: 56px;
}
}
.sharing-message {
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
rgba(0,0,0, 0.7) 100%));
border: 1px solid rgba(0,0,0, 0.5);
@include border-radius(4px);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box); @include box-sizing(border-box);
color: rgb(255,255,255); float: left;
float: right; height: 44px;
font-family: $serif; margin-right: flex-gutter();
font-size: 0.9em; position: relative;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center; text-align: center;
@include transition(all, 0.15s, ease-out); width: flex-grid(12);
top: 65px;
width: 220px;
&:hover { &:hover {
opacity: 0; .sharing-message {
opacity: 1;
top: 50px;
}
} }
}
.share { .sharing-message {
height: 44px; @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
@include inline-block; rgba(0,0,0, 0.7) 100%));
margin-right: 10px; border: 1px solid rgba(0,0,0, 0.5);
opacity: 0.5; @include border-radius(4px);
@include transition(all, 0.15s, linear); @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
width: 44px; @include box-sizing(border-box);
color: rgb(255,255,255);
float: right;
font-family: $serif;
font-size: 0.9em;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center;
@include transition(all, 0.15s, ease-out);
top: 25px;
width: 220px;
&:hover { &:hover {
opacity: 1; opacity: 0;
}
} }
img { .share {
width: 100%; height: 44px;
} @include inline-block;
margin-right: 10px;
opacity: 0.5;
@include transition(all, 0.15s, linear);
width: 44px;
&:hover {
opacity: 1;
}
&:last-child { img {
margin-right: 0px; width: 100%;
}
&:last-child {
margin-right: 0px;
}
} }
} }
} }
} }
} }
.media { .media {
background: #fff; background: #fff;
border: 1px solid rgb(200,200,200); border: 1px solid rgb(100,100,100);
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
height: 120px;
@include inline-block; @include inline-block;
padding: 1px; padding: 1px;
position: relative; position: relative;
vertical-align: middle; vertical-align: top;
//width: 210px; width: flex-grid(2);
width: flex-grid(3);
z-index: 2; z-index: 2;
.hero { .hero {
//height: 125px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
...@@ -249,15 +237,16 @@ ...@@ -249,15 +237,16 @@
@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75))); @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4)); @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
@include box-sizing(border-box);
border: 2px solid rgba(255,255,255, 0.8); border: 2px solid rgba(255,255,255, 0.8);
height: 80px; height: 60px;
left: 50%; left: 50%;
margin-top: -40px; margin-top: -30px;
margin-left: -40px; margin-left: -30px;
position: absolute; position: absolute;
top: 50%; top: 50%;
@include transition(all, 0.15s, linear); @include transition(all, 0.15s, linear);
width: 80px; width: 60px;
&::after { &::after {
color: rgba(255,255,255, 0.8); color: rgba(255,255,255, 0.8);
...@@ -491,10 +480,14 @@ ...@@ -491,10 +480,14 @@
.news { .news {
@include box-sizing(border-box); @include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
padding: 20px; padding: 20px;
width: flex-grid(12); width: flex-grid(12);
.blog-posts { .blog-posts {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 20px;
padding-bottom: 20px;
@include clearfix; @include clearfix;
> article { > article {
...@@ -552,11 +545,28 @@ ...@@ -552,11 +545,28 @@
.post-date { .post-date {
color: $lighter-base-font-color; color: $lighter-base-font-color;
display: none;
letter-spacing: 1px; letter-spacing: 1px;
} }
} }
} }
} }
.press-links {
h3 {
display: inline;
font-family: $sans-serif;
font-weight: 700;
line-height: 1.6em;
}
a {
line-height: 1.6em;
font-family: $serif;
font-style: italic;
margin-left: 10px;
}
}
} }
} }
} }
lms/static/sass/base/_base.scss
...@@ -18,7 +18,7 @@ h1 { ...@@ -18,7 +18,7 @@ h1 {
letter-spacing: 1px; letter-spacing: 1px;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
text-transform: uppercase; //text-transform: uppercase;
} }
h2 { h2 {
......
lms/templates/course.html
...@@ -31,3 +31,31 @@ ...@@ -31,3 +31,31 @@
<p class="university">${course.get_about_section('university')}</p> <p class="university">${course.get_about_section('university')}</p>
</div> </div>
</article> </article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.get_about_section('title')}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/history.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits. An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.get_about_section('university')}</a>
<span class="start-date">7/23/12</span>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.get_about_section('university')}</p>
</div>
</article>
lms/templates/index.html
...@@ -5,10 +5,13 @@ ...@@ -5,10 +5,13 @@
<section class="home"> <section class="home">
<header> <header>
<div class="outer-wrapper"> <div class="outer-wrapper">
<div class="inner-wrapper"> <div class="title">
<div class="title"> <hgroup>
<h1>Online education for anyone, anywhere, at anytime</h1> <h1>The Future of Online Education</h1>
<h2>For anyone, anywhere, anytime.</h2>
</hgroup>
<section class="actions">
<div class="main-cta"> <div class="main-cta">
<a href="#signup-modal" class="find-courses" rel="leanModal">Sign Up</a> <a href="#signup-modal" class="find-courses" rel="leanModal">Sign Up</a>
</div> </div>
...@@ -26,19 +29,17 @@ ...@@ -26,19 +29,17 @@
<img src="${static.url('images/email-sharing.png')}"> <img src="${static.url('images/email-sharing.png')}">
</a> </a>
</div> </div>
<a href="#video-modal" class="intro-video" rel="leanModal">
<!--
-<img src="${static.url('images/courses/space1.jpg')}" />
-->
<div class="video">
<div class="play"></div>
</div>
<p>Play intro video</p>
</a>
</div> </div>
</div> </section>
</div> </div>
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
<img src="${static.url('images/courses/circuits.jpeg')}" />
<div class="play-intro"></div>
</div>
</a>
</div> </div>
</header> </header>
...@@ -121,6 +122,13 @@ ...@@ -121,6 +122,13 @@
</div> </div>
</article> </article>
</section> </section>
<section class="press-links">
<h3>Press Links:</h3>
<a href="#">The edX Press Release</a>,
<a href="#">Online Classes Cut Costs, But Do They Dilute Brands?</a>,
<a href="#">The Harvard Press Release</a>,
<a href="#">The MIT Press Release</a>
</section>
</section> </section>
</section> </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