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+ */
@@ -138,23 +140,30 @@ section {
   border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
-          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,13 +63,15 @@
 <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>
-  <ul class="nav pills">
-    <li><a href="./base-css.html#typography">Typography</a></li>
-    <li><a href="./base-css.html#tables">Tables</a></li>
-    <li><a href="./base-css.html#forms">Forms</a></li>
-    <li><a href="./base-css.html#buttons">Buttons</a></li>
-    <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
-  </ul>
+  <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>
+      <li><a href="./base-css.html#forms">Forms</a></li>
+      <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/javascript.html

@@ -63,20 +63,22 @@
       <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.
-        <ul class="nav pills">
-          <li><a href="./javascript.html#javascript">Overview</a></li>
-          <li><a href="./javascript.html#modals">Modal</a></li>
-          <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
-          <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
-          <li><a href="./javascript.html#tabs">Tab</a></li>
-          <li><a href="./javascript.html#tooltips">Tooltip</a></li>
-          <li><a href="./javascript.html#popovers">Popover</a></li>
-          <li><a href="./javascript.html#alerts">Alert</a></li>
-          <li><a href="./javascript.html#buttons">Button</a></li>
-          <li><a href="./javascript.html#collapse">Collapse</a></li>
-          <li><a href="./javascript.html#carousel">Carousel</a></li>
-          <li><a href="./javascript.html#typeahead">Typeahead</a></li>
-        </ul>
+        <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>
+            <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
+            <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
+            <li><a href="./javascript.html#tabs">Tab</a></li>
+            <li><a href="./javascript.html#tooltips">Tooltip</a></li>
+            <li><a href="./javascript.html#popovers">Popover</a></li>
+            <li><a href="./javascript.html#alerts">Alert</a></li>
+            <li><a href="./javascript.html#buttons">Button</a></li>
+            <li><a href="./javascript.html#collapse">Collapse</a></li>
+            <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>
-        <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 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>
-        <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 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,13 +3,15 @@
 <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>
-  <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>
-    <li><a href="./base-css.html#forms">{{_i}}Forms{{/i}}</a></li>
-    <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 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>
+      <li><a href="./base-css.html#forms">{{_i}}Forms{{/i}}</a></li>
+      <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/javascript.mustache

@@ -3,20 +3,22 @@
       <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}}
-        <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>
-          <li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
-          <li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
-          <li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li>
-          <li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li>
-          <li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li>
-          <li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li>
-          <li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li>
-          <li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li>
-          <li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li>
-          <li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li>
-        </ul>
+        <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>
+            <li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
+            <li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
+            <li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li>
+            <li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li>
+            <li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li>
+            <li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li>
+            <li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li>
+            <li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li>
+            <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>
-        <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 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>
-        <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 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>