Update with better nav

Author: mrmrs

components/index.html

@@ -54,9 +54,36 @@
 </header>
 
 <main class="bg-white black-70 bt b--black-10">
+  <header class="ph3 ph5-ns pv2">
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#articles">articles</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#banners">banners</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#buttons">buttons</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#cards">cards</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#collections">collections</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#footers">footers</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#forms">forms</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#headers">headers</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#layout">layout</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#lists">lists</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#nav">nav</a>
+    
+    <a class="f6 b dib mr3 mb3 pb1 link bb hover-blue black-70 capitalize" href="#pages">pages</a>
+    
+  </header>
   <section class="pa4-ns">
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="articles">
         <h1 class="f6 b ttu tracked pb2 bb">articles</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -135,7 +162,7 @@ <h1 class="f6 b ttu tracked pb2 bb">articles</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="banners">
         <h1 class="f6 b ttu tracked pb2 bb">banners</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -150,7 +177,7 @@ <h1 class="f6 b ttu tracked pb2 bb">banners</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="buttons">
         <h1 class="f6 b ttu tracked pb2 bb">buttons</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -181,7 +208,7 @@ <h1 class="f6 b ttu tracked pb2 bb">buttons</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="cards">
         <h1 class="f6 b ttu tracked pb2 bb">cards</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -244,7 +271,7 @@ <h1 class="f6 b ttu tracked pb2 bb">cards</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="collections">
         <h1 class="f6 b ttu tracked pb2 bb">collections</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -275,7 +302,7 @@ <h1 class="f6 b ttu tracked pb2 bb">collections</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="footers">
         <h1 class="f6 b ttu tracked pb2 bb">footers</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -322,7 +349,7 @@ <h1 class="f6 b ttu tracked pb2 bb">footers</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="forms">
         <h1 class="f6 b ttu tracked pb2 bb">forms</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -345,7 +372,7 @@ <h1 class="f6 b ttu tracked pb2 bb">forms</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="headers">
         <h1 class="f6 b ttu tracked pb2 bb">headers</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -376,7 +403,7 @@ <h1 class="f6 b ttu tracked pb2 bb">headers</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="layout">
         <h1 class="f6 b ttu tracked pb2 bb">layout</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -639,7 +666,7 @@ <h1 class="f6 b ttu tracked pb2 bb">layout</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="lists">
         <h1 class="f6 b ttu tracked pb2 bb">lists</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -726,7 +753,7 @@ <h1 class="f6 b ttu tracked pb2 bb">lists</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="nav">
         <h1 class="f6 b ttu tracked pb2 bb">nav</h1>
       </div>
       <div class="ph3-ns cf mb4">
@@ -773,7 +800,7 @@ <h1 class="f6 b ttu tracked pb2 bb">nav</h1>
 
     </div>
 
-      <div class="ph3 ph4-ns">
+      <div class="ph3 ph4-ns" id="pages">
         <h1 class="f6 b ttu tracked pb2 bb">pages</h1>
       </div>
       <div class="ph3-ns cf mb4">