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 558 additions and 420 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.css
...@@ -531,7 +531,7 @@ a:link, a:visited { ...@@ -531,7 +531,7 @@ a:link, a:visited {
height: 1px; height: 1px;
width: 100%; } width: 100%; }
.faded-vertical-divider, .vertical-divider, footer nav .copyright a.logo::after, footer nav ol li::after, header.global h1.logo::before, .home > header .title::before, .home .university-partners .partners li.partner::before, .find-courses header.search .inner-wrapper.main-search .logo::after, .find-courses header.search .inner-wrapper.university-search .logo::after, .university-profile header.search .inner-wrapper.main-search .logo::after, .university-profile header.search .inner-wrapper.university-search .logo::after { .faded-vertical-divider, .vertical-divider, footer nav .top ol li::after, footer nav .top .primary a.logo::after, header.global h1.logo::before, .home > header .title::before, .home .university-partners .partners li.partner::before, .find-courses header.search .inner-wrapper.main-search .logo::after, .find-courses header.search .inner-wrapper.university-search .logo::after, .university-profile header.search .inner-wrapper.main-search .logo::after, .university-profile header.search .inner-wrapper.university-search .logo::after {
background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0)); background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
...@@ -1494,107 +1494,108 @@ footer { ...@@ -1494,107 +1494,108 @@ footer {
box-sizing: border-box; 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: 100%; } width: 100%; }
footer nav .primary-links { footer nav .top {
border-bottom: 1px solid #c8c8c8;
zoom: 1; zoom: 1;
margin-bottom: 30px; } padding-bottom: 30px;
footer nav .primary-links:before, footer nav .primary-links:after { width: 100%;
text-align: center; }
footer nav .top:before, footer nav .top:after {
content: ""; content: "";
display: table; } display: table; }
footer nav .primary-links:after { footer nav .top:after {
clear: both; } clear: both; }
footer nav .secondary-links { footer nav .top ol {
padding-bottom: 10px; float: right; }
text-align: left; } footer nav .top ol li {
footer nav .secondary-links a { display: -moz-inline-box;
letter-spacing: 1px; -moz-box-orient: vertical;
margin-right: 20px; } display: inline-block;
footer nav .copyright { vertical-align: baseline;
float: left; zoom: 1;
padding-top: 2px; } *display: inline;
footer nav .copyright a.logo { *vertical-align: auto;
background-image: url("/static/images/logo.png"); list-style: none;
background-image: url("/static/images/logo.png"); padding: 0px 15px;
background-image: url("/static/images/logo.png"); position: relative;
background-image: url("/static/images/logo.png"); vertical-align: middle; }
background-image: url("/static/images/logo.png"); footer nav .top ol li::after {
background-position: 0 -24px; content: "";
background-repeat: no-repeat; display: block;
display: -moz-inline-box; height: 30px;
-moz-box-orient: vertical; right: 0px;
display: inline-block; position: absolute;
vertical-align: baseline; top: -5px;
zoom: 1; width: 1px; }
*display: inline; footer nav .top ol li a:link, footer nav .top ol li a:visited {
*vertical-align: auto; color: #a0a0a0;
float: left; letter-spacing: 1px;
height: 23px; padding: 6px 0px; }
margin-right: 15px; footer nav .top .primary {
margin-top: 2px;
padding-right: 15px;
position: relative;
width: 47px;
vertical-align: middle; }
footer nav .copyright a.logo:hover {
background-position: 0 0; }
footer nav .copyright a.logo::after {
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -2px;
width: 1px; }
footer nav .copyright p {
color: #a0a0a0;
font-style: italic;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 0 auto;
padding-top: 1px;
text-align: center;
vertical-align: middle; }
footer nav .copyright p a {
color: #a0a0a0;
font-style: italic;
margin-left: 5px; }
footer nav ol {
float: right; }
footer nav ol li {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; float: left; }
*vertical-align: auto; footer nav .top .primary:before, footer nav .top .primary:after {
list-style: none;
padding: 0px 15px;
position: relative;
vertical-align: middle; }
footer nav ol li::after {
content: ""; content: "";
display: block; display: table; }
height: 30px; footer nav .top .primary:after {
right: 0px; clear: both; }
position: absolute; footer nav .top .primary a.logo {
top: -5px; background-image: url("/static/images/logo.png");
width: 1px; } background-image: url("/static/images/logo.png");
footer nav ol li a:link, footer nav ol li a:visited { background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-image: url("/static/images/logo.png");
background-position: 0 -24px;
background-repeat: no-repeat;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
height: 22px;
margin-right: 15px;
margin-top: 2px;
padding-right: 15px;
position: relative;
width: 47px;
vertical-align: middle; }
footer nav .top .primary a.logo:hover {
background-position: 0 0; }
footer nav .top .primary a.logo::after {
content: "";
display: block;
height: 30px;
right: 0px;
position: absolute;
top: -3px;
width: 1px; }
footer nav .top .primary a {
color: #a0a0a0; color: #a0a0a0;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
letter-spacing: 1px; letter-spacing: 1px;
padding: 6px 0px; } margin-right: 20px;
footer nav ol li.social { padding-top: 2px;
vertical-align: middle; }
footer nav .top .primary a:hover {
color: #3c3c3c;
text-decoration: none; }
footer nav .top .social {
float: right; }
footer nav .top .social.social {
border: none; border: none;
margin: 0 0 0 5px; margin: 0 0 0 5px;
padding: 0; } padding: 0; }
footer nav ol li.social a { footer nav .top .social.social a {
opacity: 0.7; opacity: 0.7;
padding: 0 0 0 10px; padding: 0 0 0 10px;
-webkit-transition-property: all; -webkit-transition-property: all;
...@@ -1617,8 +1618,75 @@ footer { ...@@ -1617,8 +1618,75 @@ footer {
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; } transition-delay: 0; }
footer nav ol li.social a:hover { footer nav .top .social.social a:hover {
opacity: 1; } opacity: 1; }
footer nav .bottom {
zoom: 1;
opacity: 0.8;
padding: 10px 0px 30px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 100%; }
footer nav .bottom:before, footer nav .bottom:after {
content: "";
display: table; }
footer nav .bottom:after {
clear: both; }
footer nav .bottom:hover {
opacity: 1; }
footer nav .bottom .copyright {
float: left; }
footer nav .bottom .copyright p {
color: #a0a0a0;
font-style: italic;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin: 0 auto;
padding-top: 1px;
text-align: center;
vertical-align: middle; }
footer nav .bottom .copyright p a {
color: #a0a0a0;
font-style: italic;
margin-left: 5px; }
footer nav .bottom .copyright p a:hover {
color: #1d9dd9; }
footer nav .bottom .secondary {
float: right;
text-align: left; }
footer nav .bottom .secondary a {
color: #a0a0a0;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-style: italic;
letter-spacing: 1px;
line-height: 1.6em;
margin-left: 20px;
text-transform: lowercase; }
footer nav .bottom .secondary a:hover {
color: #1d9dd9; }
header.global { header.global {
border-bottom: 1px solid #bebebe; border-bottom: 1px solid #bebebe;
...@@ -1651,7 +1719,7 @@ header.global { ...@@ -1651,7 +1719,7 @@ header.global {
clear: both; } clear: both; }
header.global h1.logo { header.global 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; }
header.global h1.logo::before { header.global h1.logo::before {
...@@ -1660,7 +1728,7 @@ header.global { ...@@ -1660,7 +1728,7 @@ header.global {
height: 50px; height: 50px;
position: absolute; position: absolute;
right: 1px; right: 1px;
top: -12px; top: -8px;
width: 1px; } width: 1px; }
header.global h1.logo::after { header.global h1.logo::after {
content: ""; content: "";
...@@ -1671,16 +1739,16 @@ header.global { ...@@ -1671,16 +1739,16 @@ header.global {
top: -12px; top: -12px;
width: 1px; } width: 1px; }
header.global h1.logo a { header.global h1.logo a {
background-image: url("/static/images/logo.png"); background-image: url("/static/images/header-logo.png");
background-image: url("/static/images/logo.png"); background-image: url("/static/images/header-logo.png");
background-image: url("/static/images/logo.png"); background-image: url("/static/images/header-logo.png");
background-image: url("/static/images/logo.png"); background-image: url("/static/images/header-logo.png");
background-image: url("/static/images/logo.png"); 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; }
header.global ol.left { header.global ol.left {
float: left; } float: left; }
header.global ol.guest { header.global ol.guest {
...@@ -4132,109 +4200,6 @@ nav.course-material { ...@@ -4132,109 +4200,6 @@ nav.course-material {
box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
.course-info header.course-profile .intro-inner-wrapper .intro .main-cta > a.find-courses:hover, .course-info header.course-profile .intro-inner-wrapper .intro .main-cta a.register:hover { .course-info header.course-profile .intro-inner-wrapper .intro .main-cta > a.find-courses:hover, .course-info header.course-profile .intro-inner-wrapper .intro .main-cta a.register:hover {
color: white; } color: white; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
height: 44px;
position: relative;
text-align: center;
width: 48.988%; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing:hover .sharing-message {
opacity: 1;
top: 56px; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing .sharing-message {
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
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);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: white;
float: right;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-size: 0.9em;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
top: 65px;
width: 220px; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing .sharing-message:hover {
opacity: 0; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing .share {
height: 44px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 10px;
opacity: 0.5;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 44px; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing .share:hover {
opacity: 1; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing .share img {
width: 100%; }
.course-info header.course-profile .intro-inner-wrapper .intro .social-sharing .share:last-child {
margin-right: 0px; }
.course-info header.course-profile .intro-inner-wrapper .media { .course-info header.course-profile .intro-inner-wrapper .media {
background: #fff; background: #fff;
border-left: 1px solid #646464; border-left: 1px solid #646464;
...@@ -4375,11 +4340,11 @@ nav.course-material { ...@@ -4375,11 +4340,11 @@ nav.course-material {
border: 1px solid #c8c8c8; border: 1px solid #c8c8c8;
border-top: none; border-top: none;
float: left; float: left;
padding: 30px 20px; padding: 20px 20px 30px;
width: 31.984%; } width: 31.984%; }
.course-info .course-sidebar header { .course-info .course-sidebar header {
margin-bottom: 30px; margin-bottom: 30px;
padding-bottom: 26px; padding-bottom: 20px;
position: relative; position: relative;
text-align: center; } text-align: center; }
.course-info .course-sidebar header::after { .course-info .course-sidebar header::after {
...@@ -4388,7 +4353,8 @@ nav.course-material { ...@@ -4388,7 +4353,8 @@ nav.course-material {
height: 1px; height: 1px;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
width: 100%; } width: 100%;
z-index: 1; }
.course-info .course-sidebar header a.university-name { .course-info .course-sidebar header a.university-name {
border-right: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8;
color: #3c3c3c; color: #3c3c3c;
...@@ -4407,6 +4373,111 @@ nav.course-material { ...@@ -4407,6 +4373,111 @@ nav.course-material {
padding-right: 15px; } padding-right: 15px; }
.course-info .course-sidebar header a.university-name:hover { .course-info .course-sidebar header a.university-name:hover {
color: #a0a0a0; } color: #a0a0a0; }
.course-info .course-sidebar header .social-sharing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
height: 44px;
position: relative;
text-align: center;
width: 100%;
z-index: 2;
float: none; }
.course-info .course-sidebar header .social-sharing:hover .sharing-message {
opacity: 1;
top: 56px; }
.course-info .course-sidebar header .social-sharing .sharing-message {
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
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);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: white;
float: right;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-size: 0.9em;
font-style: italic;
left: 50%;
margin-left: -110px;
opacity: 0;
padding: 6px 10px;
position: absolute;
text-align: center;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
top: 65px;
width: 220px; }
.course-info .course-sidebar header .social-sharing .sharing-message:hover {
opacity: 0; }
.course-info .course-sidebar header .social-sharing .share {
height: 44px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
margin-right: 10px;
opacity: 0.5;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 44px; }
.course-info .course-sidebar header .social-sharing .share:hover {
opacity: 1; }
.course-info .course-sidebar header .social-sharing .share img {
width: 100%; }
.course-info .course-sidebar header .social-sharing .share:last-child {
margin-right: 0px; }
.course-info .course-sidebar .important-dates { .course-info .course-sidebar .important-dates {
list-style: none; list-style: none;
margin: 0px; margin: 0px;
......
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,101 +15,95 @@ footer { ...@@ -15,101 +15,95 @@ 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 {
padding-bottom: 10px; ol {
text-align: left; 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 { a:link, a:visited {
letter-spacing: 1px; color: $lighter-base-font-color;
margin-right: 20px; letter-spacing: 1px;
padding: 6px 0px;
}
}
} }
}
.copyright {
float: left;
padding-top: 2px;
a.logo { .primary {
@include background-image(url('/static/images/logo.png')); @include clearfix;
background-position: 0 -24px;
background-repeat: no-repeat;
@include inline-block;
float: left; 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 { a.logo {
@extend .faded-vertical-divider; @include background-image(url('/static/images/logo.png'));
content: ""; background-position: 0 -24px;
display: block; background-repeat: no-repeat;
height: 30px; @include inline-block;
right: 0px; height: 22px;
position: absolute; margin-right: 15px;
top: -2px; margin-top: 2px;
width: 1px; padding-right: 15px;
} position: relative;
} width: 47px;
vertical-align: middle;
&:hover {
background-position: 0 0;
}
p { &::after {
color: $lighter-base-font-color; @extend .faded-vertical-divider;
font-style: italic; content: "";
@include inline-block; display: block;
margin: 0 auto; height: 30px;
padding-top: 1px; right: 0px;
text-align: center; position: absolute;
vertical-align: middle; top: -3px;
width: 1px;
}
}
a { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font-style: italic; @include inline-block;
margin-left: 5px; letter-spacing: 1px;
margin-right: 20px;
padding-top: 2px;
vertical-align: middle;
&:hover {
color: $base-font-color;
text-decoration: none;
}
} }
} }
}
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;
...@@ -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> <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> </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>
<section class="secondary-links">
<a href="/t/tos.html">Terms of Service</a> <section class="bottom">
<a href="/t/privacy.html">Privacy Policy</a> <section class="copyright">
<a href="/t/honor.html">Honor Code</a> <p>&copy; 2012 edX, <a href="/t/copyright.html">some rights reserved.</a></p>
<a href="/t/help.html">Help</a> </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> </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