From 92afb78c54c2f8afee2594f0bb68c302f9bd2003 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Fri, 17 Feb 2012 13:43:04 -0500 Subject: [PATCH] Mobile styles --- marketing.html | 2 +- mitx_global.html | 2 +- sass/.DS_Store | Bin 6148 -> 6148 bytes sass/base/_functions.scss | 1 - sass/index/_extends.scss | 2 +- sass/index/_header.scss | 39 ++++++++++++--- sass/index/_index.scss | 98 +++++++++++++++++++++++++++++++++++-- sass/index/_variables.scss | 12 +---- sass/layout/_header.scss | 34 ++++++------- 9 files changed, 147 insertions(+), 43 deletions(-) diff --git a/marketing.html b/marketing.html index b4eb29c3ea..74b3bd6651 100644 --- a/marketing.html +++ b/marketing.html @@ -9,7 +9,7 @@ - + diff --git a/mitx_global.html b/mitx_global.html index 4a1a6be900..9c4e6402c7 100644 --- a/mitx_global.html +++ b/mitx_global.html @@ -40,7 +40,7 @@

- More information & Enroll + More information & Enroll ‣

Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT’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 MITx.

diff --git a/sass/.DS_Store b/sass/.DS_Store index 108b7e7ea066ae42c27720e922c2616a0145f20e..5b92100c38020a1f6e2a3bb931cae1850ae843c3 100644 GIT binary patch delta 145 zcmZoMXfc=|#>B)qu~2NHo+2aj#DLw4m>3zEC-X4A5NBn`WXNMkVMt}DNGdNbNXp4i zVqjp{FjA@+R((rKu5vC*rK+Ulaqr}pp!#XNzcY3B(b)x uzM*mQHb!~I=FJ}&eONZLbMSKjEd+ADGf(ChvE*Q6U;rWphRp#YTbKdPoh1MO delta 69 zcmZoMXfc=|#>B`mu~2NHo+2aD#DLwC4MbQb^D{l&e3aRVW%C8*i;SDuIruq%iZ&l) Y{?0s^U&NAw0SFiw7??H(h-_g70J^^tO8@`> diff --git a/sass/base/_functions.scss b/sass/base/_functions.scss index 429c202226..2c4195d41b 100644 --- a/sass/base/_functions.scss +++ b/sass/base/_functions.scss @@ -20,4 +20,3 @@ @function lh($amount: 1) { @return $body-line-height * $amount; } - diff --git a/sass/index/_extends.scss b/sass/index/_extends.scss index 47f16352ad..eaeb34a9e8 100644 --- a/sass/index/_extends.scss +++ b/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); } diff --git a/sass/index/_header.scss b/sass/index/_header.scss index e5e8a12cdd..4cfe1578b5 100644 --- a/sass/index/_header.scss +++ b/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%; + } } } } diff --git a/sass/index/_index.scss b/sass/index/_index.scss index b24eee663e..3fbae44b67 100644 --- a/sass/index/_index.scss +++ b/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); + } + } } } diff --git a/sass/index/_variables.scss b/sass/index/_variables.scss index 7f3deac55e..6d9730b9db 100644 --- a/sass/index/_variables.scss +++ b/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; diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss index 952187a50c..beaf1b2e45 100644 --- a/sass/layout/_header.scss +++ b/sass/layout/_header.scss @@ -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 {