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