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,6 +992,7 @@ document
           <h1 class="title">Push</h1>
         </header>
         <div class="content">
+          <div class="card">
             <ul class="table-view">
               <li class="table-view-cell">
                 <a href="{{ page.base_url }}two.html" data-transition="slide-in">
@@ -1002,12 +1003,14 @@ document
             </ul>
           </div>
         </div>
+      </div>
 
 {% highlight html %}
 <header class="bar-nav">
   <h1 class="title">Push</h1>
 </header>
 <div class="content">
+  <div class="card">
     <ul class="table-view">
       <li class="table-view-cell">
         <a href="{{ page.base_url }}two.html" data-transition="slide-in">
@@ -1017,6 +1020,7 @@ document
       </li>
     </ul>
   </div>
+</div>
 {% endhighlight %}
 
         <p class="component-description">Have a link you don't want to intercepted by push? Try this:</p>

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,6 +26,7 @@
       <h1 class="title">Push</h1>
     </header>
     <div class="content">
+      <div class="card">
         <ul class="table-view">
           <li class="table-view-cell">
             <a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
@@ -35,5 +36,6 @@
           </li>
         </ul>
       </div>
+    </div>
   </body>
 </html>

two.html

@@ -26,9 +26,13 @@
       <h1 class="title">Push</h1>
     </header>
     <div class="content">
+      <div class="card">
         <ul class="table-view">
-        <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>
+          <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>