Skip to content

E
edx-platform
Commit 92afb78c by Kyle Fiedler
Options

Mobile styles

parent d0418f21
Showing with 146 additions and 42 deletions
marketing.html
......@@ -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]-->
......
mitx_global.html
......@@ -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>
......
sass/.DS_Store
No preview for this file type
sass/base/_functions.scss
......@@ -20,4 +20,3 @@
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
sass/index/_extends.scss
......@@ -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);
}
......
sass/index/_header.scss
......@@ -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%;
}
}
}
}
......
sass/index/_index.scss
......@@ -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);
}
}
}
}
......
sass/index/_variables.scss
......@@ -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;
......
sass/layout/_header.scss
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 {
font-size: 16px;
@include inline-block();
letter-spacing: 0;
margin: 0;
font-size: 16px;
padding: 0 lh() 0px 0;
text-transform: none;
letter-spacing: 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 {
......
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