updated to include sub nav and pip nav, new docs updates, topbar nav refinements for media queried settings

5 files changed, 22 insertions, 67 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a7b52821e..281b224e3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -315,11 +315,6 @@ h2 + table {
 -------------------------------------------------- */
 @media (max-width: 480px) {
 
-  /* Hide the nav for now */
-  body > .navbar-fixed .nav {
-    display: none;
-  }
-
   /* Change up some type stuff */
   h1 small {
     display: block;
@@ -365,11 +360,6 @@ h2 + table {
 
 @media (max-width: 768px) {
 
-  /* Hide the nav for now */
-  body > .navbar-fixed .nav {
-    display: none;
-  }
-
   /* Adjust the jumbotron */
   .jumbotron .benefits {
     position: relative;
@@ -394,6 +384,9 @@ h2 + table {
   .footer .pull-right {
     float: none;
   }
+  .footer p {
+    margin-bottom: 9px;
+  }
 
 }
 
@@ -423,7 +416,7 @@ h2 + table {
   /* Provide enough space on right-hand side for benefits list */
   .jumbotron h1,
   .jumbotron p {
-    margin-right: 40%;
+    margin-right: 20%;
   }
 }
 
diff --git a/docs/assets/img/less-small.png b/docs/assets/img/less-small.png
new file mode 100644
index 000000000..763b847e8
--- /dev/null
+++ b/docs/assets/img/less-small.png
diff --git a/docs/index.html b/docs/index.html
index ff7d56976..16eed36c8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -151,7 +151,7 @@
               <p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
             </div>
             <div class="span4">
-              <img class="icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
+              <img class="icon" src="assets/img/less-small.png">
               <h2>Built on LESS</h2>
               <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
             </div>
@@ -175,7 +175,7 @@
             <div class="span3">
               <img class="small-icon" src="assets/img/icon-twitter.png">
               <h3>Made at Twitter</h3>
-              <p>Brought to you by experienced engineers and designers.</p>
+              <p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
             </div>
           </div><!--/row-->
         </div>
@@ -196,6 +196,16 @@
     <!-- Le javascript -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
+
+    <script type="text/javascript">
+      $(document).ready(function() {
+        $('.nav .active a').click(function(e) {
+          e.preventDefault();
+          $(this).parent().siblings().toggle();
+        });
+      });
+    </script>
+
     <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
diff --git a/docs/less.html b/docs/less.html
index 97d95a3ab..e9334a552 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -63,7 +63,7 @@
       <div class="row">
         <div class="span4">
           <h3>Why LESS?</h3>
-          <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p>
+          <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
         </div>
         <div class="span4">
           <h3>What's included?</h3>
@@ -72,7 +72,7 @@
         <div class="span4">
           <h3>Learn more</h3>
           <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
-          <p>Visit the official website at http://lesscss.org to learn more.</p>
+          <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
         </div>
       </div>
       <div class="row">
@@ -98,11 +98,7 @@
         <h1>Variables <small>from variables.less</small></h1>
       </div>
 
-      <div class="row">
-        <div class="span3">
           <h3>Hyperlinks</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <thead>
               <tr>
@@ -124,92 +120,70 @@
               </tr>
             </tbody>
           </table>
-        </div>
-      </div>
 
       <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Grayscale colors</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@black</code></td>
                 <td>#000</td>
-                <td>Black</td>
               </tr>
               <tr>
                 <td><code>@grayDark</code></td>
                 <td><code>lighten(@black, 25%)</code></td>
-                <td>Dark gray</td>
               </tr>
               <tr>
                 <td><code>@gray</code></td>
                 <td><code>lighten(@black, 50%)</code></td>
-                <td>Medium gray</td>
               </tr>
               <tr>
                 <td><code>@grayLight</code></td>
                 <td><code>lighten(@black, 75%)</code></td>
-                <td>Light gray</td>
               </tr>
               <tr>
                 <td><code>@grayLighter</code></td>
                 <td><code>lighten(@black, 90%)</code></td>
-                <td>Lighter gray</td>
               </tr>
               <tr>
                 <td><code>@white</code></td>
                 <td>#fff</td>
-                <td>White</td>
               </tr>
             </tbody>
           </table>
         </div>
-      </div>
-
-      <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Accent colors</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@blue</code></td>
                 <td>#049CDB</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@green</code></td>
                 <td>#46a546</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@red</code></td>
                 <td>#9d261d</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@yellow</code></td>
                 <td>#ffc40d</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@orange</code></td>
                 <td>#f89406</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@pink</code></td>
                 <td>#c3325f</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@purple</code></td>
                 <td>#7a43b6</td>
-                <td></td>
               </tr>
             </tbody>
           </table>
@@ -217,48 +191,36 @@
       </div>
 
       <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Grid system</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@gridColumns</code></td>
                 <td>12</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@gridColumnWidth</code></td>
                 <td>60px</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@gridGutterWidth</code></td>
                 <td>20px</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@siteWidth</code></td>
                 <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-                <td></td>
               </tr>
             </tbody>
           </table>
         </div>
-      </div>
-
-      <div class="row">
-        <div class="span3">
+        <div class="span6">
           <h3>Typography</h3>
-        </div>
-        <div class="span9">
           <table class="bordered-table striped-table">
             <tbody>
               <tr>
                 <td><code>@baseFontSize</code></td>
                 <td>13px</td>
-                <td></td>
               </tr>
               <tr>
                 <td><code>@baseFontFamily</code></td>
@@ -268,7 +230,6 @@
               <tr>
                 <td><code>@baseLineHeight</code></td>
                 <td>18px</td>
-                <td></td>
               </tr>
             </tbody>
           </table>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index dd7f05bc6..d4d1c6526 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -53,15 +53,6 @@
         <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
       </header>
 
-      <!-- Work in progress sub nav for docs -->
-      <div class="navbar subnav docked-top">
-        <ul class="nav">
-          <li class="active"><a href="#">Grid system</a></li>
-          <li><a href="#">Layouts</a></li>
-          <li><a href="#">Responsive</a></li>
-        </ul>
-      </div>
-
 
 
 <!-- Grid system