making the docs a little less jank

components.html

@@ -88,10 +88,10 @@ base_url: "../"
 
       <div class="component-example component-example-fullbleed">
         <header class="bar-nav">
-          <a class="button-prev pull-left">
+          <a class="button-link pull-left">
             Previous
           </a>
-          <a class="button pull-right">
+          <a class="button-link pull-right">
             Next
           </a>
           <h1 class="title">Title</h1>
@@ -100,10 +100,10 @@ base_url: "../"
 
 {% highlight html %}
 <header class="bar-nav">
-  <a class="button-prev pull-left">
+  <a class="button-link pull-left">
     Previous
   </a>
-  <a class="button pull-right">
+  <a class="button-link pull-right">
     Next
   </a>
   <h1 class="title">Title</h1>
@@ -992,14 +992,16 @@ document
           <h1 class="title">Push</h1>
         </header>
         <div class="content">
-          <ul class="table-view">
+          <div class="card">
-            <li class="table-view-cell">
+            <ul class="table-view">
-              <a href="{{ page.base_url }}two.html" data-transition="slide-in">
+              <li class="table-view-cell">
-                Load new page with push
+                <a href="{{ page.base_url }}two.html" data-transition="slide-in">
-              </a>
+                  Load new page with push
-              <span class="chevron"></span>
+                </a>
-            </li>
+                <span class="chevron"></span>
-          </ul>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
 
@@ -1008,14 +1010,16 @@ document
   <h1 class="title">Push</h1>
 </header>
 <div class="content">
-  <ul class="table-view">
+  <div class="card">
-    <li class="table-view-cell">
+    <ul class="table-view">
-      <a href="{{ page.base_url }}two.html" data-transition="slide-in">
+      <li class="table-view-cell">
-        Load new page with push
+        <a href="{{ page.base_url }}two.html" data-transition="slide-in">
-      </a>
+          Load new page with push
-      <span class="chevron"></span>
+        </a>
-    </li>
+        <span class="chevron"></span>
-  </ul>
+      </li>
+    </ul>
+  </div>
 </div>
 {% endhighlight %}
 

docs-assets/css/docs.css

@@ -230,7 +230,7 @@ hr {
     position: absolute;
   }
   .iphone .content {
-    top: 0;
+    top: 44px;
     left: 0;
     right: 0;
     bottom: 0;

one.html

@@ -26,14 +26,16 @@
       <h1 class="title">Push</h1>
     </header>
     <div class="content">
-      <ul class="table-view">
+      <div class="card">
-        <li class="table-view-cell">
+        <ul class="table-view">
-          <a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
+          <li class="table-view-cell">
-              Load new page with push
+            <a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
-          </a>
+                Load new page with push
-          <span class="chevron"></span>
+            </a>
-        </li>
+            <span class="chevron"></span>
-      </ul>
+          </li>
+        </ul>
+      </div>
     </div>
   </body>
-</html>
+</html>

two.html

@@ -26,9 +26,13 @@
       <h1 class="title">Push</h1>
     </header>
     <div class="content">
-      <ul class="table-view">
+      <div class="card">
-        <li class="table-view-cell">Tap or click <a href="one.html" data-transition="slide-out">here</a> to go back. You can also try your browser's back button.</li>
+        <ul class="table-view">
-      </ul>
+          <li class="table-view-cell">
+            <a href="one.html" data-transition="slide-out">Tap or click here to go back. You can also try your browser's back button.</a>
+          </li>
+        </ul>
+      </div>
     </div>
   </body>
-</html>
+</html>