From 6bc867ed5c20972801226467feb63e85c9dec060 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 11 Sep 2011 19:53:48 -0700
Subject: [PATCH] change template diagrams to be .media-grid

---
 docs/assets/css/docs.css |  5 -----
 docs/index.html          | 23 +++++++++++------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a4bd11b3e0..f45c77745d 100644
--- a/docs/assets/css/docs.css
+++ b/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;
diff --git a/docs/index.html b/docs/index.html
index 02335fd758..560343ed6d 100644
--- a/docs/index.html
+++ b/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>