fix broken index page heading, update variables and less 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 13:58:10 PST 2012
+ * Date: Tue Jan 24 16:01:37 PST 2012
  */
 article,
 aside,
@@ -411,15 +411,18 @@ address {
 code, pre {
   padding: 0 3px 2px;
   font-family: Menlo, Monaco, "Courier New", monospace;
-  font-size: 12px;
+  font-size: 11px;
   color: #333333;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
 }
 code {
-  padding: 1px 3px;
+  padding: 3px 4px;
   background-color: #fee9cc;
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
 }
 pre {
   display: block;

bootstrap.min.css

@@ -82,8 +82,8 @@ blockquote small{display:block;line-height:18px;color:#999999;}blockquote small:
 blockquote.pull-right{float:right;padding-left:0;padding-right:15px;border-left:0;border-right:5px solid #eeeeee;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
 q:before,q:after,blockquote:before,blockquote:after{content:"";}
 address{display:block;margin-bottom:18px;line-height:18px;font-style:normal;}
-code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
-code{padding:1px 3px;background-color:#fee9cc;}
+code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:11px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code{padding:3px 4px;background-color:#fee9cc;color:#d14;background-color:#f7f7f9;border:1px solid #e1e1e8;}
 pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
 pre code{padding:0;background-color:transparent;}
 small{font-size:100%;}

docs/assets/css/docs.css

@@ -126,7 +126,6 @@ section {
 
 /* Subnav */
 .subhead .nav {
-  padding: 0 10px;
   background-color: #eeeeee; /* Old browsers */
   background-repeat: repeat-x; /* Repeat the gradient */
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
@@ -136,7 +135,7 @@ section {
   background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
   background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
-  border: 1px solid #eee;
+  border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
           border-radius: 4px;
@@ -145,6 +144,9 @@ section {
   margin: 0;
   padding-top: 11px;
   padding-bottom: 11px;
+  font-size: 13px;
+  border-left: 1px solid #f5f5f5;
+  border-right: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
@@ -153,6 +155,15 @@ section {
   background-color: #fff;
   color: #333;
 }
+.subhead .nav li:first-child a {
+  border-left: 0;
+  -webkit-border-radius: 4px 0 0 4px;
+     -moz-border-radius: 4px 0 0 4px;
+          border-radius: 4px 0 0 4px;
+}
+.subhead .nav li:last-child a {
+  border-right: 0;
+}
 
 
 /* Quick links
@@ -247,16 +258,19 @@ section {
   height: auto;
   margin-left: auto;
   margin-right: auto;
-  line-height: 21px;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 20px;
   white-space: nowrap;
   overflow: hidden;
+  background-color: #f5f5f5;
   /* Makes inputs behave like true block-level elements */
   -webkit-box-sizing: border-box; /* Older Webkit */
      -moz-box-sizing: border-box; /* Older FF */
       -ms-box-sizing: border-box; /* IE8 */
           box-sizing: border-box; /* CSS3 spec*/
   /* Hacks for IE7 to make this work just okay enough to function */
-  *width: 270px;
+  *width: 80%;
   *height: 24px;
 }
 

docs/index.html

@@ -136,7 +136,7 @@
             </li>
           </ul>
 
-          <h1Designed for everyone, everywhere.</h1>
+          <h1>Designed for everyone, everywhere.</h1>
           <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
           <div class="row">
             <div class="span4">

docs/less.html

@@ -63,12 +63,19 @@
       <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>
       </header>
 
 
 
       <!-- BUILT WITH LESS
       ================================================== -->
+      <section id="builtWith">
         <div class="page-header">
           <h1>Built with LESS</h1>
         </div>
@@ -101,12 +108,14 @@
             <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
           </div>
         </div>
+      </section>
 
 
 
       <!-- VARIABLES
       ================================================== -->
-      <div class="page-header" id="variables">
+      <section id="variables">
+        <div class="page-header">
           <h1>Variables <small>from variables.less</small></h1>
         </div>
 
@@ -114,7 +123,7 @@
         <table class="table table-bordered table-striped">
           <thead>
             <tr>
-                <th>Variable</th>
+              <th class="span2">Variable</th>
               <th>Value</th>
               <th>Usage</th>
             </tr>
@@ -122,12 +131,12 @@
           <tbody>
             <tr>
               <td><code>@linkColor</code></td>
-                <td>#0069d6</td>
+              <td>#08c</td>
               <td>Default link text color</td>
             </tr>
             <tr>
               <td><code>@linkColorHover</code></td>
-                <td><code>darken(@linkColor, 15)</code></td>
+              <td><code>darken(@linkColor, 15%)</code></td>
               <td>Default link text hover color</td>
             </tr>
           </tbody>
@@ -137,26 +146,36 @@
           <div class="span6">
             <h3>Grayscale colors</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@black</code></td>
                   <td>#000</td>
                 </tr>
+                <tr>
+                  <td><code>@grayDarker</code></td>
+                  <td><code>#222</code></td>
+                </tr>
                 <tr>
                   <td><code>@grayDark</code></td>
-                <td><code>lighten(@black, 25%)</code></td>
+                  <td><code>#333</code></td>
                 </tr>
                 <tr>
                   <td><code>@gray</code></td>
-                <td><code>lighten(@black, 50%)</code></td>
+                  <td><code>#555</code></td>
                 </tr>
                 <tr>
                   <td><code>@grayLight</code></td>
-                <td><code>lighten(@black, 75%)</code></td>
+                  <td><code>#999</code></td>
                 </tr>
                 <tr>
                   <td><code>@grayLighter</code></td>
-                <td><code>lighten(@black, 90%)</code></td>
+                  <td><code>#eee</code></td>
                 </tr>
                 <tr>
                   <td><code>@white</code></td>
@@ -168,10 +187,16 @@
           <div class="span6">
             <h3>Accent colors</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@blue</code></td>
-                <td>#049CDB</td>
+                  <td>#049cdb</td>
                 </tr>
                 <tr>
                   <td><code>@green</code></td>
@@ -200,12 +225,17 @@
               </tbody>
             </table>
           </div>
-      </div>
-
+        </div> <!-- /row -->
         <div class="row">
           <div class="span6">
             <h3>Grid system</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@gridColumns</code></td>
@@ -229,6 +259,12 @@
           <div class="span6">
             <h3>Typography</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">Variable</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@baseFontSize</code></td>
@@ -246,8 +282,7 @@
               </tbody>
             </table>
           </div>
-      </div>
-
+        </div> <!-- /row -->
         <div class="row">
           <div class="span3">
             <h3>Visuals</h3>
@@ -263,7 +298,9 @@
               </tbody>
             </table>
           </div>
-      </div>
+        </div> <!-- /row -->
+      </section>
+
 
 
       <!-- MIXINS

docs/templates/pages/index.mustache

@@ -76,7 +76,7 @@
             </li>
           </ul>
 
-          <h1{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
+          <h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
           <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
           <div class="row">
             <div class="span4">

docs/templates/pages/less.mustache

@@ -3,12 +3,19 @@
       <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>
       </header>
 
 
 
       <!-- BUILT WITH LESS
       ================================================== -->
+      <section id="builtWith">
         <div class="page-header">
           <h1>{{_i}}Built with LESS{{/i}}</h1>
         </div>
@@ -41,12 +48,14 @@
             <p>{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}</p>
           </div>
         </div>
+      </section>
 
 
 
       <!-- VARIABLES
       ================================================== -->
-      <div class="page-header" id="variables">
+      <section id="variables">
+        <div class="page-header">
           <h1>{{_i}}Variables <small>from variables.less</small>{{/i}}</h1>
         </div>
 
@@ -54,7 +63,7 @@
         <table class="table table-bordered table-striped">
           <thead>
             <tr>
-                <th>{{_i}}Variable{{/i}}</th>
+              <th class="span2">{{_i}}Variable{{/i}}</th>
               <th>{{_i}}Value{{/i}}</th>
               <th>{{_i}}Usage{{/i}}</th>
             </tr>
@@ -62,12 +71,12 @@
           <tbody>
             <tr>
               <td><code>@linkColor</code></td>
-                <td>#0069d6</td>
+              <td>#08c</td>
               <td>{{_i}}Default link text color{{/i}}</td>
             </tr>
             <tr>
               <td><code>@linkColorHover</code></td>
-                <td><code>darken(@linkColor, 15)</code></td>
+              <td><code>darken(@linkColor, 15%)</code></td>
               <td>{{_i}}Default link text hover color{{/i}}</td>
             </tr>
           </tbody>
@@ -77,26 +86,36 @@
           <div class="span6">
             <h3>{{_i}}Grayscale colors{{/i}}</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@black</code></td>
                   <td>#000</td>
                 </tr>
+                <tr>
+                  <td><code>@grayDarker</code></td>
+                  <td><code>#222</code></td>
+                </tr>
                 <tr>
                   <td><code>@grayDark</code></td>
-                <td><code>lighten(@black, 25%)</code></td>
+                  <td><code>#333</code></td>
                 </tr>
                 <tr>
                   <td><code>@gray</code></td>
-                <td><code>lighten(@black, 50%)</code></td>
+                  <td><code>#555</code></td>
                 </tr>
                 <tr>
                   <td><code>@grayLight</code></td>
-                <td><code>lighten(@black, 75%)</code></td>
+                  <td><code>#999</code></td>
                 </tr>
                 <tr>
                   <td><code>@grayLighter</code></td>
-                <td><code>lighten(@black, 90%)</code></td>
+                  <td><code>#eee</code></td>
                 </tr>
                 <tr>
                   <td><code>@white</code></td>
@@ -108,10 +127,16 @@
           <div class="span6">
             <h3>{{_i}}Accent colors{{/i}}</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@blue</code></td>
-                <td>#049CDB</td>
+                  <td>#049cdb</td>
                 </tr>
                 <tr>
                   <td><code>@green</code></td>
@@ -140,12 +165,17 @@
               </tbody>
             </table>
           </div>
-      </div>
-
+        </div> <!-- /row -->
         <div class="row">
           <div class="span6">
             <h3>{{_i}}Grid system{{/i}}</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@gridColumns</code></td>
@@ -169,6 +199,12 @@
           <div class="span6">
             <h3>{{_i}}Typography{{/i}}</h3>
             <table class="table table-bordered table-striped">
+              <thead>
+                <tr>
+                  <th class="span2">{{_i}}Variable{{/i}}</th>
+                  <th>{{_i}}Value{{/i}}</th>
+                </tr>
+              </thead>
               <tbody>
                 <tr>
                   <td><code>@baseFontSize</code></td>
@@ -186,8 +222,7 @@
               </tbody>
             </table>
           </div>
-      </div>
-
+        </div> <!-- /row -->
         <div class="row">
           <div class="span3">
             <h3>{{_i}}Visuals{{/i}}</h3>
@@ -203,7 +238,9 @@
               </tbody>
             </table>
           </div>
-      </div>
+        </div> <!-- /row -->
+      </section>
+
 
 
       <!-- MIXINS

lib/type.less

@@ -175,6 +175,7 @@ blockquote {
   }
 }
 
+// Quotes
 q:before,
 q:after,
 blockquote:before, 
@@ -195,13 +196,16 @@ code,
 pre {
   padding: 0 3px 2px;
   #font > #family > .monospace;
-  font-size: 12px;
+  font-size: @baseFontSize - 2;
   color: @grayDark;
   .border-radius(3px);
 }
 code {
-  padding: 1px 3px;
+  padding: 3px 4px;
   background-color: lighten(@orange, 40%);
+  color: #d14;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
 }
 pre {
   display: block;
@@ -210,7 +214,7 @@ pre {
   font-size: 12px;
   line-height: @baseLineHeight;
   background-color: #f5f5f5;
-  border: 1px solid #ccc;
+  border: 1px solid #ccc; // fallback for IE7-8
   border: 1px solid rgba(0,0,0,.15);
   .border-radius(4px);
   white-space: pre;

lib/variables.less

@@ -9,7 +9,7 @@
 
 // Links
 @linkColor:             #08c;
-@linkColorHover:        darken(@linkColor, 15);
+@linkColorHover:        darken(@linkColor, 15%);
 
 // Grays
 @black:                 #000;
@@ -21,8 +21,8 @@
 @white:                 #fff;
 
 // Accent colors
-@blue:                  #049CDB;
-@blueDark:              #0064CD;
+@blue:                  #049cdb;
+@blueDark:              #0064cd;
 @green:                 #46a546;
 @red:                   #9d261d;
 @yellow:                #ffc40d;