Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed print.scss, moved index to marketing, started to alphabatize

Browse Source
This commit is contained in:
Kyle Fiedler
2012-05-15 16:55:46 -04:00
parent ff366ad6b2
commit 60bd63a594
13 changed files with 70 additions and 837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
static/css/print.css
View File

14
templates/sass/_help.scss
View File

@@ -2,10 +2,10 @@ section.help.main-content {
padding: lh();
h1 {
margin-top: 0;
margin-bottom: lh();
padding-bottom: lh();
border-bottom: 1px solid #ddd;
margin-bottom: lh();
margin-top: 0;
padding-bottom: lh();
}
p {
@@ -17,9 +17,9 @@ section.help.main-content {
}
section.self-help {
float: left;
margin-bottom: lh();
margin-right: flex-gutter();
float: left;
width: flex-grid(6);
ul {
@@ -36,17 +36,17 @@ section.help.main-content {
width: flex-grid(6);
dl {
margin-bottom: lh();
display: block;
margin-bottom: lh();
dd {
margin-bottom: lh();
}
dt {
font-weight: bold;
float: left;
clear: left;
float: left;
font-weight: bold;
width: flex-grid(2, 6);
}
}

60
templates/sass/_info.scss
View File

@@ -16,28 +16,28 @@ div.info-wrapper {
list-style: none;
> li {
padding-bottom: lh(.5);
margin-bottom: lh(.5);
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
margin-bottom: lh(.5);
padding-bottom: lh(.5);
&:first-child {
padding: lh(.5);
margin: 0 (-(lh(.5))) lh();
background: $cream;
border-bottom: 1px solid darken($cream, 10%);
margin: 0 (-(lh(.5))) lh();
padding: lh(.5);
}
h2 {
float: left;
width: flex-grid(2, 9);
margin: 0 flex-gutter() 0 0;
width: flex-grid(2, 9);
}
section.update-description {
float: left;
width: flex-grid(7, 9);
margin-bottom: 0;
width: flex-grid(7, 9);
li {
margin-bottom: lh(.5);
@@ -55,9 +55,9 @@ div.info-wrapper {
section.handouts {
@extend .sidebar;
border-left: 1px solid #d3d3d3;
@include border-radius(0 4px 4px 0);
border-right: 0;
border-left: 1px solid #d3d3d3;
header {
@extend .bottom-border;
@@ -69,32 +69,32 @@ div.info-wrapper {
}
p {
color: #666;
font-size: 12px;
margin-bottom: 0;
margin-top: 4px;
font-size: 12px;
color: #666;
}
}
ol {
list-style: none;
background: none;
list-style: none;
li {
@include box-shadow(0 1px 0 #eee);
border-bottom: 1px solid #d3d3d3;
@include box-sizing(border-box);
@extend .clearfix;
padding: 7px lh(.75);
background: none;
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
@include box-sizing(border-box);
padding: 7px lh(.75);
position: relative;
&.expandable,
&.collapsable {
h4 {
padding-left: 18px;
font-style: $body-font-size;
font-weight: normal;
padding-left: 18px;
}
}
@@ -103,10 +103,10 @@ div.info-wrapper {
margin: 7px (-(lh(.75))) 0;
li {
padding-left: 18px + lh(.75);
@include box-shadow(inset 0 1px 0 #eee);
border-top: 1px solid #d3d3d3;
border-bottom: 0;
border-top: 1px solid #d3d3d3;
@include box-shadow(inset 0 1px 0 #eee);
padding-left: 18px + lh(.75);
}
}
@@ -116,13 +116,13 @@ div.info-wrapper {
div.hitarea {
background-image: url('/static/images/treeview-default.gif');
width: 100%;
height: 100%;
max-height: 20px;
display: block;
position: absolute;
height: 100%;
left: lh(.75);
margin-left: 0;
max-height: 20px;
position: absolute;
width: 100%;
&:hover {
opacity: 0.6;
@@ -140,27 +140,27 @@ div.info-wrapper {
h3 {
border-bottom: 0;
text-transform: uppercase;
font-weight: bold;
color: #999;
@include box-shadow(none);
color: #999;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
p {
font-size: $body-font-size;
letter-spacing: 0;
margin: 0;
text-transform: none;
letter-spacing: 0;
font-size: $body-font-size;
a {
padding-right: 8px;
&:before {
color: #ccc;
content: "•";
@include inline-block();
padding-right: 8px;
color: #ccc;
}
&:first-child {
@@ -173,10 +173,10 @@ div.info-wrapper {
}
a {
@include transition();
color: lighten($text-color, 10%);
text-decoration: none;
@include inline-block();
text-decoration: none;
@include transition();
&:hover {
color: $mit-red;

40
templates/sass/_profile.scss
View File

@@ -4,14 +4,14 @@ div.profile-wrapper {
section.user-info {
@extend .sidebar;
@include border-radius(0px 4px 4px 0);
border-left: 1px solid #d3d3d3;
@include border-radius(0px 4px 4px 0);
border-right: 0;
header {
padding: lh(.5) lh();
margin: 0 ;
@extend .bottom-border;
margin: 0 ;
padding: lh(.5) lh();
h1 {
font-size: 18px;
@@ -20,12 +20,12 @@ div.profile-wrapper {
}
a {
color: #999;
font-size: 12px;
position: absolute;
top: 13px;
right: lh(.5);
text-transform: uppercase;
font-size: 12px;
color: #999;
top: 13px;
&:hover {
color: #555;
@@ -37,14 +37,14 @@ div.profile-wrapper {
list-style: none;
li {
@include transition();
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
color: lighten($text-color, 10%);
display: block;
text-decoration: none;
@include box-shadow(0 1px 0 #eee);
padding: 7px lh();
border-bottom: 1px solid #d3d3d3;
position: relative;
text-decoration: none;
@include transition();
div#location_sub, div#language_sub {
font-weight: bold;
@@ -57,9 +57,9 @@ div.profile-wrapper {
input {
&[type="text"] {
@include box-sizing(border-box);
margin: lh(.5) 0;
width: 100%;
@include box-sizing(border-box);
}
&[type="input"]{
@@ -80,12 +80,12 @@ div.profile-wrapper {
a.edit-email,
a.name-edit,
a.email-edit {
color: #999;
font-size: 12px;
position: absolute;
top: 9px;
right: lh(.5);
text-transform: uppercase;
font-size: 12px;
color: #999;
top: 9px;
&:hover {
color: #555;
@@ -93,10 +93,10 @@ div.profile-wrapper {
}
p {
color: #999;
font-size: 12px;
margin-bottom: 0;
margin-top: 4px;
color: #999;
}
a.deactivate {
@@ -132,10 +132,10 @@ div.profile-wrapper {
padding: 7px lh();
h2 {
margin-top: 0;
font-weight: bold;
text-transform: uppercase;
font-size: $body-font-size;
font-weight: bold;
margin-top: 0;
text-transform: uppercase;
}
}
}
@@ -148,14 +148,14 @@ div.profile-wrapper {
@extend .clearfix;
h1 {
margin: 0;
float: left;
margin: 0;
}
}
div#grade-detail-graph {
width: 100%;
min-height: 300px;
width: 100%;
}
> ol {

24
templates/sass/_textbook.scss
View File

@@ -3,8 +3,8 @@ div.book-wrapper {
section.book-sidebar {
@extend .sidebar;
@include box-sizing(border-box);
@extend .tran;
@include box-sizing(border-box);
ul#booknav {
font-size: 12px;
@@ -22,14 +22,14 @@ div.book-wrapper {
padding-left: 30px;
div.hitarea {
margin-left: -22px;
background-image: url('/static/images/treeview-default.gif');
margin-left: -22px;
position: relative;
top: 4px;
&:hover {
opacity: 0.6;
filter: alpha(opacity=60);
opacity: 0.6;
}
}
@@ -63,13 +63,13 @@ div.book-wrapper {
li {
&.last {
float: left;
display: block;
float: left;
a {
@include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
border-right: 1px solid darken(#f6efd4, 20%);
border-left: 0;
border-right: 1px solid darken(#f6efd4, 20%);
@include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
}
}
@@ -81,10 +81,10 @@ div.book-wrapper {
}
&.bottom-nav {
margin-top: lh();
margin-bottom: -(lh());
border-bottom: 0;
border-top: 1px solid #EDDFAA;
margin-bottom: -(lh());
margin-top: lh();
}
}
@@ -110,18 +110,18 @@ div.book-wrapper {
}
h2 {
padding: 0;
visibility: hidden;
width: 10px;
padding: 0;
}
}
ul#booknav {
max-height: 100px;
overflow: hidden;
padding: 0;
visibility: hidden;
width: 10px;
padding: 0;
overflow: hidden;
max-height: 100px;
}
}

44
templates/sass/index/_base.scss
View File

@@ -1,44 +0,0 @@
body {
background-color: #fff;
color: #444;
font: $body-font-size $body-font-family;
:focus {
outline-color: #ccc;
}
h1 {
font: 800 24px $header-font-family;
}
li {
margin-bottom: lh();
}
em {
font-style: italic;
}
a {
color: $mit-red;
font-style: italic;
text-decoration: none;
&:hover, &:focus {
color: darken($mit-red, 10%);
}
}
#{$all-text-inputs}, textarea {
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
border: 1px solid #999;
font: $body-font-size $body-font-family;
padding: 4px;
width: 100%;
&:focus {
border-color: $mit-red;
}
}
}

94
templates/sass/index/_extends.scss
View File

@@ -1,94 +0,0 @@
.wrapper {
@include box-sizing(border-box);
margin: 0 auto;
max-width: $fg-max-width;
// min-width: $fg-min-width;
padding: lh();
width: flex-grid(12);
}
.subpage {
@extend .clearfix;
@extend .wrapper;
> div {
padding-left: flex-grid(4) + flex-gutter();
@media screen and (max-width: 940px) {
padding-left: 0;
}
p {
margin-bottom: lh();
line-height: lh();
}
h1 {
margin-bottom: lh(.5);
}
h2 {
font: 18px $header-font-family;
color: #000;
margin-bottom: lh(.5);
}
ul {
list-style: disc outside none;
li {
list-style: disc outside none;
line-height: lh();
}
}
dl {
margin-bottom: lh();
dd {
margin-bottom: lh(.5);
}
}
}
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.button {
@include border-radius(3px);
@include inline-block();
@include transition();
background-color: $mit-red;
border: 1px solid darken($mit-red, 10%);
color: #fff;
margin: lh() 0 lh(.5);
padding: lh(.25) lh(.5);
text-decoration: none;
font-style: normal;
@include box-shadow(inset 0 1px 0 lighten($mit-red, 8%));
-webkit-font-smoothing: antialiased;
&:hover {
background-color: darken($mit-red, 10%);
border-color: darken($mit-red, 20%);
}
span {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
font-style: italic;
}
}
p.ie-warning {
display: block !important;
line-height: 1.3em;
background: yellow;
margin-bottom: lh();
padding: lh();
}

101
templates/sass/index/_footer.scss
View File

@@ -1,101 +0,0 @@
footer {
@extend .wrapper;
@extend .clearfix;
padding-top: 0;
div.footer-wrapper {
border-top: 1px solid #e5e5e5;
padding: lh() 0;
background: url('/static/images/marketing/mit-logo.png') right center no-repeat;
@media screen and (max-width: 780px) {
background-position: left bottom;
padding-bottom: lh(3);
}
a {
color: #888;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: #666;
}
}
p {
@include inline-block();
margin-right: lh();
}
ul {
@include inline-block();
@media screen and (max-width: 780px) {
margin-top: lh();
}
li {
@include inline-block();
margin-bottom: 0;
&:after {
content: ' |';
display: inline;
color: #ccc;
}
&:last-child {
&:after {
content: none;
}
}
}
&.social {
float: right;
margin-right: 60px;
position: relative;
top: -5px;
@media screen and (max-width: 780px) {
float: none;
}
li {
float: left;
margin-right: lh(.5);
&:after {
content: none;
display: none;
}
a {
display: block;
height: 29px;
width: 28px;
text-indent: -9999px;
&:hover {
opacity: .8;
}
}
&.twitter a {
background: url('/static/images/marketing/twitter.png') 0 0 no-repeat;
}
&.facebook a {
background: url('/static/images/marketing/facebook.png') 0 0 no-repeat;
}
&.linkedin a {
background: url('/static/images/marketing/linkedin.png') 0 0 no-repeat;
}
}
}
}
}
}

169
templates/sass/index/_header.scss
View File

@@ -1,169 +0,0 @@
header.announcement {
@include background-size(cover);
background: #333;
border-bottom: 1px solid #000;
color: #fff;
-webkit-font-smoothing: antialiased;
&.home {
background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
}
div {
padding: lh(10) lh() lh(3);
@media screen and (max-width:780px) {
padding: lh(2.5) lh() lh(2);
}
//hide login link for homepage
nav {
h1 {
margin-right: 0;
}
a.login {
display: none;
}
}
}
}
&.course {
background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
@media screen and (min-width: 1200px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
}
@media screen and (max-width: 1199px) and (min-width: 700px) {
background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
}
div {
padding: lh(4) lh() lh(2);
@media screen and (max-width:780px) {
padding: lh(2.5) lh() lh(2);
}
}
}
div {
@extend .wrapper;
position: relative;
nav {
position: absolute;
top: 0;
right: lh();
@include border-radius(0 0 3px 3px);
background: #333;
background: rgba(#000, .7);
padding: lh(.5) lh();
h1 {
@include inline-block();
margin-right: lh(.5);
a {
font: italic 800 18px $header-font-family;
color: #fff;
text-decoration: none;
&:hover, &:focus {
color: #999;
}
}
}
a.login {
text-decoration: none;
color: #fff;
font-size: 12px;
font-style: normal;
font-family: $header-font-family;
&:hover, &:focus {
color: #999;
}
}
}
section {
@extend .clearfix;
background: $mit-red;
@include inline-block();
margin-left: flex-grid(4) + flex-gutter();
padding: lh() lh(1.5);
@media screen and (max-width: 780px) {
margin-left: 0;
}
h1 {
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
@include inline-block();
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
@include inline-block();
line-height: 1.2em;
}
&.course {
section {
float: left;
margin-left: 0;
margin-right: flex-gutter(8);
padding: 0;
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
float: none;
width: 100%;
margin-right: 0;
}
a {
@extend .button;
background-color: darken($mit-red, 20%);
border-color: darken($mit-red, 30%);
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
display: block;
padding: lh(.5) lh();
text-align: center;
&:hover {
background-color: darken($mit-red, 10%);
border-color: darken($mit-red, 20%);
}
}
}
p {
width: flex-grid(4, 8);
line-height: lh();
float: left;
@media screen and (max-width: 780px) {
float: none;
width: 100%;
}
}
}
}
}
}

337
templates/sass/index/_index.scss
View File

@@ -1,337 +0,0 @@
section.index-content {
@extend .wrapper;
@extend .clearfix;
section {
@extend .clearfix;
float: left;
@media screen and (max-width: 780px) {
float: none;
width: auto;
margin-right: 0;
}
h1 {
font-size: 800 24px "Open Sans";
margin-bottom: lh();
}
p {
line-height: lh();
margin-bottom: lh();
}
ul {
margin: 0;
}
&.about {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
@media screen and (max-width: 780px) {
width: 100%;
border-right: 0;
margin-right: 0;
padding-right: 0;
}
section {
@extend .clearfix;
margin-bottom: lh();
p {
width: flex-grid(4, 8);
float: left;
@media screen and (max-width: 780px) {
float: none;
width: auto;
}
&:nth-child(odd) {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
}
&.intro {
section {
margin-bottom: 0;
&.intro-text {
margin-right: flex-gutter(8);
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
margin-right: 0;
width: auto;
}
p {
margin-right: 0;
width: auto;
float: none;
}
}
&.intro-video {
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
width: auto;
}
a {
display: block;
width: 100%;
img {
width: 100%;
}
span {
display: none;
}
}
}
}
}
&.features {
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #888;
margin-bottom: lh();
font-weight: normal;
font-size: 14px;
span {
text-transform: none;
}
}
p {
width: auto;
clear: both;
strong {
font-family: "Open sans";
font-weight: 800;
}
a {
color: $mit-red;
text-decoration: none;
@include transition();
&:hover, &:focus {
color: darken($mit-red, 15%);
}
}
}
ul {
margin-bottom: 0;
li {
line-height: lh();
width: flex-grid(4, 8);
float: left;
margin-bottom: lh(.5);
@media screen and (max-width: 780px) {
width: auto;
float: none;
}
&:nth-child(odd) {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
}
}
}
}
}
&.course, &.staff {
width: flex-grid(4);
@media screen and (max-width: 780px) {
width: auto;
}
h1 {
color: #888;
font: normal $body-font-size $body-font-family;
font-size: 14px;
letter-spacing: 1px;
margin-bottom: lh();
text-transform: uppercase;
}
h2 {
font: 800 24px $header-font-family;
}
h3 {
font: 400 18px $header-font-family;
}
a {
@extend .button;
span.arrow {
color: rgba(#fff, .6);
font-style: normal;
@include inline-block();
padding-left: 10px;
}
}
ul {
list-style: none;
li {
img {
float: left;
margin-right: lh(.5);
}
}
}
}
&.course {
h2 {
padding-top: lh(5);
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
@include background-size(contain);
@media screen and (max-width: 998px) and (min-width: 781px){
background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
}
@media screen and (max-width: 780px) {
padding-top: lh(5);
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
}
@media screen and (min-width: 500px) and (max-width: 781px) {
padding-top: lh(8);
}
}
div.announcement {
p.announcement-button {
a {
margin-top: 0;
}
}
img {
max-width: 100%;
margin-bottom: lh();
}
}
}
// index
//---------------------------------------- //
&.about-course {
@include box-sizing(border-box);
border-right: 1px solid #e5e5e5;
margin-right: flex-gutter();
padding-right: flex-gutter() / 2;
width: flex-grid(8);
@media screen and (max-width: 780px) {
width: auto;
border-right: 0;
margin-right: 0;
padding-right: 0;
}
section {
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
width: auto;
}
&.about-info {
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
}
}
&.requirements {
clear: both;
width: 100%;
border-top: 1px solid #E5E5E5;
padding-top: lh();
margin-bottom: 0;
p {
float: left;
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
@media screen and (max-width: 780px) {
margin-right: 0;
float: none;
width: auto;
}
&:nth-child(odd) {
margin-right: 0;
}
}
}
&.cta {
width: 100%;
text-align: center;
a.enroll {
@extend .button;
padding: lh(.5) lh(2);
@include inline-block();
text-align: center;
font: 800 18px $header-font-family;
}
}
}
}
&.staff {
h1 {
margin-top: lh(1);
}
}
}
}
section.copyright, section.tos, section.privacy-policy, section.honor-code {
@extend .subpage;
}

21
templates/sass/index/_variables.scss
View File

@@ -1,21 +0,0 @@
// Variables
//---------------------------------------- //
// // grid
$fg-column: 60px;
$fg-gutter: 25px;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 781px;
$gw-column: 60px;
$gw-gutter: 25px;
$body-font-family: Georgia, serif;
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
$body-font-size: 16px;
$body-line-height: golden-ratio($body-font-size, 1);
// Colors
$mit-red: #933;
$cream: #F6EFD4;

2
templates/sass/marketing.scss
View File

@@ -2,5 +2,5 @@
@import "base/reset", "base/font-face", "base/functions";
// pages
@import "index/variables", "index/extends", "index/base", "index/header", "index/footer", "index/index";
@import "marketing/variables", "marketing/extends", "marketing/base", "marketing/header", "marketing/footer", "marketing/index";
@import "layout/leanmodal";

1
templates/sass/print.scss
View File

@@ -1 +0,0 @@