more fixes

public/_includes/_head-include.jade

@@ -34,7 +34,7 @@ meta(itemprop="description" content="#{description}")
 meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png")
 
 link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico")
-link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css")
+link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css")
 link(href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css')
 link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")
 link(rel="stylesheet" href="/resources/css/main.css")

public/_includes/_scripts-include.jade

@@ -9,7 +9,7 @@ script(src="/resources/js/vendor/jquery.js")
 script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js")
 script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js")
 script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js")
-script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js")
+script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
 
 
 

public/docs/js/latest/api.jade

@@ -0,0 +1,18 @@
+.l-main-section
+
+  .callout.is-helpful
+    header Developer Preview
+    p.
+      The Angular 2.0 API is currently in active development and not production ready.
+      This page will showcase a preview of proposed methods to help further the discussion
+      in the development community. If you're building a production app today, please
+      <a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
+
+number = 1;
+ul
+  for page, slug in public.docs[current.path[1]][current.path[2]].api._data
+    url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
+    num = number++
+
+    li.c8
+      != partial("../../../_includes/_hover-card", { number: num, name: page.title, url: url })

public/docs/js/latest/guide/setup.jade

@@ -90,39 +90,44 @@
     <code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
     it all off like this:
 
-  pre.prettyprint.lang-javascript
+  .code-box
-    code.
+    nav.code-box-nav
-      //ES5
+      a(href="#")
-      function AppComponent() {}
 
-      AppComponent.annotations = [
+      pre.prettyprint.lang-javascript
-        new angular.Component({
+        code.
-          selector: 'my-app'
+          //ES5
-        }),
+          function AppComponent() {}
-        new angular.View({
-          template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
-        })
-      ];
 
-      document.addEventListener('DOMContentLoaded', function() {
+          AppComponent.annotations = [
-        angular.bootstrap(AppComponent);
+            new angular.Component({
-      });
+              selector: 'my-app'
+            }),
+            new angular.View({
+              template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
+            })
+          ];
 
-  pre.prettyprint.lang-typescript
+          document.addEventListener('DOMContentLoaded', function() {
-    code.
+            angular.bootstrap(AppComponent);
-      //TypeScript
+          });
-      import {Component, View, bootstrap} from 'angular2/angular2';
 
-      @Component({
+      pre.prettyprint.lang-typescript
-        selector: 'my-app'
+        code.
-      })
+          //TypeScript
-      @View({
+          import {Component, View, bootstrap} from 'angular2/angular2';
-        template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
+
-      })
+          @Component({
-      class AppComponent {
+            selector: 'my-app'
-      }
+          })
+          @View({
+            template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
+          })
+          class AppComponent {
+          }
+
+          bootstrap(AppComponent);
 
-      bootstrap(AppComponent);
 
 .l-main-section
   h2#section-run-it Run it!

public/resources/css/base/_type.scss

@@ -19,7 +19,8 @@ code {
   border-radius: 2px;
   font-family: $mono-font;
   color: $metal;
-  padding: 0px 2px;
+  padding: 0px 4px;
+  font-size: 90%;
 }
 
 .text-center {

public/resources/css/main.scss

@@ -27,6 +27,7 @@
 @import 'module/buttons';
 @import 'module/table';
 @import 'module/code';
+@import 'module/code-box';
 @import 'module/sticker';
 @import 'module/bio-card';
 @import 'module/overlay';

public/resources/css/module/_code-box.scss

@@ -0,0 +1,11 @@
+.code-box {
+  header {
+
+  }
+
+  nav {
+    a {
+
+    }
+  }
+}

public/resources/css/module/_dropdown.scss

@@ -56,6 +56,7 @@
       text-align: left;
       font-weight: 400;
       text-transform: uppercase;
+      color: $metal;
     }
   }
 }

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

@@ -114,6 +114,7 @@
         position: relative;
         text-decoration: none;
         display: block;
+        text-transform: uppercase;
       }
 
       .side-nav-icon {

public/resources/js/site.js

@@ -85,6 +85,17 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
     }
   };
 
+  /*
+  * Code Formatting
+  *
+  */
+
+  $scope.language = 'es5';
+
+  // TOGGLE CODE LANGUAGE
+  $scope.toggleCodeLanguage = function(event) {
+    $scope.showMenu = !$scope.showMenu;
+  };
 
   var $codeBoxes = $('pre');
   if($codeBoxes.length) {