Skip to content

E
edx-platform
Commit c4b6cb00 by Galen Frechette
Options

updates and imporves design of the home page header

parent 76746938
Showing with 165 additions and 131 deletions
lms/static/sass/_course_about.scss
......@@ -10,21 +10,21 @@
@include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
border-bottom: 1px solid rgb(100,100,100);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
height: 280px;
margin-top: -69px;
padding-top: 150px;
overflow: hidden;
padding: 134px 0px 60px;
position: relative;
width: 100%;
.intro-inner-wrapper {
background: rgba(255,255,255, 0.9);
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box);
@include clearfix;
margin: 0 auto;
max-width: 1200px;
padding: 0px 10px;
position: relative;
width: grid-width(12);
z-index: 2;
......
lms/static/sass/_courses.scss
......@@ -8,6 +8,7 @@
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));
height: 430px;
margin-top: -69px;
width: 100%;
......@@ -15,26 +16,13 @@
height: 120px;
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
padding: 154px 0px 80px;
padding-top: 150px;
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: none;
height: 600px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 1;
}
> hgroup {
background: rgba(255,255,255, 0.9);
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
padding: 20px 30px;
......
lms/static/sass/_home.scss
......@@ -8,42 +8,73 @@
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;
height: 430px;
margin-top: -69px;
overflow: hidden;
padding: 149px 0px 90px;
padding: 0px;
width: flex-grid(12);
.outer-wrapper {
@extend .animation-home-header-pop-up;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
padding: 200px 10px 0px;
position: relative;
text-align: center;
&:hover {
.main-cta {
@include box-shadow(0 1px 16px 0 rgba($blue, 0.35));
}
}
width: grid-width(12);
}
.inner-wrapper {
background: rgba(255,255,255, 0.9);
.title {
background: rgba(255,255,255, 0.93);
border: 1px solid rgb(100,100,100);
@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;
padding: 20px 30px 30px;
margin-left: grid-width(1) + $gw-gutter;
margin-right: $gw-gutter;
//overflow: hidden;
//padding: 20px 30px 20px;
position: relative;
text-align: center;
z-index: 1;
@include transition(all, 0.2s, linear);
//width: grid-width(6);
vertical-align: top;
&:hover {
height: 165px;
> hgroup {
h1 {
border-bottom: 1px solid rgb(200,200,200);
padding-bottom: 10px;
}
h2 {
opacity: 0;
}
}
.title {
.actions {
opacity: 1;
}
}
> hgroup {
//background: rgba(255,255,255, 0.93);
//border: 1px solid rgb(100,100,100);
//@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include box-sizing(border-box);
height: 120px;
@include inline-block;
position: relative;
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;
//vertical-align: middle;
&::after {
@extend .faded-vertical-divider-light;
......@@ -56,18 +87,37 @@
}
h1 {
border-bottom: 1px solid rgb(200,200,200);
margin-bottom: 25px;
padding-bottom: 15px;
//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;
}
.main-cta {
h2 {
font-style: italic;
margin-bottom: 0px;
text-transform: lowercase;
}
}
.actions {
@include clearfix;
@include box-sizing(border-box);
left: 0px;
opacity: 0;
padding: 20px 30px 0px;
position: absolute;
@include transition(opacity, 0.2s, linear);
top: 75px;
width: flex-grid(12);
.main-cta {
//display: none;
float: left;
margin-right: flex-gutter();
@include transition(all, 0.15s, linear);
width: flex-grid(6);
> a.find-courses {
......@@ -89,76 +139,13 @@
}
.secondary-actions {
//display: none;
@include box-sizing(border-box);
@include clearfix;
float: left;
height: 47px;
width: flex-grid(6);
a.intro-video {
background: rgb(245,245,245);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(235,235,235)));
border: 1px solid rgb(200,200,200);
@include border-radius(30px);
@include box-sizing(border-box);
@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));
@include clearfix;
display: block;
float: left;
height: 100%;
overflow: hidden;
text-align: middle;
//height: 47px;
width: flex-grid(6);
&:hover {
text-decoration: none;
p {
color: $base-font-color;
}
.video {
opacity: 1;
}
}
.video {
@include background-image(url('/static/images/shot-2-large.jpg'));
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 {
@include box-sizing(border-box);
float: left;
......@@ -166,12 +153,12 @@
margin-right: flex-gutter();
position: relative;
text-align: center;
width: flex-grid(6);
width: flex-grid(12);
&:hover {
.sharing-message {
opacity: 1;
top: 56px;
top: 50px;
}
}
......@@ -194,7 +181,7 @@
position: absolute;
text-align: center;
@include transition(all, 0.15s, ease-out);
top: 65px;
top: 25px;
width: 220px;
&:hover {
......@@ -225,22 +212,23 @@
}
}
}
}
.media {
background: #fff;
border: 1px solid rgb(200,200,200);
border: 1px solid rgb(100,100,100);
@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;
padding: 1px;
position: relative;
vertical-align: middle;
//width: 210px;
width: flex-grid(3);
vertical-align: top;
width: flex-grid(2);
z-index: 2;
.hero {
//height: 125px;
height: 100%;
overflow: hidden;
position: relative;
......@@ -249,15 +237,16 @@
@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 12px 0 rgba(0,0,0, 0.4));
@include box-sizing(border-box);
border: 2px solid rgba(255,255,255, 0.8);
height: 80px;
height: 60px;
left: 50%;
margin-top: -40px;
margin-left: -40px;
margin-top: -30px;
margin-left: -30px;
position: absolute;
top: 50%;
@include transition(all, 0.15s, linear);
width: 80px;
width: 60px;
&::after {
color: rgba(255,255,255, 0.8);
......@@ -491,10 +480,14 @@
.news {
@include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
padding: 20px;
width: flex-grid(12);
.blog-posts {
border-bottom: 1px solid rgb(220,220,220);
margin-bottom: 20px;
padding-bottom: 20px;
@include clearfix;
> article {
......@@ -552,11 +545,28 @@
.post-date {
color: $lighter-base-font-color;
display: none;
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 {
letter-spacing: 1px;
margin-bottom: 30px;
text-align: center;
text-transform: uppercase;
//text-transform: uppercase;
}
h2 {
......
lms/templates/course.html
......@@ -59,3 +59,31 @@
<p class="university">${course.get_about_section('university')}</p>
</div>
</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 @@
<section class="home">
<header>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="title">
<h1>Online education for anyone, anywhere, at anytime</h1>
<hgroup>
<h1>The Future of Online Education</h1>
<h2>For anyone, anywhere, anytime.</h2>
</hgroup>
<section class="actions">
<div class="main-cta">
<a href="#signup-modal" class="find-courses" rel="leanModal">Sign Up</a>
</div>
......@@ -26,19 +29,17 @@
<img src="${static.url('images/email-sharing.png')}">
</a>
</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>
</section>
</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>
</header>
......@@ -121,6 +122,13 @@
</div>
</article>
</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>
......
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