Skip to content

E
edx-platform
Commit b6ebcfdd by Galen Frechette
Options

makes logo bigger, imporves footer layout with additin of new links

parent a765bd0b
Showing with 239 additions and 172 deletions
lms/static/sass/_course_info.scss → lms/static/sass/_course_about.scss
...@@ -96,70 +96,6 @@ ...@@ -96,70 +96,6 @@
} }
} }
} }
.social-sharing {
@include box-sizing(border-box);
float: left;
height: 44px;
position: relative;
text-align: center;
width: flex-grid(6);
&:hover {
.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);
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: 65px;
width: 220px;
&:hover {
opacity: 0;
}
}
.share {
height: 44px;
@include inline-block;
margin-right: 10px;
opacity: 0.5;
@include transition(all, 0.15s, linear);
width: 44px;
&:hover {
opacity: 1;
}
img {
width: 100%;
}
&:last-child {
margin-right: 0px;
}
}
}
} }
.media { .media {
...@@ -307,12 +243,12 @@ ...@@ -307,12 +243,12 @@
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
border-top: none; border-top: none;
float: left; float: left;
padding: 30px 20px; padding: 20px 20px 30px;
width: flex-grid(4); width: flex-grid(4);
header { header {
margin-bottom: 30px; margin-bottom: 30px;
padding-bottom: 26px; padding-bottom: 20px;
position: relative; position: relative;
text-align: center; text-align: center;
...@@ -324,6 +260,7 @@ ...@@ -324,6 +260,7 @@
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
z-index: 1;
} }
a.university-name { a.university-name {
...@@ -341,6 +278,73 @@ ...@@ -341,6 +278,73 @@
color: $lighter-base-font-color; color: $lighter-base-font-color;
} }
} }
.social-sharing {
@include box-sizing(border-box);
float: left;
height: 44px;
position: relative;
text-align: center;
width: flex-grid(12);
z-index: 2;
float: none;
&:hover {
.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);
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: 65px;
width: 220px;
&:hover {
opacity: 0;
}
}
.share {
height: 44px;
@include inline-block;
margin-right: 10px;
opacity: 0.5;
@include transition(all, 0.15s, linear);
width: 44px;
&:hover {
opacity: 1;
}
img {
width: 100%;
}
&:last-child {
margin-right: 0px;
}
}
}
} }
.important-dates { .important-dates {
......
lms/static/sass/application.scss
@import 'bourbon/bourbon'; @import 'bourbon/bourbon';
@import 'reset'; @import 'base_styles/reset';
@import 'font_face'; @import 'base_styles/font_face';
@import 'base'; @import 'base_styles/base';
@import 'base_mixins'; @import 'base_styles/base_mixins';
@import 'base_extends'; @import 'base_styles/base_extends';
@import 'base_animations'; @import 'base_styles/base_animations';
@import 'sass_old/base/variables'; @import 'sass_old/base/variables';
//@import 'sass_old/base/base';
@import 'sass_old/base/extends'; @import 'sass_old/base/extends';
//@import 'sass_old/base/font-face';
@import 'sass_old/base/functions'; @import 'sass_old/base/functions';
//@import 'sass_old/base/reset';
@import 'shared_forms'; @import 'shared_styles/shared_forms';
@import 'shared_footer'; @import 'shared_styles/shared_footer';
@import 'shared_header'; @import 'shared_styles/shared_header';
@import 'shared_list_of_courses'; @import 'shared_styles/shared_list_of_courses';
@import 'shared_course_filter'; @import 'shared_styles/shared_course_filter';
@import 'shared_modal'; @import 'shared_styles/shared_modal';
@import 'index'; @import 'home';
@import 'dashboard'; @import 'dashboard';
@import 'course'; @import 'course_object';
@import 'find_courses'; @import 'courses';
@import 'course_info'; @import 'course_about';
@import 'jobs'; @import 'jobs';
@import 'about'; @import 'about_pages';
@import 'press_release'; @import 'press_release';
@import 'sass_old/courseware/courseware'; @import 'sass_old/courseware/courseware';
......
lms/static/sass/_base.scss → lms/static/sass/base_styles/_base.scss
...@@ -17,6 +17,7 @@ $yellow: rgb(255, 252, 221); ...@@ -17,6 +17,7 @@ $yellow: rgb(255, 252, 221);
html, body { html, body {
background: rgb(250,250,250); background: rgb(250,250,250);
//background: rgb(77, 82, 99);
font-family: $sans-serif; font-family: $sans-serif;
font-size: 1em; font-size: 1em;
line-height: 1em; line-height: 1em;
...@@ -89,7 +90,6 @@ a:link, a:visited { ...@@ -89,7 +90,6 @@ a:link, a:visited {
} }
} }
.content-wrapper { .content-wrapper {
background: rgb(255,255,255); background: rgb(255,255,255);
margin: 0 auto 0; margin: 0 auto 0;
......
lms/static/sass/_shared_footer.scss → lms/static/sass/shared_styles/_shared_footer.scss
...@@ -15,35 +15,55 @@ footer { ...@@ -15,35 +15,55 @@ footer {
@include box-sizing(border-box); @include box-sizing(border-box);
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 20px 10px 0; padding: 30px 10px 0;
width: flex-grid(12); width: flex-grid(12);
.primary-links { .top {
border-bottom: 1px solid rgb(200,200,200);
@include clearfix; @include clearfix;
margin-bottom: 30px; padding-bottom: 30px;
} width: flex-grid(12);
text-align: center;
.secondary-links { ol {
padding-bottom: 10px; float: right;
text-align: left;
a { li {
@include inline-block;
list-style: none;
padding: 0px 15px;
position: relative;
vertical-align: middle;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -5px;
width: 1px;
}
a:link, a:visited {
color: $lighter-base-font-color;
letter-spacing: 1px; letter-spacing: 1px;
margin-right: 20px; padding: 6px 0px;
}
} }
} }
.copyright { .primary {
@include clearfix;
float: left; float: left;
padding-top: 2px;
a.logo { a.logo {
@include background-image(url('/static/images/logo.png')); @include background-image(url('/static/images/logo.png'));
background-position: 0 -24px; background-position: 0 -24px;
background-repeat: no-repeat; background-repeat: no-repeat;
@include inline-block; @include inline-block;
float: left; height: 22px;
height: 23px;
margin-right: 15px; margin-right: 15px;
margin-top: 2px; margin-top: 2px;
padding-right: 15px; padding-right: 15px;
...@@ -62,55 +82,29 @@ footer { ...@@ -62,55 +82,29 @@ footer {
height: 30px; height: 30px;
right: 0px; right: 0px;
position: absolute; position: absolute;
top: -2px; top: -3px;
width: 1px; width: 1px;
} }
} }
p { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font-style: italic;
@include inline-block; @include inline-block;
margin: 0 auto; letter-spacing: 1px;
padding-top: 1px; margin-right: 20px;
text-align: center; padding-top: 2px;
vertical-align: middle; vertical-align: middle;
a { &:hover {
color: $lighter-base-font-color; color: $base-font-color;
font-style: italic; text-decoration: none;
margin-left: 5px;
} }
} }
} }
ol { .social {
float: right; float: right;
li {
@include inline-block;
list-style: none;
padding: 0px 15px;
position: relative;
vertical-align: middle;
&::after {
@extend .faded-vertical-divider;
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -5px;
width: 1px;
}
a:link, a:visited {
color: $lighter-base-font-color;
letter-spacing: 1px;
padding: 6px 0px;
}
&.social { &.social {
border: none; border: none;
margin: 0 0 0 5px; margin: 0 0 0 5px;
...@@ -128,5 +122,60 @@ footer { ...@@ -128,5 +122,60 @@ footer {
} }
} }
} }
.bottom {
@include clearfix;
opacity: 0.8;
padding: 10px 0px 30px;
@include transition(all, 0.15s, linear);
width: flex-grid(12);
&:hover {
opacity: 1;
}
.copyright {
float: left;
p {
color: $lighter-base-font-color;
font-style: italic;
@include inline-block;
margin: 0 auto;
padding-top: 1px;
text-align: center;
vertical-align: middle;
a {
color: $lighter-base-font-color;
font-style: italic;
margin-left: 5px;
&:hover {
color: $blue;
}
}
}
}
.secondary {
float: right;
text-align: left;
a {
color: $lighter-base-font-color;
font-family: $serif;
font-style: italic;
letter-spacing: 1px;
line-height: 1.6em;
margin-left: 20px;
text-transform: lowercase;
&:hover {
color: $blue;
}
}
}
}
} }
} }
lms/static/sass/_shared_header.scss → lms/static/sass/shared_styles/_shared_header.scss
...@@ -19,7 +19,7 @@ header.global { ...@@ -19,7 +19,7 @@ header.global {
h1.logo { h1.logo {
float: left; float: left;
margin: 9px 15px 0px 0px; margin: 6px 15px 0px 0px;
padding-right: 20px; padding-right: 20px;
position: relative; position: relative;
...@@ -30,7 +30,7 @@ header.global { ...@@ -30,7 +30,7 @@ header.global {
height: 50px; height: 50px;
position: absolute; position: absolute;
right: 1px; right: 1px;
top: -12px; top: -8px;
width: 1px; width: 1px;
} }
...@@ -46,12 +46,12 @@ header.global { ...@@ -46,12 +46,12 @@ header.global {
} }
a { a {
@include background-image(url('/static/images/logo.png')); @include background-image(url('/static/images/header-logo.png'));
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
height: 23px; height: 31px;
width: 47px; width: 64px;
} }
} }
......
lms/static/sass/_shared_modal.scss → lms/static/sass/shared_styles/_shared_modal.scss
...@@ -106,6 +106,24 @@ ...@@ -106,6 +106,24 @@
} }
} }
//#enroll_error {
//background: rgb(253, 87, 87);
//border: 1px solid rgb(202, 17, 17);
//color: rgb(143, 14, 14);
//margin-bottom: 20px;
//padding: 12px;
//}
//#enroll {
//padding: 0 40px;
//h1 {
//font: normal 1em/1.6em $sans-serif;
//margin-bottom: 10px;
//text-align: left;
//}
//}
form { form {
margin-bottom: 12px; margin-bottom: 12px;
padding: 0px 40px; padding: 0px 40px;
......
lms/templates/courses.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="logo"> <div class="logo">
<img src="${static.url('images/edx_bw.png')}" /> <img src="${static.url('images/edx_bw.png')}" />
</div> </div>
<h2>Explore courses from universities around the world.</h2> <h2>Explore courses from leading universities.</h2>
</hgroup> </hgroup>
</div> </div>
</header> </header>
......
lms/templates/footer.html
...@@ -3,36 +3,34 @@ ...@@ -3,36 +3,34 @@
<footer> <footer>
<nav> <nav>
<section class="primary-links"> <section class="top">
<section class="copyright"> <section class="primary">
<a href="${reverse('root')}" class="logo"></a> <a href="${reverse('root')}" class="logo"></a>
<p>&copy; 2012 edX, <a href="/t/copyright.html">some rights reserved.</a></p>
</section>
<ol>
<li>
<a href="${reverse('courses')}">Find Courses</a> <a href="${reverse('courses')}">Find Courses</a>
</li>
<li>
<a href="/t/about.html">About</a> <a href="/t/about.html">About</a>
</li>
<li>
<a href="#">Blog</a> <a href="#">Blog</a>
</li>
<li>
<a href="/t/jobs.html">Jobs</a> <a href="/t/jobs.html">Jobs</a>
</li> </section>
<li class="social">
<section class="social">
<a href="#"><img src="${static.url('images/linkedin.png')}" /></a> <a href="#"><img src="${static.url('images/linkedin.png')}" /></a>
<a href="#"><img src="${static.url('images/facebook.png')}" /></a> <a href="#"><img src="${static.url('images/facebook.png')}" /></a>
<a href="#"><img src="${static.url('images/twitter.png')}" /></a> <a href="#"><img src="${static.url('images/twitter.png')}" /></a>
</li>
</ol>
</section> </section>
<section class="secondary-links"> </section>
<section class="bottom">
<section class="copyright">
<p>&copy; 2012 edX, <a href="/t/copyright.html">some rights reserved.</a></p>
</section>
<section class="secondary">
<a href="/t/tos.html">Terms of Service</a> <a href="/t/tos.html">Terms of Service</a>
<a href="/t/privacy.html">Privacy Policy</a> <a href="/t/privacy.html">Privacy Policy</a>
<a href="/t/honor.html">Honor Code</a> <a href="/t/honor.html">Honor Code</a>
<a href="/t/help.html">Help</a> <a href="/t/help.html">Help</a>
</section> </section>
</section>
</nav> </nav>
</footer> </footer>
lms/templates/portal/course_about.html
...@@ -18,19 +18,6 @@ ...@@ -18,19 +18,6 @@
<a href="${reverse('enroll', args=[course.id])}" class="register">Register</a> <a href="${reverse('enroll', args=[course.id])}" class="register">Register</a>
</div> </div>
<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> </section>
<a href="#video-modal" class="media" rel="leanModal"> <a href="#video-modal" class="media" rel="leanModal">
<div class="hero"> <div class="hero">
...@@ -111,7 +98,21 @@ ...@@ -111,7 +98,21 @@
<section class="course-sidebar"> <section class="course-sidebar">
<section class="course-summary"> <section class="course-summary">
<header> <header>
<a href="#" class="university-name">${course.get_about_section("university")}</a><span>${course.get_about_section("title")}</span> <!--
-<a href="#" class="university-name">${course.get_about_section("university")}</a><span>${course.get_about_section("title")}</span>
-->
<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>
</header> </header>
<ol class="important-dates"> <ol class="important-dates">
......
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