- 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 108b7e7ea0..5b92100c38 100644 Binary files a/sass/.DS_Store and b/sass/.DS_Store differ 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 {