fix(aio): style mods and content udpates (#16138)

Fixed capitalization in sidenav menu items
Add min height property to sidenav-content for better viewing on short pages or high resolution screens
Add dividier between change log items as before to h2
Table adjustments to reduce off-screen items
Update home page banner text and icon change, and fix banner img and mobile alignment
Fix and add links in doc landing page and change card footer text to reflect correct name
Removed docs landing page to rebase with master

PR Close #16138

aio/content/guide/browser-support.md

@@ -44,7 +44,7 @@ Angular supports most recent browsers. This includes the following specific vers
     </th>
 
     <th>
-      IE mobile
+      IE Mobile
     </th>
 
   </tr>
@@ -251,11 +251,11 @@ These are the polyfills required to run an Angular application on each supported
   <tr style="vertical-align: top">
  
     <th>
-      Browsers (desktop & mobile)
+      Browsers (Desktop & Mobile)
     </th>
 
     <th>
-      Polyfills required
+      Polyfills Required
     </th>
 
   </tr>
@@ -327,7 +327,7 @@ Here are the features which may require additional polyfills:
     </th>
 
     <th style="width: 50%">
-       Browsers (desktop & mobile)
+       Browsers (Desktop & Mobile)
     </th>
 
   </tr>

aio/content/guide/cheatsheet.md

@@ -2,6 +2,7 @@
 Cheat Sheet
 
 @description
+
 <div class="l-content-small grid-fluid docs-content cheatsheet">
 
 <table>

aio/content/guide/cli-quickstart.md

@@ -1,3 +1,6 @@
+@title
+CLI QuickStart
+
 @description
 
 

aio/content/guide/glossary.md

@@ -1,3 +1,6 @@
+@title
+Angular Glossary
+
 @description
 
 

aio/content/guide/quickstart.md

@@ -1,3 +1,6 @@
+@title
+QuickStart
+
 @description
 
 

aio/content/guide/webpack.md

@@ -1,5 +1,5 @@
 @title
-Webpack: an introduction
+Webpack: An Introduction
 
 @intro
 Create Angular applications with a Webpack based tooling.

aio/content/marketing/api.html

@@ -1 +1,2 @@
+<h1>API List</h1>
 <aio-api-list></aio-api-list>

aio/content/marketing/index.html

@@ -5,11 +5,11 @@
         href="guide/quickstart" md-button="md-button"
         class="hero-cta mat-raised button button-large button-plain">Get Started</a>
     <announcement-bar class="announcement-bar">
-      <div class="announcement-bar-slide cleafix is-visible"><img
+      <div class="announcement-bar-slide cleafix is-visible">
-          src="assets/images/logos/anglebrackets/devintersection.png" width="64"/>
+        <img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
-        <p>Join us for <strong>DEVintersection Amsterdam</strong> Nov 14-16!</p><a
+        <p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
-            href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button mat-button">Register
+        <a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a>
-          now</a></div>
+      </div>
     </announcement-bar>
   </div>
 </header>

aio/content/navigation.json

@@ -28,7 +28,7 @@
     },
 
     {
-      "title": "Getting started",
+      "title": "Getting Started",
       "tooltip": "A gentle introduction to Angular.",
       "children": [
         {
@@ -63,13 +63,13 @@
 
         {
           "url": "guide/appmodule",
-          "title": "The root AppModule",
+          "title": "The Root AppModule",
           "tooltip": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\"."
         },
 
         {
           "url": "guide/displaying-data",
-          "title": "Displaying data",
+          "title": "Displaying Data",
           "tooltip": "Property binding helps show app data in the UI."
         },
 
@@ -103,17 +103,17 @@
         },
         {
           "url": "tutorial/toh-pt1",
-          "title": "The hero editor",
+          "title": "The Hero Editor",
           "tooltip": "Build a simple hero editor"
         },
         {
           "url": "tutorial/toh-pt2",
-          "title": "Master/detail",
+          "title": "Master/Detail",
           "tooltip": "Build a master/detail page with a list of heroes."
         },
         {
           "url": "tutorial/toh-pt3",
-          "title": "Multiple components",
+          "title": "Multiple Components",
           "tooltip": "Refactor the master/detail view into separate components."
         },
         {
@@ -151,14 +151,14 @@
 
             {
               "url": "guide/ngmodule-faq",
-              "title": "Angular module FAQs",
+              "title": "Angular Module FAQs",
               "tooltip": "Answers to frequently asked questions about @NgModule."
             }
         ]},
 
         {
           "url": "guide/component-communication",
-          "title": "Component interaction",
+          "title": "Component Interaction",
           "tooltip": "Share information between different directives and components."
         },
 
@@ -168,20 +168,20 @@
           "children": [
             {
               "url": "guide/cb-dependency-injection",
-              "title": "Dependency injection",
+              "title": "Dependency Injection",
               "tooltip": "Techniques for Dependency Injection."
             },
 
             {
               "url": "guide/hierarchical-dependency-injection",
-              "title": "Hierarchical injectors",
+              "title": "Hierarchical Injectors",
               "tooltip": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
             }
         ]},
 
         {
           "url": "guide/dynamic-component-loader",
-          "title": "Dynamic components",
+          "title": "Dynamic Components",
           "tooltip": "Load components dynamically."
         },
 
