feat(nav reorg): reorganize footer and top nav

Author: Eric Jimenez

public/_includes/_footer.jade

@@ -8,16 +8,18 @@ else
   - var styleguide = "/docs/ts/latest/styleguide.html"
 
 .main-footer
-  nav.background-silver.grid-fluid
+  nav.background-blue-grey-900.grid-fluid
 
     .c3.main-footer-branding
       .logo-inverse-large
 
     .c2
-      h3.text-headline LIBRARIES
+      h3.text-headline RESOURCES
 
       ul.text-body
-        li <a href="/"> Angular 2.0</a>
+        li <a href="/presskit.html">Press Kit</a>
+        // TODO: (ericjim) make a libraries page to showcase all angular 2 libraries
+        //li <a href="/libraries.html">Libraries</a>
         li <a href="https://angularjs.org/"> Angular 1 for JS</a>
         li <a href="https://material.angularjs.org"> Angular Material</a>
         li <a href="https://www.firebase.com/docs/web/libraries/angular/"> AngularFire</a>
@@ -26,25 +28,26 @@ else
       h3.text-headline LEARN
 
       ul.text-body
-        li <a href="/docs/ts/latest/quickstart.html"> 5 Min Quickstart</a>
-        li <a href="/docs/ts/latest/guide/"> Step by Step Guide</a>
-        li <a href="/docs/ts/latest/api/"> Full API</a>
-        li <a href="/docs/ts/latest/resources.html"> Resources</a>
-        li <a href="http://goo.gl/sj0Nk1">Design Docs &amp; Notes</a>
+        li <a href="/docs/ts/latest/api/">Docs</a>
+        li <a href="/docs/ts/latest/guide/">Basics</a>
+        li <a href="/docs/ts/latest/resources.html">Videos and Posts</a>
+        //li <a href="http://goo.gl/sj0Nk1">Design Docs &amp; Notes</a>
 
     .c2
       h3.text-headline HELP
 
       ul.text-body
-        li <a href="https://groups.google.com/forum/#!forum/angular"> Google Group</a>
-        li <a href="https://gitter.im/angular/angular"> Chat Room</a>
-        li <a href="https://github.com/angular/angular/issues"> Report an Issue</a>
+        li <a class="main-nav-button" href="/contribute.html"> Contribute</a>
+        li <a href="/support.html">Support Page</a>
+        li <a href="https://github.com/angular/angular/issues"> File a Ticket</a>
+        li <a ng-click="appCtrl.openFeedback()" aria-label="Submit feedback on this page"> Product Feedback</a>
 
     .c3
       h3.text-headline COMMUNITY
 
       ul.text-body
-        li <a href="https://blog.angularjs.org/"> Blog</a>
+        li <a href="/events.html"> Events & Meetups</a>
+        li <a href="https://groups.google.com/forum/#!forum/angular"> Google Group</a>
         li <a href="https://plus.sandbox.google.com/+AngularJS/posts"> Google+</a>
         li <a href="https://twitter.com/angularjs"> Twitter</a>
         li <a href="https://github.com/angular/angular"> GitHub</a>

public/_includes/_hero-home.jade

@@ -3,8 +3,7 @@ header(class="background-sky")
     h1.text-headline.hero-logo #{title}<br>#{subtitle}
 
     .hero-cta
-      a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain"
-      md-button) Get Started
+      a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
 
 .banner.is-centered
   .banner-ng-annoucement

public/_includes/_main-nav.jade

@@ -10,9 +10,7 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-off
     ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
       li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
       li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>Docs</a>
-      li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>
-      li.l-left <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
-      li.l-left <a class="main-nav-button" href="/support.html" md-button>Support</a>
-      li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
       li.l-left <a class="main-nav-button" href="/events.html" md-button>Events</a>
-      li.l-right.feedback-button <md-button ng-click="appCtrl.openFeedback()" class="md-icon-button top-nav-icon" aria-label="Submit feedback on this page"><span class="material-icons">feedback</span></md-button>
+      li.l-left <a class="main-nav-button" href="/news.html" md-button>Blog</a>
+      li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>
+      li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>Get Started</a>

public/resources/css/_theme.scss

@@ -30,6 +30,10 @@
   color: $snow;
 }
 
+.background-blue-grey-900 {
+  background: #263238;
+  color: $snow;
+}
 
 /*
 * Background Images

public/resources/css/module/_footer.scss

@@ -9,6 +9,10 @@
 
 .main-footer {
   nav {
+    h3 {
+      font-size: 21px;
+    }
+
     padding: $unit * 6;
 
     @media handheld and (max-width: $phone-breakpoint),
@@ -63,7 +67,6 @@
         display: block;
         text-decoration: none;
         padding: 0px ($unit * 2);
-        background: $steel;
         margin-bottom: $unit;
         border-radius: 3px;
         line-height: $unit * 5;

public/resources/css/module/_main-nav.scss

@@ -56,7 +56,8 @@
     .main-nav-button {
       @media handheld and (max-width: $phone-breakpoint),
       screen and (max-device-width: $phone-breakpoint),
-      screen and (max-width: $tablet-breakpoint) {
+      screen and (max-width: $tablet-breakpoint),
+      screen and (max-width: 960px) {
         display: block;
         float: none;
         line-height: $unit * 6;
@@ -75,9 +76,11 @@
       }
     }
 
+    // Make main nav icons disappear in favor of site map menu
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
+    screen and (max-width: $tablet-breakpoint),
+    screen and (max-width: 960px) {
       box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
       float: none;
       position: absolute;
@@ -146,9 +149,11 @@
       opacity: .56;
     }
 
+    // Show sitemap menu
     @media handheld and (max-width: $phone-breakpoint),
     screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
+    screen and (max-width: $tablet-breakpoint),
+    screen and (max-width: 960px) {
       display: inline-block;
     }
   }