mobile styles initial

public/_includes/_main-nav.jade

@@ -3,8 +3,8 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
     h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
 
     ul
-      li <a class="main-nav-button" href="/features.html" md-button>Features</a>
+      li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
-      li <a class="main-nav-button" href="/docs/js/latest/" md-button>Docs</a>
+      li.l-left <a class="main-nav-button" href="/docs/js/latest/" md-button>Docs</a>
-      li <a class="main-nav-button" href="/about/" md-button>About</a>
+      li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>
-      li <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
+      li.l-left <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
-    a(class="cta main-nav-button has-icon" href="/download/" md-button)  <span class="icon icon-cloud-download"></span> Download
+      li.l-right <a class="main-nav-button has-icon" href="/download/" md-button> <span class="icon icon-cloud-download"></span> Download</a>

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
 *
@@ -45,47 +84,3 @@ $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;
-
-
-
-
-
-
-

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 {

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;
     }
   }
-
 }

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;
     }
+
+    @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;
       }
 
-  .cta {
+      .icon {
-    float: right;
+        display: none;
+      }
+    }
   }
 }