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