overhaul docs on sub pages, clean up css and copy

docs/assets/css/docs.css

@@ -12,12 +12,8 @@
 
 body {
   position: relative;
-  padding-top: 80px;
+  padding-top: 40px;
   font-size: 14px;
-  background-color: #fff;
-  background-image: url(../img/grid-20px.png);
-  background-repeat: repeat-x;
-  background-position: 0 40px;
 }
 
 /* Code in headings */
@@ -87,7 +83,22 @@ hr.soften {
 ------------------------- */
 .jumbotron {
   position: relative;
+  padding: 40px 0;
+  color: #fff;
   text-align: center;
+  text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
+  background: #020031; /* Old browsers */
+  background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* IE10+ */
+  background: linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+     -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+          box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+
 }
 .jumbotron h1 {
   font-size: 80px;
@@ -118,22 +129,8 @@ hr.soften {
 ------------------------- */
 .masthead {
   padding: 50px 0 60px;
-  margin-top: -40px;
   margin-bottom: 0;
   color: #fff;
-  text-align: center;
-  text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
-  background: #020031; /* Old browsers */
-  background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* IE10+ */
-  background: linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-     -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-          box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
 }
 .masthead h1 {
   font-size: 120px;
@@ -211,6 +208,9 @@ hr.soften {
 .subhead h1 {
   font-size: 60px;
 }
+.subhead p {
+  margin-bottom: 10px;
+}
 .subhead .navbar {
   display: none;
 }
@@ -736,7 +736,7 @@ form.bs-docs-example {
     padding-top: 0;
   }
   /* Widen masthead and social buttons to fill body padding */
-  .masthead {
+  .jumbotron {
     margin-top:   -20px; /* Offset bottom margin on .navbar */
   }
 }
@@ -750,7 +750,7 @@ form.bs-docs-example {
   }
 
   /* Widen masthead and social buttons to fill body padding */
-  .masthead {
+  .jumbotron {
     padding: 40px 20px;
     margin-top:   -20px; /* Offset bottom margin on .navbar */
     margin-right: -20px;

docs/download.html

@@ -66,8 +66,6 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
@@ -416,8 +414,6 @@
   </section><!-- /download -->
 </form>
 
-    </div>
-
 
 
    <!-- Footer

docs/examples.html

@@ -66,8 +66,6 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
@@ -100,8 +98,6 @@
   </li>
 </ul>
 
-    </div>
-
 
 
    <!-- Footer

docs/extend.html

@@ -66,113 +66,114 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
-  <h1>Extending Bootstrap</h1>
-  <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
+  <div class="container">
+    <h1>Extending Bootstrap</h1>
+    <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
+  <div>
 </header>
 
+<div class="container">
 
 
-<!-- Docs nav
-================================================== -->
-<div class="row">
-  <div class="span3 bs-docs-sidebar">
-    <ul class="nav nav-list bs-docs-sidenav">
-      <li><a href="#built-with-less">Built with LESS <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#compiling">Compiling Bootstrap <i class="icon-chevron-right"></i></a></li>
-      <li><a href="#static-assets">Use as static assets <i class="icon-chevron-right"></i></a></li>
-    </ul>
-  </div>
-  <div class="span9">
+  <!-- Docs nav
+  ================================================== -->
+  <div class="row">
+    <div class="span3 bs-docs-sidebar">
+      <ul class="nav nav-list bs-docs-sidenav">
+        <li><a href="#built-with-less">Built with LESS <i class="icon-chevron-right"></i></a></li>
+        <li><a href="#compiling">Compiling Bootstrap <i class="icon-chevron-right"></i></a></li>
+        <li><a href="#static-assets">Use as static assets <i class="icon-chevron-right"></i></a></li>
+      </ul>
+    </div>
+    <div class="span9">
 
 
 
-    <!-- BUILT WITH LESS
-    ================================================== -->
-    <section id="built-with-less">
-      <div class="page-header">
-        <h1>Built with LESS</h1>
-      </div>
+      <!-- BUILT WITH LESS
+      ================================================== -->
+      <section id="built-with-less">
+        <div class="page-header">
+          <h1>Built with LESS</h1>
+        </div>
 
-      <h3>Why LESS?</h3>
-      <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
+        <h3>Why LESS?</h3>
+        <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
 
-      <h3>What's included?</h3>
-      <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
+        <h3>What's included?</h3>
+        <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
 
-      <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 <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
-    </section>
+        <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 <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
+      </section>
 
 
 
-    <!-- COMPILING LESS AND BOOTSTRAP
-    ================================================== -->
-    <section id="compiling">
-      <div class="page-header">
-        <h1>Compiling Bootstrap with LESS</h1>
-      </div>
-      <div class="alert alert-info">
-        <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
-      </div>
+      <!-- COMPILING LESS AND BOOTSTRAP
+      ================================================== -->
+      <section id="compiling">
+        <div class="page-header">
+          <h1>Compiling Bootstrap with LESS</h1>
+        </div>
+        <div class="alert alert-info">
+          <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
+        </div>
 
-      <h2>Tools for compiling</h2>
+        <h2>Tools for compiling</h2>
 
-      <h3>Node with makefile</h3>
-      <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
-      <pre>$ npm install -g less jshint recess uglify-js</pre>
-      <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
-      <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
+        <h3>Node with makefile</h3>
+        <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
+        <pre>$ npm install -g less jshint recess uglify-js</pre>
+        <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
+        <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
 
-      <h3>Command line</h3>
-      <p>Install the LESS command line tool via Node and run the following command:</p>
-      <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
-      <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
+        <h3>Command line</h3>
+        <p>Install the LESS command line tool via Node and run the following command:</p>
+        <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
+        <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
 
-      <h3>Javascript</h3>
-      <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
+        <h3>Javascript</h3>
+        <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
 <pre class="prettyprint">
 &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
 &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
 </pre>
-      <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
+        <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
 
-      <h3>Unofficial Mac app</h3>
-      <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
-      <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
+        <h3>Unofficial Mac app</h3>
+        <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
+        <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
 
-      <h3>More Mac apps</h3>
-      <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
-      <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
-      <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
-      <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
-      <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
-      <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
+        <h3>More Mac apps</h3>
+        <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
+        <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
+        <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
+        <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
+        <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
+        <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
 
-    </section>
+      </section>
 
 
 
-    <!-- Static assets
-    ================================================== -->
-    <section id="static-assets">
-      <div class="page-header">
-        <h1>Use as static assets</h1>
-      </div>
-      <p>...</p>
-    </section>
+      <!-- Static assets
+      ================================================== -->
+      <section id="static-assets">
+        <div class="page-header">
+          <h1>Use as static assets</h1>
+        </div>
+        <p>...</p>
+      </section>
 
 
 
+    </div>
   </div>
-</div>
 
-    </div>
+</div>
 
 
 

docs/getting-started.html

@@ -66,15 +66,17 @@
       </div>
     </div>
 
-    <div class="container">
-
+</div>
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
   <h1>Getting started</h1>
   <p class="lead">Overview of the project, it's contents, and how to get started with a simple template.</p>
+</div>
 </header>
 
+<div class="container">
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">
@@ -211,8 +213,6 @@
 
   </div>
 </div>
-    </div>
-
 
 
    <!-- Footer

docs/index.html

@@ -66,16 +66,13 @@
       </div>
     </div>
 
-    <div class="container">
-
-</div>
-
 <div class="jumbotron masthead">
   <div class="container">
     <h1>Bootstrap</h1>
     <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
     <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a></p>
     <ul class="masthead-links">
+      <li><a href="./getting-started.html" >Getting started</a></li>
       <li><a href="./download.html" >Customize</a></li>
       <li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li>
       <li>Version 2.1.0</li>
@@ -158,7 +155,7 @@
 
   </div><!-- /.marketing -->
 
-    </div>
+</div>
 
 
 

docs/templates/layout.mustache

@@ -78,12 +78,8 @@
       </div>
     </div>
 
-    <div class="container">
-
 {{>body}}
 
-    </div>{{! /container }}
-
 
 
    <!-- Footer

docs/templates/pages/getting-started.mustache

+</div>
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
+  <div class="container">
   <h1>{{_i}}Getting started{{/i}}</h1>
   <p class="lead">{{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}</p>
+</div>
 </header>
 
+<div class="container">
 <div class="row">
   <div class="span3 bs-docs-sidebar">
     <ul class="nav nav-list bs-docs-sidenav">

docs/templates/pages/index.mustache

-</div>
-
 <div class="jumbotron masthead">
   <div class="container">
     <h1>Bootstrap</h1>
     <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
     <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
     <ul class="masthead-links">
+      <li><a href="./getting-started.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Getting started']);"{{/production}}>Getting started</a></li>
       <li><a href="./download.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);"{{/production}}>Customize</a></li>
       <li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
       <li>Version 2.1.0</li>
@@ -87,3 +86,5 @@
      </div>
 
   </div><!-- /.marketing -->
+
+</div>{{! /container }}

docs/upgrading.html

@@ -66,8 +66,6 @@
       </div>
     </div>
 
-    <div class="container">
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
@@ -263,8 +261,6 @@
 </section>
 
 
-    </div>
-
 
 
    <!-- Footer