@@ -191,12 +191,12 @@
           "children": [
             {
               "url": "guide/attribute-directives",
-              "title": "Attribute directives",
+              "title": "Attribute Directives",
               "tooltip": "Attribute directives attach behavior to elements."
             },
             {
               "url": "guide/structural-directives",
-              "title": "Structural directives",
+              "title": "Structural Directives",
               "tooltip": "Structural directives manipulate the layout of the page."
             }
           ]
@@ -214,26 +214,26 @@
 
             {
               "url": "guide/form-validation",
-              "title": "Form validation",
+              "title": "Form Validation",
               "tooltip": "Validate user's form entries."
             },
 
             {
               "url": "guide/reactive-forms",
-              "title": "Reactive forms",
+              "title": "Reactive Forms",
               "tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
             }
         ]},
 
         {
           "url": "guide/server-communication",
-          "title": "HTTP client",
+          "title": "HTTP Client",
           "tooltip": "Use an HTTP Client to talk to a remote server."
         },
 
         {
           "url": "guide/lifecycle-hooks",
-          "title": "Lifecycle hooks",
+          "title": "Lifecycle Hooks",
           "tooltip": "Angular calls lifecycle hook methods on directives and components as it creates, changes, and destroys them."
         },
 
@@ -245,7 +245,7 @@
 
         {
           "url": "guide/router",
-          "title": "Routing & navigation",
+          "title": "Routing & Navigation",
           "tooltip": "Discover the basics of screen navigation with the Angular Router."
         },
 
@@ -269,7 +269,7 @@
       "children": [
         {
           "url": "guide/aot-compiler",
-          "title": "Ahead-of-Time compilation",
+          "title": "Ahead-of-Time Compilation",
           "tooltip": "Learn why and how to use the Ahead-of-Time (AOT) compiler."
         },
 
@@ -287,7 +287,7 @@
 
         {
           "url": "guide/component-styles",
-          "title": "Component styles",
+          "title": "Component Styles",
           "tooltip": "Learn how to apply CSS styles to components."
         },
 
@@ -321,19 +321,19 @@
 
             {
               "url": "guide/browser-support",
-              "title": "Browser support",
+              "title": "Browser Support",
               "tooltip": "Browser support and polyfills guide."
             },
 
             {
               "url": "guide/npm-packages",
-              "title": "Npm packages",
+              "title": "Npm Packages",
               "tooltip": "Recommended npm packages, and how to specify package dependencies."
             },
 
             {
               "url": "guide/typescript-configuration",
-              "title": "TypeScript configuration",
+              "title": "TypeScript Configuration",
               "tooltip": "TypeScript configuration for Angular developers."
             }
         ]},
@@ -364,7 +364,7 @@
 
         {
           "url": "guide/webpack",
-          "title": "Webpack: an introduction",
+          "title": "Webpack: An Introduction",
           "tooltip": "Create Angular applications with a Webpack based tooling."
         }
       ]
@@ -393,7 +393,7 @@
 
         {
           "url": "guide/style-guide",
-          "title": "Style guide",
+          "title": "Style Guide",
           "tooltip": "Write Angular with style."
         }
       ]

aio/src/styles/0-base/_typography.scss

@@ -99,7 +99,6 @@
       border-radius: 2px;
       border-spacing: 0;
       margin: 0 0 32px 0;
-      width: 100%;
     }
 
     table tbody th {

aio/src/styles/1-layouts/_content-layout.scss

@@ -1,6 +1,7 @@
 .sidenav-content {
   padding: 1rem 3rem 3rem;
   margin: auto;
+  min-height: 100vh;
 }
 
 .fill-remaining-space {
@@ -24,3 +25,11 @@
 .sidenav-content button {
   min-width: 50px;
 }
+
+#guide-change-log h2::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin: 24px 0px;
+  background: $lightgray;
+}

aio/src/styles/2-modules/_announcement-bar.scss

@@ -88,7 +88,7 @@ $announcement-bar-width: 784px;
 
   img {
     height: 40px;
-    margin: 8px auto;
+    margin: 0 0 8px;
   }
 
   p {
@@ -146,6 +146,7 @@ $announcement-bar-width: 784px;
 
     @media (max-width: 480px) {
       padding: 16px;
+      align-items: center;
     }
   }
 }

aio/src/styles/2-modules/_table.scss

@@ -34,7 +34,7 @@ table {
     th,
     td {
       border-bottom: 1px solid $lightgray;
-      padding: 16px 32px;
+      padding: 16px;
       text-align: left;
       line-height: 24px;
       vertical-align: top;