change template diagrams to be .media-grid

docs/assets/css/docs.css

@@ -203,7 +203,6 @@ section > .row {
 
 /* Render mini layout previews
 -------------------------------------------------- */
-.diagram,
 .mini-layout {
   border: 1px solid #ddd;
   -webkit-border-radius: 6px;
@@ -213,10 +212,6 @@ section > .row {
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
           box-shadow: 0 1px 2px rgba(0,0,0,.075);
 }
-.diagram {
-  height: 140px;
-  padding: 4px;
-}
 .mini-layout {
   height: 340px;
   margin-bottom: 20px;

docs/index.html

@@ -151,18 +151,17 @@
     <div class="span12">
       <h3>Quick-start examples</h3>
       <p>Need some quick templates? Check out these basic examples we've put together:</p>
-
-      <div class="row">
-        <div class="span4">
-          <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" class="diagram" alt="Simple three-column layout with hero unit"></a>
-        </div>
-        <div class="span4">
-          <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar"></a>
-        </div>
-        <div class="span4">
-          <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a>
-        </div>
-      </div>
+      <ul class="media-grid">
+        <li>
+          <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
+        </li>
+        <li>
+          <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
+        </li>
+        <li>
+          <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
+        </li>
+      </ul>
     </div>
     <div class="span4">
       <h3>Theming Bootstrap</h3>