From 8dff8a8b6a0faab1cc3ef6fc475276911024a3fc Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Wed, 4 Mar 2015 07:13:59 -0800 Subject: [PATCH] mobile styles initial --- public/_includes/_main-nav.jade | 10 +-- public/resources/css/_options.scss | 85 ++++++++++------------ public/resources/css/module/_dropdown.scss | 3 +- public/resources/css/module/_hero.scss | 42 ++++++++++- public/resources/css/module/_top-nav.scss | 42 +++++++++-- 5 files changed, 125 insertions(+), 57 deletions(-) diff --git a/public/_includes/_main-nav.jade b/public/_includes/_main-nav.jade index 073980f87f..0cc5b680c1 100644 --- a/public/_includes/_main-nav.jade +++ b/public/_includes/_main-nav.jade @@ -3,8 +3,8 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5") h1 Angular by Google ul - li Features - li Docs - li About - li Contribute - a(class="cta main-nav-button has-icon" href="/download/" md-button) Download \ No newline at end of file + li.l-left Features + li.l-left Docs + li.l-left About + li.l-left Contribute + li.l-right Download \ No newline at end of file diff --git a/public/resources/css/_options.scss b/public/resources/css/_options.scss index 442ace0505..b6d6660d56 100644 --- a/public/resources/css/_options.scss +++ b/public/resources/css/_options.scss @@ -1,3 +1,42 @@ +/* +* Typography +* +* Only the fonts listed below should be used throughout the site. +*/ + +$brand-font: 'Roboto', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; +$mono-font: Monaco, "Lucida Console", monospace; + + +/* +* Metrics +* +* Metrics based on material design 8pt unit +*/ + +$unit: 8px; +$phone-breakpoint: 480px; +$tablet-breakpoint: 900px; + + +/* +* Layer Stacking +* +* The approved range that can be used for layering (z-indexes) +*/ + +$layer-1: 1; +$layer-2: 2; +$layer-3: 3; +$layer-4: 4; +$layer-5: 5; +$layer-6: 6; +$layer-7: 7; +$layer-8: 8; +$layer-9: 9; +$layer-10: 10; + + /* * Colors * @@ -44,48 +83,4 @@ $tin: #8FA4AE; $cloud: #AFBEC5; $fog: #CFD8DC; $mist: #ECEFF1; -$snow: #FFFFFF; - - -/* -* Typography -* -* Only the fonts listed below should be used throughout the site. -*/ - -$brand-font: 'Roboto', "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -$mono-font: Monaco, "Lucida Console", monospace; - - -/* -* Metrics -* -* Metrics based on material design 8pt unit -*/ - -$unit: 8px; - - -/* -* Layer Stacking -* -* The approved range that can be used for layering (z-indexes) -*/ - -$layer-1: 1; -$layer-2: 2; -$layer-3: 3; -$layer-4: 4; -$layer-5: 5; -$layer-6: 6; -$layer-7: 7; -$layer-8: 8; -$layer-9: 9; -$layer-10: 10; - - - - - - - +$snow: #FFFFFF; \ No newline at end of file diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss index c2d957bfa7..12594469f0 100644 --- a/public/resources/css/module/_dropdown.scss +++ b/public/resources/css/module/_dropdown.scss @@ -32,7 +32,8 @@ ul { list-style-type: none; - margin: 0px 0px ($unit * 2) 0px; + border-bottom: 1px solid $fog; + margin: 0px; padding: 0px; &:last-child { diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index 17fec037f6..4796c210a7 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -5,20 +5,44 @@ $hero-padding: $unit * 2; padding: $hero-padding; height: 192px; + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + height: auto; + } + &.is-large { height: 478px; text-align: center; + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + height: auto; + } } .hero-title { text-transform: uppercase; margin: ($unit * 9) 0px 0px ($unit * 10); opacity: .87; + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + margin: ($unit * 6) 0px 0px 0px; + } } .hero-subtitle { margin: 0px 0px 0px ($unit * 10); opacity: .87; + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + margin: 0px; + } } // LARGE SHEILD LOGO @@ -29,6 +53,16 @@ $hero-padding: $unit * 2; width: $unit * 70; margin: ($unit * 3) auto ($unit * 5) auto; font-weight: 400; + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + width: auto; + font-size: 20px; + line-height: 28px; + margin: ($unit * 2) auto; + padding-top: 208px; + } } // CTA BUTTONS @@ -43,6 +77,13 @@ $hero-padding: $unit * 2; right: $unit * 3; z-index: $layer-1; + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + right: auto; + left: 0; + } + button { color: $snow; opacity: .56; @@ -55,5 +96,4 @@ $hero-padding: $unit * 2; outline: none; } } - } \ No newline at end of file diff --git a/public/resources/css/module/_top-nav.scss b/public/resources/css/module/_top-nav.scss index 49512affcd..f24e37dd7b 100644 --- a/public/resources/css/module/_top-nav.scss +++ b/public/resources/css/module/_top-nav.scss @@ -25,11 +25,27 @@ list-style-type: none; margin: 0px; padding: 0px; - float: left; li { margin: 0px 0px 0px 0px; - display: inline; + } + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + box-shadow: 0px 2px 5px rgba(0, 0, 0, .3); + float: none; + position: absolute; + top: 0px; + right: $unit; + z-index: $layer-1; + background: $regal; + display: none; + + li { + display: block; + float: none; + } } } @@ -61,9 +77,25 @@ left: ($unit * 2); z-index: $layer-1; } - } - .cta { - float: right; + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + display: block; + float: none; + line-height: $unit * 6; + text-align: left; + font-size: 14px; + padding: 0px ($unit * 4); + + &.has-icon { + padding: 0px ($unit * 4); + position: static; + } + + .icon { + display: none; + } + } } } \ No newline at end of file