update the subnav on all pages

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Tue Jan 24 18:24:24 PST 2012
+ * Date: Tue Jan 24 19:19:33 PST 2012
  */
 article,
 aside,

docs/assets/css/docs.css

@@ -125,7 +125,9 @@ section {
 }
 
 /* Subnav */
-.subhead .nav {
+.subnav {
+  width: 100%;
+  height: 36px;
   background-color: #eeeeee; /* Old browsers */
   background-repeat: repeat-x; /* Repeat the gradient */
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
@@ -140,21 +142,28 @@ section {
      -moz-border-radius: 4px;
           border-radius: 4px;  
 }
+.subhead .nav {
+}
 .subhead .nav a {
   margin: 0;
   padding-top: 11px;
   padding-bottom: 11px;
   font-size: 13px;
+  color: #777;
   border-left: 1px solid #f5f5f5;
   border-right: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
+.subhead .nav a:hover,
 .subhead .nav .active a {
-  background-color: #fff;
+  background-color: transparent;
   color: #333;
 }
+.subhead .nav .active a {
+  background-color: #eee;
+}
 .subhead .nav li:first-child a {
   border-left: 0;
   -webkit-border-radius: 4px 0 0 4px;
@@ -165,17 +174,24 @@ section {
   border-right: 0;
 }
 
-.subhead .subnav-fixed {
+.subnav-fixed {
   position: fixed;
   top: 40px;
+  left: 0;
+  right: 0;
   z-index: 1030;
-  width: 938px;
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.05);
-     -moz-box-shadow: 0 1px 5px rgba(0,0,0,.05);
-          box-shadow: 0 1px 5px rgba(0,0,0,.05);
+  border-color: #d5d5d5;
+  border-width: 0 0 1px; /* drop the border on the fixed edges */
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+          box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+}
+.subnav-fixed .nav {
+  width: 940px;
+  margin: 0 auto;
 }
 
 
@@ -438,7 +454,7 @@ h2 + .row {
 
 /* Example sites showcase */
 .example-sites img {
-  max-width: 290px;
+  max-width: 100%;
 }
 .marketing-byline {
   margin: -18px 0 27px;

docs/assets/js/application.js

@@ -118,8 +118,8 @@ $(function(){
 
   // fix sub nav playa
   var $win = $(window)
-    , $nav = $('.subhead .nav')
-    , navTop = $('.subhead .nav').offset().top - 40
+    , $nav = $('.subnav')
+    , navTop = $('.subnav').offset().top - 40
     , isFixed = 0
 
   processScroll()

docs/base-css.html

@@ -63,6 +63,7 @@
 <header class="jumbotron subhead" id="overview">
   <h1>Base CSS</h1>
   <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
+  <div class="subnav">
     <ul class="nav pills">
       <li><a href="./base-css.html#typography">Typography</a></li>
       <li><a href="./base-css.html#tables">Tables</a></li>
@@ -70,6 +71,7 @@
       <li><a href="./base-css.html#buttons">Buttons</a></li>
       <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
     </ul>
+  </div>
 </header>
 
 

docs/components.html

@@ -58,11 +58,12 @@
 
     <div class="container">
 
-  <!-- Masthead
-  ================================================== -->
-  <header class="jumbotron subhead" id="overview">
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
   <h1>Components</h1>
   <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
+  <div class="subnav">
     <ul class="nav pills">
       <li><a href="./components.html#buttonGroups">Button groups</a></li>
       <li><a href="./components.html#buttonDropdowns">Button dropdowns</a></li>
@@ -74,13 +75,14 @@
       <li><a href="./components.html#alerts">Alerts</a></li>
       <li><a href="./components.html#progress">Progress bars</a></li>
     </ul>
-  </header>
+  </div>
+</header>
 
 
 
-  <!-- Button Groups
-  ================================================== -->
-  <section id="buttonGroups">
+<!-- Button Groups
+================================================== -->
+<section id="buttonGroups">
   <div class="page-header">
     <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
   </div>
@@ -144,13 +146,13 @@
       <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
     </div>
   </div>
-  </section>
+</section>
 
 
 
-  <!-- Split button dropdowns
-  ================================================== -->
-  <section id="buttonDropdowns">
+<!-- Split button dropdowns
+================================================== -->
+<section id="buttonDropdowns">
   <div class="page-header">
     <h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1>
   </div>
@@ -236,7 +238,7 @@
 </pre>
     </div>
   </div>
-  </section>
+</section>
 
 
 
@@ -528,11 +530,6 @@
 
   <h3>Tabbable in any direction</h3>
   <div class="row">
-<!--
-    <div class="span4">
-      <p>Swap the order of your HTML&mdash;placing <code>.tabs</code> after <code>.tab-content</code>&mdash;for tabs on the bottom.</p>
-    </div>
--->
     <div class="span4">
       <h4>Tabs on the bottom</h4>
       <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>

docs/javascript.html

@@ -63,6 +63,7 @@
       <header class="jumbotron subhead" id="overview">
         <h1>Javascript for Bootstrap</h1>
         <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
+        <div class="subnav">
           <ul class="nav pills">
             <li><a href="./javascript.html#javascript">Overview</a></li>
             <li><a href="./javascript.html#modals">Modal</a></li>
@@ -77,6 +78,7 @@
             <li><a href="./javascript.html#carousel">Carousel</a></li>
             <li><a href="./javascript.html#typeahead">Typeahead</a></li>
           </ul>
+        </div>
       </header>
 
 

docs/less.html

@@ -67,12 +67,14 @@
       <header class="jumbotron subhead" id="overview">
         <h1>Using LESS with Bootstrap</h1>
         <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
+        <div class="subnav">
           <ul class="nav pills">
             <li><a href="./less.html#builtWith">Built with Less</a></li>
             <li><a href="./less.html#variables">Variables</a></li>
             <li><a href="./less.html#mixins">Mixins</a></li>
             <li><a href="./less.html#compiling">Compiling Bootstrap</a></li>
           </ul>
+        </div>
       </header>
 
 

docs/scaffolding.html

@@ -63,11 +63,13 @@
       <header class="jumbotron subhead" id="overview">
         <h1>Scaffolding</h1>
         <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>
+        <div class="subnav">
           <ul class="nav pills">
             <li><a href="./scaffolding.html#grid-system">Grid system</a></li>
             <li><a href="./scaffolding.html#layouts">Layouts</a></li>
             <li><a href="./scaffolding.html#responsive">Responsive design</a></li>
           </ul>
+        </div>
       </header>
 
 

docs/templates/pages/base-css.mustache

@@ -3,6 +3,7 @@
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Base CSS{{/i}}</h1>
   <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
+  <div class="subnav">
     <ul class="nav pills">
       <li><a href="./base-css.html#typography">{{_i}}Typography{{/i}}</a></li>
       <li><a href="./base-css.html#tables">{{_i}}Tables{{/i}}</a></li>
@@ -10,6 +11,7 @@
       <li><a href="./base-css.html#buttons">{{_i}}Buttons{{/i}}</a></li>
       <li><a href="./base-css.html#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
     </ul>
+  </div>
 </header>
 
 

docs/templates/pages/components.mustache

-  <!-- Masthead
-  ================================================== -->
-  <header class="jumbotron subhead" id="overview">
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Components{{/i}}</h1>
   <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
+  <div class="subnav">
     <ul class="nav pills">
       <li><a href="./components.html#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
       <li><a href="./components.html#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
@@ -14,13 +15,14 @@
       <li><a href="./components.html#alerts">{{_i}}Alerts{{/i}}</a></li>
       <li><a href="./components.html#progress">{{_i}}Progress bars{{/i}}</a></li>
     </ul>
-  </header>
+  </div>
+</header>
 
 
 
-  <!-- Button Groups
-  ================================================== -->
-  <section id="buttonGroups">
+<!-- Button Groups
+================================================== -->
+<section id="buttonGroups">
   <div class="page-header">
     <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
   </div>
@@ -84,13 +86,13 @@
       <p class="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p>
     </div>
   </div>
-  </section>
+</section>
 
 
 
-  <!-- Split button dropdowns
-  ================================================== -->
-  <section id="buttonDropdowns">
+<!-- Split button dropdowns
+================================================== -->
+<section id="buttonDropdowns">
   <div class="page-header">
     <h1>{{_i}}Split button dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
   </div>
@@ -176,7 +178,7 @@
 </pre>
     </div>
   </div>
-  </section>
+</section>
 
 
 
@@ -468,11 +470,6 @@
 
   <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
   <div class="row">
-<!--
-    <div class="span4">
-      <p>Swap the order of your HTML&mdash;placing <code>.tabs</code> after <code>.tab-content</code>&mdash;for tabs on the bottom.</p>
-    </div>
--->
     <div class="span4">
       <h4>{{_i}}Tabs on the bottom{{/i}}</h4>
       <p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>

docs/templates/pages/javascript.mustache

@@ -3,6 +3,7 @@
       <header class="jumbotron subhead" id="overview">
         <h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
         <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
+        <div class="subnav">
           <ul class="nav pills">
             <li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li>
             <li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li>
@@ -17,6 +18,7 @@
             <li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li>
             <li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li>
           </ul>
+        </div>
       </header>
 
 

docs/templates/pages/less.mustache

@@ -7,12 +7,14 @@
       <header class="jumbotron subhead" id="overview">
         <h1>{{_i}}Using LESS with Bootstrap{{/i}}</h1>
         <p class="lead">{{_i}}Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
+        <div class="subnav">
           <ul class="nav pills">
             <li><a href="./less.html#builtWith">{{_i}}Built with Less{{/i}}</a></li>
             <li><a href="./less.html#variables">{{_i}}Variables{{/i}}</a></li>
             <li><a href="./less.html#mixins">{{_i}}Mixins{{/i}}</a></li>
             <li><a href="./less.html#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
           </ul>
+        </div>
       </header>
 
 

docs/templates/pages/scaffolding.mustache

@@ -3,11 +3,13 @@
       <header class="jumbotron subhead" id="overview">
         <h1>{{_i}}Scaffolding{{/i}}</h1>
         <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
+        <div class="subnav">
           <ul class="nav pills">
             <li><a href="./scaffolding.html#grid-system">{{_i}}Grid system{{/i}}</a></li>
             <li><a href="./scaffolding.html#layouts">{{_i}}Layouts{{/i}}</a></li>
             <li><a href="./scaffolding.html#responsive">{{_i}}Responsive design{{/i}}</a></li>
           </ul>
+        </div>
       </header>