design(style): Restyle changes from Alex

Author: alexwolfe

package.json

@@ -77,4 +77,4 @@
     "jstransformer-marked": "^1.0.1"
   },
   "homepage": "http://angular.io/"
-}
+}

public/_data.json

@@ -2,7 +2,7 @@
   "index": {
     "hero": "home",
     "title": "One framework.",
-    "subtitle": "Mobile and desktop."
+    "subtitle": "Mobile & desktop."
   },
 
   "features": {

public/_includes/_footer.jade

@@ -8,7 +8,7 @@ else
   - var styleguide = "/docs/ts/latest/styleguide.html"
 
 .main-footer
-  nav.background-blue-grey-900.grid-fluid
+  nav.background-midnight.grid-fluid
 
     .c3.main-footer-branding
       .logo-inverse-large
@@ -51,7 +51,7 @@ else
       ul.text-body
         li <a href="https://angular.cn/">中文版</a>
 
-  footer(class="background-steel")
+  footer(class="background-midnight")
     small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button)
+    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow")
       span.icon-favorite

public/_includes/_hero-home.jade

@@ -1,13 +1,17 @@
-header(class="background-sky")
-  .hero.background-superhero-paper.is-large
-    h1.text-headline.hero-logo #{title}<br>#{subtitle}
+header(class="background-sky l-relative")
 
-    .hero-cta
-      a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
+    .hero.background-superhero-paper.is-large
+        img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
+        h1.text-headline #{title}<br>#{subtitle}
+        a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started
 
-  .banner.banner-floaty
-    .banner-ng-annoucement
-      div(class="banner-text" align="center")
-        p Join us for ng-europe in Paris, France this October!
-      div(class="banner-button")
+    .announcement-bar.shadow-2.clearfix
+        img(src="/resources/images/logos/ng-europe/ng-europe-logo.png")
+        p Join us for <strong>ng-europe in Paris</strong>, France this October!
         a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now
+
+    //- ANGULAR FINAL RELEASE ANNOUCEMENT
+    //- .announcement-bar.shadow-2.clearfix
+    //-   img(src="/resources/images/logos/angular2/angular.svg")
+    //-   p Angular 2.0 Final Release Now Live!
+    //-   a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Learn More

public/_includes/_hero.jade

@@ -13,30 +13,27 @@
 if current.path[4] && current.path[3] == 'api'
   - var textFormat = 'is-standard-case'
 
-header(class="hero background-sky", style=fixHeroCss ? "height:auto" : "")
-  div(class="inner-header")
-    h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
-    if useBadges
-    span(class="badges")
-      if docType
-        span(class="status-badge").
-          #{renamer(capitalize(docType))}
-      if stability
-        span(layout="row" class="status-badge")
-          // badge circle is filled based on stability by matching a css selector in _hero.scss
-          span(class="status-circle status-#{stability}")
-          span Stability: #{capitalize(stability)}
-      if security
-        span(class="status-badge security-risk-badge").
-          Security Risk
+header.hero.background-sky
+  h1(class="hero-title #{textFormat}") #{headerTitle}
+
+  if useBadges
+    if stability
+      span(class="badge is-#{stability}").
+        #{capitalize(stability)}
+    if security
+      span(class="badge is-deprecated").
+        Security Risk
+
+  //CLEAR FLOAT ELEMENTS
+  .clear
 
   if subtitle
-    h2.hero-subtitle.text-subhead #{subtitle}
-
-  else if current.path[3] == 'api' && current.path[1] == 'dart'
-    block breadcrumbs
-    //- Show cross-language menu for top-level API page (but not entry pages)
-    if ! public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
-      != partial("_version-dropdown")
-  else if current.path[0] == "docs"
-    != partial("_version-dropdown")
+    h2.hero-subtitle #{subtitle}
+
+  else if docType
+    h2.hero-subtitle #{renamer(capitalize(docType))}
+
+
+if current.path[3] == 'api' && current.path[1] == 'dart'
+  block breadcrumbs
+

public/_includes/_main-nav.jade

@@ -1,15 +1,14 @@
 - var language = current.path[1] || 'ts'
 - if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; }
 
-md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-offset-element)
-  nav
-    h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
+nav.main-nav.l-pinned-top.l-layer-5
+  h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
 
-    button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
+  button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
 
-    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="/events.html" md-button>Events</a>
-      li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
-      li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>Get Started</a>
+  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="/events.html" md-button>Events</a>
+    li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
+    li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>Get Started</a>

public/_includes/_util-fns.jade

@@ -83,14 +83,14 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
   - var format = attributes.format || defaultFormat;
   - if (attributes.format === '.') format = '';
   - var avoid = !!attributes.avoid;
+  - var avoidClass = avoid ? 'is-anti-pattern' : '';
 
-  if (title)
-    if (avoid)
-      .example-title.avoid AVOID: #{title}
-    else
-      .example-title #{title}
-  code-example(language="#{language}" format="#{format}")
-    != styleString(frag, stylePatterns)
+  div(class="code-example #{avoidClass}")
+    if (title)
+      header
+        h4 #{title}
+    code-example(language="#{language}" format="#{format}")
+      != styleString(frag, stylePatterns)
 
 //- Like makeExample, but: (1) doesn't show line numbers. (2) If region
 //- is omitted and title is 'foo (r)' then region is taken as 'r'.
@@ -142,17 +142,17 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
   - var json = unescapeHtml(frag);
   - var jsonExtract = extractJson(json, jsonConfig);
   - var avoid = !!attributes.avoid;
