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

Mobile styles

Browse Source
This commit is contained in:
Kyle Fiedler
2012-02-17 13:43:04 -05:00
parent d0418f216e
commit 92afb78c54
9 changed files with 147 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
marketing.html
View File

@@ -9,7 +9,7 @@
<!--link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" /-->
<link rel="stylesheet" href="/static/css/marketing.css" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--[if lt IE 8]>
<link rel="stylesheet" href="/static/css/marketing-ie.css" type="text/css" media="all" />
<![endif]-->

2
mitx_global.html
View File

@@ -40,7 +40,7 @@
</hgroup>
<p>
<a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll</a>
<a href="http://6002x.mitx.mit.edu/" class="more-info">More information <span>&amp;</span> Enroll <span class="arrow">&#8227;</span></a>
</p>
<p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 5, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>

BIN
sass/.DS_Store vendored
View File

Binary file not shown.

1
sass/base/_functions.scss
View File

@@ -20,4 +20,3 @@
@function lh($amount: 1) {
@return $body-line-height * $amount;
}

2
sass/index/_extends.scss
View File

@@ -2,7 +2,7 @@
@include box-sizing(border-box);
margin: 0 auto;
max-width: $fg-max-width;
min-width: $fg-min-width;
// min-width: $fg-min-width;
padding: lh();
width: flex-grid(12);
}

39
sass/index/_header.scss
View File

@@ -15,6 +15,10 @@ header.announcement {
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 {
@@ -41,7 +45,12 @@ header.announcement {
div {
padding: lh(4) lh() lh(2);
@media screen and (max-width:780px) {
padding: lh(2.5) lh() lh(2);
}
}
}
div {
@@ -61,6 +70,7 @@ header.announcement {
@include inline-block();
margin-right: lh(.5);
a {
font: italic 800 18px $header-font-family;
color: #fff;
@@ -87,43 +97,53 @@ header.announcement {
section {
@extend .clearfix;
@include inline-block();
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 {
@include inline-block();
font-family: "Open Sans";
font-size: 30px;
font-weight: 800;
@include inline-block();
line-height: 1.2em;
margin: 0 lh() 0 0;
}
h2 {
@include inline-block();
font-family: "Open Sans";
font-size: 24px;
font-weight: 400;
@include inline-block();
line-height: 1.2em;
}
&.course {
section {
width: flex-grid(4, 8);
margin-right: flex-gutter(8);
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;
@include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
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();
border-color: darken($mit-red, 30%);
text-align: center;
&:hover {
@@ -137,6 +157,11 @@ header.announcement {
width: flex-grid(4, 8);
line-height: lh();
float: left;
@media screen and (max-width: 780px) {
float: none;
width: 100%;
}
}
}
}

98
sass/index/_index.scss
View File

@@ -6,6 +6,12 @@ section.index-content {
@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();
@@ -27,6 +33,13 @@ section.index-content {
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();
@@ -35,8 +48,17 @@ section.index-content {
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;
}
}
}
@@ -48,6 +70,11 @@ section.index-content {
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;
@@ -58,6 +85,10 @@ section.index-content {
&.intro-video {
width: flex-grid(4, 8);
@media screen and (max-width: 780px) {
width: auto;
}
a {
display: block;
width: 100%;
@@ -82,11 +113,14 @@ section.index-content {
h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
color: #888;
margin-bottom: lh();
font-weight: normal;
font-size: 14px;
span {
text-transform: none;
}
}
@@ -119,8 +153,17 @@ section.index-content {
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;
}
}
}
}
@@ -131,12 +174,17 @@ section.index-content {
&.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;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
color: #666;
margin-bottom: lh();
text-transform: uppercase;
}
h2 {
@@ -149,6 +197,13 @@ section.index-content {
a {
@extend .button;
span.arrow {
color: rgba(#fff, .6);
font-style: normal;
@include inline-block();
padding-left: 10px;
}
}
ul {
@@ -169,9 +224,18 @@ section.index-content {
background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
@include background-size(contain);
@media screen and (max-width: 998px) {
@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);
}
}
}
@@ -185,12 +249,26 @@ section.index-content {
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 {
@@ -205,6 +283,12 @@ section.index-content {
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;
}
@@ -225,6 +309,12 @@ section.index-content {
}
}
}
&.staff {
h1 {
margin-top: lh(1);
}
}
}
}

12
sass/index/_variables.scss
View File

@@ -5,7 +5,7 @@ $fg-column: 60px;
$fg-gutter: 25px;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
$fg-min-width: 781px;
$gw-column: 60px;
$gw-gutter: 25px;
@@ -14,17 +14,7 @@ $body-font-family: Georgia, serif;
$header-font-family: "Open Sans", Helvetica, Arial, sans-serif;
$body-font-size: 16px;
// @media screen and (min-width:1200px) {
// $body-font-size: 18px;
// }
// @media screen and (max-width:890px) {
// $body-font-size: 14px;
// }
$body-line-height: golden-ratio($body-font-size, 1);
$lh: golden-ratio($body-font-size, 1);
// Colors
$mit-red: #933;

34
sass/layout/_header.scss
View File

@@ -1,7 +1,7 @@
div.header-wrapper {
@include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
background: $mit-red;
border-bottom: 1px solid #fff;
@include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
header {
@extend .clearfix;
@@ -12,14 +12,14 @@ div.header-wrapper {
hgroup {
@extend .clearfix;
float: left;
padding-top: 13px;
min-width: flex-grid(3);
padding-top: 13px;
h1 {
@include inline-block();
color: darken($mit-red, 25%);
font-size: 18px;
font-weight: 800;
@include inline-block();
line-height: lh();
margin: 0;
padding: 0 lh(.5) 0 0;
@@ -37,13 +37,13 @@ div.header-wrapper {
}
h2 {
@include inline-block();
margin: 0;
font-size: 16px;
padding: 0 lh() 0px 0;
text-transform: none;
@include inline-block();
letter-spacing: 0;
margin: 0;
padding: 0 lh() 0px 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
text-transform: none;
-webkit-font-smoothing: antialiased;
a {
@@ -62,29 +62,29 @@ div.header-wrapper {
float: none;
h1 {
float: left;
border: 0;
float: left;
}
h2 {
float: left;
border: 0;
float: left;
margin-right: 0;
}
}
}
nav {
-webkit-font-smoothing: antialiased;
@include border-radius(3px 3px 0 0);
@include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
background: #501016;
border-bottom: 1px solid darken(#501016, 10%);
@include border-radius(3px 3px 0 0);
@include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
display: block;
float: left;
margin: 5px 0 0;
padding: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
-webkit-font-smoothing: antialiased;
ul {
@extend .clearfix;
@@ -97,10 +97,10 @@ div.header-wrapper {
a {
color: #fff;
text-decoration: none;
padding: 10px lh() 8px;
display: block;
font-weight: bold;
padding: 10px lh() 8px;
text-decoration: none;
@media screen and (max-width: 1020px) {
padding: 10px lh(.7) 8px;
@@ -130,12 +130,12 @@ div.header-wrapper {
.active {
background: #F4F4F4;
color: #333;
text-shadow: 0 1px 0 #fff;
border: 1px solid darken(#501016, 10%);
border-bottom: 0;
@include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
@include border-radius(3px 3px 0 0);
@include box-shadow(0 2px 0 #f4f4f4, inset 0 1px 0 #fff);
color: #333;
text-shadow: 0 1px 0 #fff;
}
&.courseware {