avoid using a table for the guide list

Author: jelbourn

src/app/pages/guide-list/_guide-list-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/theming';
 
 @mixin guide-list-theme($theme) {
   $primary: map-get($theme, primary);
@@ -7,21 +7,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  app-guides {
-
-    .docs-guide-list-item {
-      table {
-        box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
-      }
-
-      th {
-        color: md-color($foreground, secondary-text);
-        background: rgba(md-color($foreground, secondary-text), .03);
-      }
-
-      td a {
-        color: md-color($primary);
-      }
-    }
+  .docs-guide-list .docs-guide-item {
+    color: mat-color($primary);
   }
 }

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

@@ -2,26 +2,12 @@
   <h1>Guides</h1>
 </div>
 
-<md-list class="docs-guide-list-item">
-  <table>
-    <tbody>
-      <tr>
-        <th>Core Guides</th>
-      </tr>
-
-      <tr>
-        <td>
-          <a md-list-item
-             *ngFor="let guide of guideItems.getAllItems()"
-             [routerLink]="['/guide/', guide.id]">
-              {{guide.name}}
-          </a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-
-</md-list>
+<md-nav-list class="docs-guide-list">
+  <a md-list-item *ngFor="let guide of guideItems.getAllItems()"
+      class="docs-guide-item"
+      [routerLink]="['/guide/', guide.id]">
+    {{guide.name}}
+  </a>
+</md-nav-list>
 
 <app-footer></app-footer>

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

@@ -4,33 +4,11 @@
   flex-grow: 1;
 }
 
-.docs-guide-list-item {
+.docs-guide-list {
   margin: 50px;
   flex-grow: 1;
+}
 
-  table {
-    border-collapse: collapse;
-    border-radius: 2px;
-    border-spacing: 0;
-    margin: 0 0 32px 0;
-    width: 100%;
-  }
-
-  table tbody th {
-    font-weight: 400;
-    padding: 13px 32px;
-    text-align: left;
-  }
-
-  td {
-    padding: 8px 20px;
-
-    a {
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
+.docs-guide-item, .docs-guide-item:hover {
+  text-decoration: none;
 }

src/styles/_typography-theme.scss

@@ -9,12 +9,7 @@
 
   .docs-component-viewer-tabbed-content,
   .docs-guide-content {
-       h1 {
-        color: mat-color($primary, 800);
-        background: rgba(mat-color($foreground, text), .03);
-      }
-
-      h3, h2, h4, h5, p, ol, li{
+      h1, h3, h2, h4, h5, p, ol, li{
         color: mat-color($foreground, text);
       }