-
-  if (title)
-    if (avoid)
-      .example-title.avoid #{title}
-    else
-      .example-title #{title}
-  code-example(language="#{language}" format="#{format}")
-    if (jsonExtract == 'ERROR')
-      err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
-    else
-      != styleString(jsonExtract, stylePatterns)
+  - var avoidClass = avoid ? 'is-anti-pattern' : '';
+
+  div(class="code-example #{avoidClass}")
+    if (title)
+      header
+        h4 #{title}
+    code-example(language="#{language}" format="#{format}")
+      if (jsonExtract == 'ERROR')
+        err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
+      else
+        != styleString(jsonExtract, stylePatterns)
 
 if !jade2ng
   //- Open (and close) an explanation <div>. See QuickStart

public/_includes/_version-dropdown.jade

@@ -35,11 +35,10 @@ else if current.path[3]
 
 //- VERSION TREE CREATOR MIXIN
 mixin tree(directory, urlPrefix, name, latest)
-  ul
-    for val, semvar in directory
-      if semvar !== '.git' && semvar !== '_data'
-        - var libVersion = (semvar == "latest") ?  latest : semvar.replace(/\_+/gm, ".")
-        li <a href="#{urlPrefix}/#{semvar}/#{page}" md-button>#{name} #{libVersion}</a>
+  for val, semvar in directory
+    if semvar !== '.git' && semvar !== '_data'
+      - var libVersion = (semvar == "latest") ?  latest : semvar.replace(/\_+/gm, ".")
+      li <a href="#{urlPrefix}/#{semvar}/#{page}" md-button>#{name} #{libVersion}</a>
 
 
 //- BUTTON TITLE GENERATION
@@ -69,7 +68,7 @@ nav.dropdown
   div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")
 
   <!-- DROPDOWN MENU -->
-  div(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
+  ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
     mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript")
     mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript")
     //- Disable cross-language link for API entry pages (but keep for top API search page):

public/docs/_includes/_side-nav.jade

@@ -40,76 +40,98 @@
 - var reference  = sections('', function(item) { return item.reference; });
 - var anyItemSelected = function(items) {
 -   var selectedCount = items.filter(function(item) { return !!item.class; }).length;
--   return selectedCount > 0 ? 'is-nav-title-selected' : '';
+-   return selectedCount > 0 ? 'is-selected' : '';
 - }
 - var isQuickstartSelected = function() {
 -   var splitted = cur.split('/');
 -   var bit = splitted[splitted.length - 1].replace('.html', '');
--   return bit === 'quickstart' ? 'is-nav-title-selected' : '';
+-   return bit === 'quickstart' ? 'is-selected' : '';
 -}
 - var isApiReferenceSelected = function() {
 -   var splitted = cur.split('/');
 -   var bit = splitted[splitted.length - 2];
--   return bit === 'api' ? 'is-nav-title-selected' : '';
+-   return bit === 'api' ? 'is-selected' : '';
 -}
 - var isCollapsed = function(titleStyle) {
--   return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden';
+-   return titleStyle === 'is-selected' ? '' : 'is-hidden';
 - }
 
-nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
+- var language = current.path[1] || 'ts'
+- if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; }
+
+
+nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav"  ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
   // SEARCH BAR
-  header.side-nav-search.st-input-wrapper
+  header.sidenav-search.st-input-wrapper
     form.st-input-inner
       label(for="search-io" class="is-hidden") Search Docs
       input(type="search" id="search-io" placeholder="SEARCH DOCS...")
     button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>
 
-  div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
-    .nav-blocks
+  ul(class="sidenav-links")
+    li.sidenav-section.no-border
+      a(class="nav-title" href="/docs/#{current.path[1]}/latest/") Docs Home
+
+    // CORE DOCUMENTATION
+    li.sidenav-section-divider
+      h3 Core Documentation
+
+    li.sidenav-section
       a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart
 
-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
-        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
-      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
-        ul
-          each item, index in tutorial
-            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
 
-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Guide
         img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
 
       .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}")
         ul
           each item, index in basics
             li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
+    li.sidenav-section.no-border
+      a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference
+
+    // ADVANCED DOCUMENATION
+    li.sidenav-section-divider
+      h3 Additional Documentation
+
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
+      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
+        ul
+          each item, index in tutorial
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
 
-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Advanced Documentation
         img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
 
       .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}")
         ul
           each item in guide
             li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
         img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
 
       .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}")
         ul
           each item in cookbook
             li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}
 
-    .nav-blocks
-      a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference
+
+
+
+  if current.path[0] == "docs"
+    != partial("../../_includes/_version-dropdown")
+
 
 script.
   // Could put in appCtrl but only needed here and clear here
   (function scrollToSelectedLink() {
-    var sideNav = document.getElementsByClassName('side-nav')[0];
+    var sideNav = document.getElementsByClassName('sidenav')[0];
     var link = sideNav.getElementsByClassName('is-selected')[0];
     if(link && link.offsetTop > window.innerHeight){
       sideNav.scrollTop = link.offsetTop - (window.innerHeight/2);

public/docs/_layout.jade

@@ -29,12 +29,9 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
           != yield
       else
         article(class="l-content-small grid-fluid docs-content")
-          div(class="c10")
-            .showcase
-              .showcase-content
-                != yield
-                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-                    != partial("../_includes/_next-item")
+          != yield
+            if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+              != partial("../_includes/_next-item")
 
     != partial("../_includes/_footer")
     != partial("../_includes/_scripts-include")