Add guides (getting-started, theming) (#51)

* Add guides

* Update homepage get-started link

* Update second get-started link on homepage

* fix test

Author: jelbourn

src/_app-theme.scss

@@ -5,6 +5,7 @@
 @import './app/pages/component-list/component-list-theme';
 @import './app/pages/component-category-list/component-category-list-theme';
 
+@import './styles/typography-theme';
 @import './app/shared/navbar/navbar-theme';
 @import './app/shared/example-viewer/example-viewer-theme';
 
@@ -20,6 +21,15 @@
     background: md-color($background, background);
   }
 
+  .docs-primary-header {
+    background: md-color($primary);
+
+    h1 {
+      color: md-color($primary, default-contrast);
+    }
+  }
+
+  @include docs-site-typography-theme($theme);
   @include nav-bar-theme($theme);
   @include component-viewer-sidenav-theme($theme);
   @include home-page-theme($theme);

src/app/pages/component-list/_component-list-theme.scss

@@ -5,14 +5,6 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .docs-component-list-header {
-    background: md-color($primary);
-
-    h1 {
-      color: md-color($primary, default-contrast);
-    }
-  }
-
   .docs-component-list-item {
     color: md-color($foreground, secondary-text);
   }

src/app/pages/component-list/component-list.html

@@ -1,4 +1,4 @@
-<div class="docs-component-list-header">
+<div class="docs-primary-header">
   <h1> {{category.name}} </h1>
 </div>
 

src/app/pages/component-list/component-list.scss

@@ -21,14 +21,3 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-
-.docs-component-list-header {
-  padding-left: 20px;
-
-  h1 {
-    font-size: 30px;
-    font-weight: 300;
-    margin: 0;
-    padding: 50px;
-  }
-}

src/app/pages/component-viewer/_component-viewer-theme.scss

@@ -1,3 +1,5 @@
+@import '~@angular/material/core/theming/theming';
+
 @mixin component-viewer-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
@@ -8,47 +10,6 @@
   app-component-viewer {
     color: md-color($foreground, secondary-text);
 
-    .docs-component-viewer-tabbed-content {
-      h1 {
-        color: md-color($primary, 800);
-        background: rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      h3, h2, h4, h5, p, ol, li{
-        color: md-color($foreground, secondary-text);
-      }
-
-      a {
-        color: md-color($primary);
-      }
-
-      table {
-        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
-      }
-
-      table tbody th{
-        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      td {
-        color: md-color($foreground, secondary-text);
-        border: 1px solid rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      th {
-        color: md-color($foreground, secondary-text);
-        background: rgba(md-color($foreground, secondary-text), .03);
-      }
-    }
-
-    .docs-component-viewer-header {
-      background: md-color($primary);
-
-      h1 {
-        color: md-color($primary, default-contrast);
-      }
-    }
-
     .md-tab-label:focus {
       color: md-color($foreground, secondary-text);
     }

src/app/pages/component-viewer/component-viewer.html

@@ -1,4 +1,4 @@
-<div class="docs-component-viewer-header">
+<div class="docs-primary-header">
   <h1> Component - {{componentDocItem.name}} </h1>
 </div>
 

src/app/pages/component-viewer/component-viewer.scss

@@ -2,17 +2,6 @@ app-component-viewer {
   font-weight: 400;
 }
 
-.docs-component-viewer-header {
-  padding-left: 20px;
-
-  h1 {
-    font-size: 30px;
-    font-weight: 300;
-    margin: 0;
-    padding: 50px;
-  }
-}
-
 .docs-component-viewer-tabbed-content {
   margin: 50px 70px;
 
@@ -21,74 +10,6 @@ app-component-viewer {
   }
 }
 
-.docs-component-viewer-tabbed-content .docs-component-view-text-content {
-
-  h1 {
-    display:inline-block;
-    font-size: 20px;
-    font-weight: 400;
-    padding: 5px;
-  }
-
-  h3, h2 {
-    font-size: 20px;
-    font-weight: 400;
-    margin-bottom: 30px;
-    margin-top: 80px;
-  }
-
-  h4 {
-    margin-top: 40px;
-  }
-
-  h5 {
-    font-size: 16px;
-  }
-
-  .md-tab-body-wrapper h2 {
-    margin-top: 0px;
-  }
-
-  p {
-    font-size: 16px;
-    line-height: 28px;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  table {
-    border-collapse: collapse;
-    border-radius: 2px;
-    border-spacing: 0;
-    margin: 0 0 32px 0;
-    width: 100%;
-  }
-
-  table tbody th {
-    max-width: 100px;
-    padding: 13px 32px;
-    text-align: left;
-  }
-
-  td {
-    font-weight: 400;
-    padding: 8px 30px;
-
-    p {
-      margin: 0;
-    }
-  }
-
-  th {
-    font-size: 16px;
-    font-weight: 400;
-    padding: 13px 32px;
-    text-align: left;
-  }
-}
-
 .md-tab-header {
   border: none;
   margin-bottom: 30px;

src/app/pages/guide-list/guide-list.html

@@ -1,3 +1,6 @@
+<div class="docs-primary-header">
+  <h1>Guides</h1>
+</div>
 <md-list class="docs-guide-list-item">
   <a md-list-item
      *ngFor="let guide of guideItems.getAllItems()"

src/app/pages/guide-viewer/guide-viewer.html

@@ -1 +1,5 @@
-<doc-viewer [documentUrl]="documentUrl"></doc-viewer>
+<div class="docs-primary-header">
+  <h1>{{guide.name}}</h1>
+</div>
+
+<doc-viewer class="docs-guide-content" [documentUrl]="guide.document"></doc-viewer>

src/app/pages/guide-viewer/guide-viewer.scss

@@ -0,0 +1,4 @@
+.docs-guide-content {
+  display: block;
+  margin: 20px 0 0 70px;
+}