From 70e81e6f55ad77f3777e87c4edd646a2f5ac8bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Jul 2012 08:42:09 -0700 Subject: [PATCH 1/9] new jumbotron --- docs/assets/css/bootstrap-responsive.css | 5 ++ docs/assets/css/bootstrap.css | 39 ++++++++++------ docs/assets/css/docs.css | 58 ++++++++++++++++++++++++ docs/index.html | 15 +++++- docs/templates/pages/index.mustache | 15 +++++- less/buttons.less | 4 +- less/variables.less | 2 +- 7 files changed, 120 insertions(+), 18 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 10831d9049..f052417256 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -15,6 +15,7 @@ .clearfix:before, .clearfix:after { display: table; + line-height: 0; content: ""; } @@ -94,6 +95,7 @@ .row:before, .row:after { display: table; + line-height: 0; content: ""; } .row:after { @@ -187,6 +189,7 @@ .row-fluid:before, .row-fluid:after { display: table; + line-height: 0; content: ""; } .row-fluid:after { @@ -434,6 +437,7 @@ .row:before, .row:after { display: table; + line-height: 0; content: ""; } .row:after { @@ -527,6 +531,7 @@ .row-fluid:before, .row-fluid:after { display: table; + line-height: 0; content: ""; } .row-fluid:after { diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f0f7dd77c3..e4787ae1c4 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -130,6 +130,7 @@ textarea { .clearfix:before, .clearfix:after { display: table; + line-height: 0; content: ""; } @@ -181,6 +182,7 @@ a:hover { .row:before, .row:after { display: table; + line-height: 0; content: ""; } @@ -303,6 +305,7 @@ a:hover { .row-fluid:before, .row-fluid:after { display: table; + line-height: 0; content: ""; } @@ -515,6 +518,7 @@ a:hover { .container:before, .container:after { display: table; + line-height: 0; content: ""; } @@ -531,6 +535,7 @@ a:hover { .container-fluid:before, .container-fluid:after { display: table; + line-height: 0; content: ""; } @@ -1331,6 +1336,7 @@ select:focus:required:invalid:focus { .form-actions:before, .form-actions:after { display: table; + line-height: 0; content: ""; } @@ -1600,6 +1606,7 @@ legend + .control-group { .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; + line-height: 0; content: ""; } @@ -2758,9 +2765,9 @@ button.close { filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); *zoom: 1; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:hover, @@ -2807,9 +2814,9 @@ button.close { background-color: #d9d9d9 \9; background-image: none; outline: 0; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled, @@ -3029,17 +3036,17 @@ button.close { } .btn-inverse { - background-color: #414141; + background-color: #363636; *background-color: #222222; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222)); - background-image: -webkit-linear-gradient(top, #555555, #222222); - background-image: -o-linear-gradient(top, #555555, #222222); - background-image: linear-gradient(top, #555555, #222222); - background-image: -moz-linear-gradient(top, #555555, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); + background-image: -webkit-linear-gradient(top, #444444, #222222); + background-image: -o-linear-gradient(top, #444444, #222222); + background-image: linear-gradient(top, #444444, #222222); + background-image: -moz-linear-gradient(top, #444444, #222222); background-repeat: repeat-x; border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -3468,6 +3475,7 @@ input[type="submit"].btn.btn-mini { .nav-tabs:after, .nav-pills:after { display: table; + line-height: 0; content: ""; } @@ -3641,6 +3649,7 @@ input[type="submit"].btn.btn-mini { .tabbable:before, .tabbable:after { display: table; + line-height: 0; content: ""; } @@ -3845,6 +3854,7 @@ input[type="submit"].btn.btn-mini { .navbar-form:before, .navbar-form:after { display: table; + line-height: 0; content: ""; } @@ -4373,6 +4383,7 @@ input[type="submit"].btn.btn-mini { .pager:before, .pager:after { display: table; + line-height: 0; content: ""; } @@ -4522,6 +4533,7 @@ input[type="submit"].btn.btn-mini { .modal-footer:before, .modal-footer:after { display: table; + line-height: 0; content: ""; } @@ -4814,6 +4826,7 @@ input[type="submit"].btn.btn-mini { .thumbnails:before, .thumbnails:after { display: table; + line-height: 0; content: ""; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 772fee2c36..1328177a47 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -775,3 +775,61 @@ form.bs-docs-example { float: none; } } + + + + +.navbar { +} +.jumbo { + padding: 100px 0; + margin-top: -60px; + background-color: #222; + color: #fff; + text-align: center; + text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075); + + background: #c9cabc; /* Old browsers */ +background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */ +background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#c9cabc), color-stop(100%,#68686d)); /* Chrome,Safari4+ */ +background: -webkit-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Chrome10+,Safari5.1+ */ +background: -o-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* Opera 11.10+ */ +background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */ +background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + + xborder-bottom: 1px solid #68686d; + + -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); +} +.jumbo h1 { + font-size: 120px; + font-weight: 200; + line-height: 1; + margin: 0 0 5px; + letter-spacing: -2px; +} +.jumbo p { + margin-bottom: 30px; + font-size: 40px; + font-weight: 200; + line-height: 1.25; +} +.jumbo .btn { + font-size: 20px; + padding: 14px 24px; + margin: 0 10px 30px 0; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); +} +.jumbo .btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); +} + + + diff --git a/docs/index.html b/docs/index.html index 4e028a13f4..f2b6c35d70 100644 --- a/docs/index.html +++ b/docs/index.html @@ -75,9 +75,22 @@
+
+ +
+
+

Bootstrap

+

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

+ Download Bootstrap (v2.1.0) +
+
+ +
+ + -
+ -
-
-

Designed for everyone, everywhere.

+ +

Introducing Bootstrap.

Need reasons to love Bootstrap? Look no further.

-
-
- -

Built for and by nerds

-

We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.

- -

Cross-everything

-

Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.

- - -

12-column grid

-

Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.

- - -

Responsive design

-

Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.

+
+
+ +

Built by nerds, for nerds.

+

Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

-
- +
+ +

Designed for everyone.

+

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

+
+
+ +

Packed with features.

+

Utilize the 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

+
+
+ + +
+-->

Built with Bootstrap.

For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.

- +
+ +
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index e2a35003da..b6c4b01122 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -4,7 +4,12 @@

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

- {{_i}}Download Bootstrap (v2.1.0){{/i}} +

{{_i}}Download Bootstrap{{/i}}

+
@@ -48,31 +53,30 @@
-
-
-

{{_i}}Designed for everyone, everywhere.{{/i}}

+ +

{{_i}}Introducing Bootstrap.{{/i}}

{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}

-
-
- -

{{_i}}Built for and by nerds{{/i}}

-

{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}

- -

{{_i}}Cross-everything{{/i}}

-

{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}

- - -

{{_i}}12-column grid{{/i}}

-

{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}

- - -

{{_i}}Responsive design{{/i}}

-

{{_i}}Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}

+
+
+ +

{{_i}}Built by nerds, for nerds.{{/i}}

+

{{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}

-
- +
+ +

{{_i}}Designed for everyone.{{/i}}

+

{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

+
+
+ +

{{_i}}Packed with features.{{/i}}

+

{{_i}}Utilize the 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

+
+
+ + +
+-->

{{_i}}Built with Bootstrap.{{/i}}

{{_i}}For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.{{/i}}

- +
+ +
diff --git a/less/buttons.less b/less/buttons.less index 389c484483..c46b7cf3e2 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -26,7 +26,7 @@ border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Hover state diff --git a/less/navbar.less b/less/navbar.less index 38edac2885..a5d1e7e659 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -383,11 +383,18 @@ } .navbar-subnav .navbar-inner { padding: 0; - #gradient > .vertical(#f9f9f9, #f1f1f1); + #gradient > .vertical(#ffffff, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; } +// Lighten vertical dividers +.navbar-subnav .divider-vertical { + background-color: #f1f1f1; + border-right-color: #ffffff; +} + + // Change link colors back .navbar-subnav .nav > li > a { color: @linkColor; @@ -401,7 +408,10 @@ .navbar-subnav .nav > .active > a, .navbar-subnav .nav > .active > a:hover { color: #777; - background-color: #e5e5e5; + background-color: #eee; + -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); + -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); + box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); } // Dropdown carets diff --git a/less/variables.less b/less/variables.less index dcd2d5558e..5d900164cf 100644 --- a/less/variables.less +++ b/less/variables.less @@ -73,7 +73,7 @@ @btnBorder: #ccc; @btnPrimaryBackground: @linkColor; -@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); +@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4; @@ -155,8 +155,8 @@ // Navbar // ------------------------- @navbarHeight: 40px; -@navbarBackground: @grayDarker; -@navbarBackgroundHighlight: @grayDark; +@navbarBackground: #111; +@navbarBackgroundHighlight: #222; @navbarText: @grayLight; @navbarLinkColor: @grayLight; From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 10:12:15 -0700 Subject: [PATCH 4/9] update thumbnails to fix display issues and refine aesthetics --- docs/assets/css/bootstrap.css | 9 +- docs/assets/css/docs.css | 4 +- docs/components.html | 115 +++++++++++++---------- docs/templates/pages/components.mustache | 115 +++++++++++++---------- less/thumbnails.less | 5 +- 5 files changed, 144 insertions(+), 104 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 7520a3b046..74f7094d3b 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4855,14 +4855,14 @@ input[type="submit"].btn.btn-mini { .thumbnail { display: block; padding: 4px; - line-height: 1; + line-height: 20px; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); } a.thumbnail:hover { @@ -4881,6 +4881,7 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; + color: #555555; } .label, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b003b89d5d..7b12bb5da4 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -33,10 +33,10 @@ body { p { margin-bottom: 15px; } -li { +/*li { line-height: 25px; } - +*/ /* Code in headings */ h3 code { font-size: 14px; diff --git a/docs/components.html b/docs/components.html index 0c81aefa52..ed1ba953ab 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1679,53 +1679,67 @@

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

- +
+ +

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

-
    -
  • -
    - -
    -
    Thumbnail label
    -

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    -

    Action Action

    +
    +
      +
    • +
      + +
      +

      Thumbnail label

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      Action Action

      +
      -
    -
    • -
  • -
    - -
    -
    Thumbnail label
    -

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    -

    Action Action

    +
    • +
  • +
    + +
    +

    Thumbnail label

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    Action Action

    +
    -
- - + +
  • +
    + +
    +

    Thumbnail label

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    Action Action

    +
    +
    +
    • + +

    Why use thumbnails

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    @@ -1740,9 +1754,9 @@

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img src="http://placehold.it/300x200" alt="">
     </a>
   </li>
   ...
@@ -1751,11 +1765,11 @@
   
    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:
    
 
     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
+      <img src="http://placehold.it/300x200" alt="">
+      <h3>Thumbnail label</h3>
+      <p>Thumbnail caption...</p>
     </div>
   </li>
   ...
@@ -1795,6 +1809,11 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 4fc982e5ba..ea6cc4516f 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1602,53 +1602,67 @@
 
   
    {{_i}}Default thumbnails{{/i}}
    
   
    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}
    
-  
+  
    
+    
+  
    
 
   
    {{_i}}Highly customizable{{/i}}
    
   
    {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}
    
-  
      
-    
    • 
-      
      
-        
-        
      
-          
      {{_i}}Thumbnail label{{/i}}
      
-          
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
      
-          
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+  
      
+    
        
+      
      • 
+        
        
+          
+          
        
+            
        {{_i}}Thumbnail label{{/i}}
        
+            
        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
        
+            
        {{_i}}Action{{/i}} {{_i}}Action{{/i}}
        
+          
        
         
        
-      
      
-    
      • 
-    
    • 
-      
      
-        
-        
      
-          
      {{_i}}Thumbnail label{{/i}}
      
-          
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
      
-          
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+      
      • 
+      
    • 
+        
      
+          
+          
      
+            
      {{_i}}Thumbnail label{{/i}}
      
+            
      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
      
+            
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+          
      
         
      
-
    - - + +
  • +
    + +
    +

    {{_i}}Thumbnail label{{/i}}

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    {{_i}}Action{{/i}} {{_i}}Action{{/i}}

    +
    +
    +
    • + +

    {{_i}}Why use thumbnails{{/i}}

    {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

    @@ -1663,9 +1677,9 @@

    {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img src="http://placehold.it/300x200" alt="">
     </a>
   </li>
   ...
@@ -1674,11 +1688,11 @@
   
    {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}
    
 
     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>{{_i}}Thumbnail label{{/i}}</h5>
-      <p>{{_i}}Thumbnail caption right here...{{/i}}</p>
+      <img src="http://placehold.it/300x200" alt="">
+      <h3>{{_i}}Thumbnail label{{/i}}</h3>
+      <p>{{_i}}Thumbnail caption...{{/i}}</p>
     </div>
   </li>
   ...
@@ -1718,6 +1732,11 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
diff --git a/less/thumbnails.less b/less/thumbnails.less
index d609c7df31..f229a2dada 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,10 +27,10 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: 1;
+  line-height: 20px;
   border: 1px solid #ddd;
   .border-radius(4px);
-  .box-shadow(0 1px 1px rgba(0,0,0,.075));
+  .box-shadow(0 1px 3px rgba(0,0,0,.055));
 }
 // Add a hover state for linked versions only
 a.thumbnail:hover {
@@ -47,4 +47,5 @@ a.thumbnail:hover {
 }
 .thumbnail .caption {
   padding: 9px;
+  color: @gray;
 }

From c6ee96c02587aeea0da52018325c100bfd45127a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 10:37:23 -0700
Subject: [PATCH 5/9] fix up subnav styles, add subnav search form styles, add
 some basic docs for subnav

---
 docs/assets/css/bootstrap.css            | 20 ++++++++-
 docs/assets/js/application.js            |  4 +-
 docs/components.html                     | 57 ++++++++++++++++++++++++
 docs/templates/pages/components.mustache | 57 ++++++++++++++++++++++++
 less/navbar.less                         | 18 ++++++--
 5 files changed, 149 insertions(+), 7 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 74f7094d3b..28a4b84679 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4185,13 +4185,12 @@ input[type="submit"].btn.btn-mini {
 -------------------------------------------------- */
 
 .navbar-subnav .navbar-inner {
-  padding: 0;
   background-color: #f9f9f9;
-  background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
   background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
   background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
   background-image: linear-gradient(top, #ffffff, #f1f1f1);
+  background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
   background-repeat: repeat-x;
   border: 1px solid #e5e5e5;
   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
@@ -4229,6 +4228,23 @@ input[type="submit"].btn.btn-mini {
   border-bottom-color: #0088cc;
 }
 
+.navbar-subnav .search-query {
+  background-color: #fff;
+  border-color: #ccc;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
+     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.navbar-subnav .search-query:focus,
+.navbar-subnav .search-query.focused {
+  padding: 4px 9px;
+  border: 1px solid rgba(82, 168, 236, 0.8);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
 .navbar-subnav .nav .open > a {
   color: #005580;
 }
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index b2499b6b09..a447c46b7e 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -45,8 +45,8 @@
 
     // fix sub nav on scroll
     var $win = $(window)
-      , $nav = $('.navbar-subnav')
-      , navTop = $('.navbar-subnav').length && $('.navbar-subnav').offset().top - 40
+      , $nav = $('.subhead .navbar-subnav')
+      , navTop = $('.subhead .navbar-subnav').length && $('.subhead .navbar-subnav').offset().top - 40
       , isFixed = 0
 
     processScroll()
diff --git a/docs/components.html b/docs/components.html
index ed1ba953ab..4a658c7605 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1254,6 +1254,63 @@
     Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
   
 
+
+  
    
+
+
+  
    Responsive navbar
    
+  
    To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
    
+  
    
+    
    
+      
    
+        
    
+          
+            
+            
+            
+          
+          Title
+          
    
+            
+            
    
+              
+            
    
+            
+          
    
+        
    
+      
    
+    
    
+  
    
+
 
 
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index ea6cc4516f..5fb11ccf28 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1177,6 +1177,63 @@
     {{_i}}Heads up!{{/i}} The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
   
 
+
+  
    
+
+
+  
    {{_i}}Responsive navbar{{/i}}
    
+  
    {{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
    
+  
    
+    
    
+      
    
+        
    
+          
+            
+            
+            
+          
+          {{_i}}Title{{/i}}
+          
    
+            
+            
    
+              
+            
    
+            
+          
    
+        
    
+      
    
+    
    
+  
    {{! /example }}
+
 
 
 
diff --git a/less/navbar.less b/less/navbar.less
index a5d1e7e659..a9582e0a47 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -379,10 +379,7 @@
 
 
 // Override the default .navbar
-.navbar-subnav {
-}
 .navbar-subnav .navbar-inner {
-  padding: 0;
   #gradient > .vertical(#ffffff, #f1f1f1);
   .box-shadow(none);
   border: 1px solid #e5e5e5;
@@ -421,6 +418,21 @@
   border-bottom-color: @linkColor;
 }
 
+// Reset search input form
+.navbar-subnav .search-query {
+  background-color: #fff;
+  border-color: #ccc;
+  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
+
+  // On :focus, keep the same padding and border
+  &:focus,
+  &.focused {
+    padding: 4px 9px;
+    border: 1px solid rgba(82,168,236,.8);
+    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
+  }
+}
+
 // Open dropdown dropdown-toggle
 .navbar-subnav .nav .open > a {
   color: @linkColorHover;

From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 15:11:54 -0700
Subject: [PATCH 6/9] updates to type scale

---
 docs/assets/css/bootstrap-responsive.css |  12 +-
 docs/assets/css/bootstrap.css            | 233 +++++++++++------------
 docs/assets/css/docs.css                 |  15 +-
 docs/assets/img/grid-baseline-20px.png   | Bin 0 -> 120 bytes
 docs/base-css.html                       |   7 -
 docs/components.html                     |   7 -
 docs/download.html                       |   7 -
 docs/examples.html                       |   7 -
 docs/extend.html                         |   7 -
 docs/index.html                          |   7 -
 docs/javascript.html                     |   7 -
 docs/scaffolding.html                    |   7 -
 docs/templates/layout.mustache           |   7 -
 docs/upgrading.html                      |   7 -
 less/navbar.less                         |   2 +-
 less/tests/css-tests.css                 |  17 +-
 less/tests/css-tests.html                |  39 ++++
 less/type.less                           |  74 +++----
 less/variables.less                      |   4 +-
 19 files changed, 201 insertions(+), 265 deletions(-)
 create mode 100644 docs/assets/img/grid-baseline-20px.png

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 4102e4d2cc..ac3d334576 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -830,7 +830,7 @@
   }
   .page-header h1 small {
     display: block;
-    line-height: 18px;
+    line-height: 20px;
   }
   input[type="checkbox"],
   input[type="radio"] {
@@ -882,10 +882,10 @@
     position: static;
   }
   .navbar-fixed-top {
-    margin-bottom: 18px;
+    margin-bottom: 20px;
   }
   .navbar-fixed-bottom {
-    margin-top: 18px;
+    margin-top: 20px;
   }
   .navbar-fixed-top .navbar-inner,
   .navbar-fixed-bottom .navbar-inner {
@@ -905,7 +905,7 @@
   }
   .nav-collapse .nav {
     float: none;
-    margin: 0 0 9px;
+    margin: 0 0 10px;
   }
   .nav-collapse .nav > li {
     float: none;
@@ -975,8 +975,8 @@
   .nav-collapse .navbar-form,
   .nav-collapse .navbar-search {
     float: none;
-    padding: 9px 15px;
-    margin: 9px 0;
+    padding: 10px 15px;
+    margin: 10px 0;
     border-top: 1px solid #111111;
     border-bottom: 1px solid #111111;
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 28a4b84679..4ec240ba55 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -158,8 +158,8 @@ textarea {
 body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 20px;
   color: #333333;
   background-color: #ffffff;
 }
@@ -544,19 +544,19 @@ a:hover {
 }
 
 p {
-  margin: 0 0 9px;
+  margin: 0 0 10px;
 }
 
 p small {
-  font-size: 11px;
+  font-size: 12px;
   color: #999999;
 }
 
 .lead {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   font-size: 20px;
   font-weight: 200;
-  line-height: 27px;
+  line-height: 30px;
 }
 
 h1,
@@ -565,9 +565,10 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 0;
+  margin: 10px 0;
   font-family: inherit;
   font-weight: bold;
+  line-height: 1;
   color: inherit;
   text-rendering: optimizelegibility;
 }
@@ -583,70 +584,60 @@ h6 small {
 }
 
 h1 {
-  font-size: 30px;
-  line-height: 36px;
-}
-
-h1 small {
-  font-size: 18px;
+  font-size: 36px;
+  line-height: 40px;
 }
 
 h2 {
+  font-size: 30px;
+  line-height: 40px;
+}
+
+h3 {
+  font-size: 24px;
+  line-height: 40px;
+}
+
+h4 {
+  font-size: 18px;
+  line-height: 20px;
+}
+
+h5 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+h6 {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+h1 small {
   font-size: 24px;
-  line-height: 36px;
 }
 
 h2 small {
   font-size: 18px;
 }
 
-h3 {
-  font-size: 18px;
-  line-height: 27px;
-}
-
 h3 small {
   font-size: 14px;
 }
 
-h4,
-h5,
-h6 {
-  line-height: 18px;
-}
-
-h4 {
+h4 small {
   font-size: 14px;
 }
 
-h4 small {
-  font-size: 12px;
-}
-
-h5 {
-  font-size: 12px;
-}
-
-h6 {
-  font-size: 11px;
-  color: #999999;
-  text-transform: uppercase;
-}
-
 .page-header {
-  padding-bottom: 17px;
-  margin: 18px 0;
+  margin: 20px 0 19px;
   border-bottom: 1px solid #eeeeee;
 }
 
-.page-header h1 {
-  line-height: 1;
-}
-
 ul,
 ol {
   padding: 0;
-  margin: 0 0 9px 25px;
+  margin: 0 0 10px 25px;
 }
 
 ul ul,
@@ -665,7 +656,7 @@ ol {
 }
 
 li {
-  line-height: 18px;
+  line-height: 20px;
 }
 
 ul.unstyled,
@@ -675,12 +666,12 @@ ol.unstyled {
 }
 
 dl {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 dt,
 dd {
-  line-height: 18px;
+  line-height: 20px;
 }
 
 dt {
@@ -688,7 +679,7 @@ dt {
 }
 
 dd {
-  margin-left: 9px;
+  margin-left: 10px;
 }
 
 .dl-horizontal dt {
@@ -706,7 +697,7 @@ dd {
 }
 
 hr {
-  margin: 18px 0;
+  margin: 20px 0;
   border: 0;
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #ffffff;
@@ -736,7 +727,7 @@ abbr.initialism {
 
 blockquote {
   padding: 0 0 0 15px;
-  margin: 0 0 18px;
+  margin: 0 0 20px;
   border-left: 5px solid #eeeeee;
 }
 
@@ -744,12 +735,12 @@ blockquote p {
   margin-bottom: 0;
   font-size: 16px;
   font-weight: 300;
-  line-height: 22.5px;
+  line-height: 25px;
 }
 
 blockquote small {
   display: block;
-  line-height: 18px;
+  line-height: 20px;
   color: #999999;
 }
 
@@ -779,9 +770,9 @@ blockquote:after {
 
 address {
   display: block;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   font-style: normal;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 small {
@@ -796,7 +787,7 @@ code,
 pre {
   padding: 0 3px 2px;
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-  font-size: 12px;
+  font-size: 13px;
   color: #333333;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
@@ -812,10 +803,10 @@ code {
 
 pre {
   display: block;
-  padding: 8.5px;
-  margin: 0 0 9px;
-  font-size: 12.025px;
-  line-height: 18px;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 12.950000000000001px;
+  line-height: 20px;
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre;
@@ -829,7 +820,7 @@ pre {
 }
 
 pre.prettyprint {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 pre code {
@@ -845,7 +836,7 @@ pre code {
 }
 
 form {
-  margin: 0 0 18px;
+  margin: 0 0 20px;
 }
 
 fieldset {
@@ -858,16 +849,16 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: 27px;
-  font-size: 19.5px;
-  line-height: 36px;
+  margin-bottom: 30px;
+  font-size: 21px;
+  line-height: 40px;
   color: #333333;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 }
 
 legend small {
-  font-size: 13.5px;
+  font-size: 15px;
   color: #999999;
 }
 
@@ -876,9 +867,9 @@ input,
 button,
 select,
 textarea {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: normal;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 input,
@@ -911,11 +902,11 @@ input[type="tel"],
 input[type="color"],
 .uneditable-input {
   display: inline-block;
-  height: 18px;
+  height: 20px;
   padding: 4px;
   margin-bottom: 9px;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 20px;
   color: #555555;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
@@ -1325,9 +1316,9 @@ select:focus:required:invalid:focus {
 }
 
 .form-actions {
-  padding: 17px 20px 18px;
-  margin-top: 18px;
-  margin-bottom: 18px;
+  padding: 19px 20px 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
   background-color: #f5f5f5;
   border-top: 1px solid #e5e5e5;
   *zoom: 1;
@@ -1377,7 +1368,7 @@ textarea::-webkit-input-placeholder {
 
 .help-block {
   display: block;
-  margin-bottom: 9px;
+  margin-bottom: 10px;
 }
 
 .help-inline {
@@ -1403,7 +1394,7 @@ textarea::-webkit-input-placeholder {
   position: relative;
   margin-bottom: 0;
   *margin-left: 0;
-  font-size: 13px;
+  font-size: 14px;
   vertical-align: middle;
   -webkit-border-radius: 0 3px 3px 0;
      -moz-border-radius: 0 3px 3px 0;
@@ -1428,12 +1419,12 @@ textarea::-webkit-input-placeholder {
 .input-append .add-on {
   display: inline-block;
   width: auto;
-  height: 18px;
+  height: 20px;
   min-width: 16px;
   padding: 4px 5px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: normal;
-  line-height: 18px;
+  line-height: 20px;
   text-align: center;
   text-shadow: 0 1px 0 #ffffff;
   vertical-align: middle;
@@ -1590,16 +1581,16 @@ input.search-query {
 }
 
 .control-group {
-  margin-bottom: 9px;
+  margin-bottom: 10px;
 }
 
 legend + .control-group {
-  margin-top: 18px;
+  margin-top: 20px;
   -webkit-margin-top-collapse: separate;
 }
 
 .form-horizontal .control-group {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   *zoom: 1;
 }
 
@@ -1633,7 +1624,7 @@ legend + .control-group {
 }
 
 .form-horizontal .help-block {
-  margin-top: 9px;
+  margin-top: 10px;
   margin-bottom: 0;
 }
 
@@ -1650,13 +1641,13 @@ table {
 
 .table {
   width: 100%;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 .table th,
 .table td {
   padding: 8px;
-  line-height: 18px;
+  line-height: 20px;
   text-align: left;
   vertical-align: top;
   border-top: 1px solid #dddddd;
@@ -2569,7 +2560,7 @@ table .span24 {
 .dropdown-menu .divider {
   *width: 100%;
   height: 1px;
-  margin: 8px 1px;
+  margin: 9px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
@@ -2581,7 +2572,7 @@ table .span24 {
   padding: 3px 15px;
   clear: both;
   font-weight: normal;
-  line-height: 18px;
+  line-height: 20px;
   color: #333333;
   white-space: nowrap;
 }
@@ -2709,7 +2700,7 @@ table .span24 {
   float: right;
   font-size: 20px;
   font-weight: bold;
-  line-height: 18px;
+  line-height: 20px;
   color: #000000;
   text-shadow: 0 1px 0 #ffffff;
   opacity: 0.2;
@@ -2738,8 +2729,8 @@ button.close {
   padding: 4px 10px 4px;
   margin-bottom: 0;
   *margin-left: .3em;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 20px;
   *line-height: 20px;
   color: #333333;
   text-align: center;
@@ -2833,7 +2824,7 @@ button.close {
 
 .btn-large {
   padding: 9px 14px;
-  font-size: 15px;
+  font-size: 16px;
   line-height: normal;
   -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
@@ -2846,8 +2837,8 @@ button.close {
 
 .btn-small {
   padding: 5px 9px;
-  font-size: 11px;
-  line-height: 16px;
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .btn-small [class^="icon-"] {
@@ -2856,8 +2847,8 @@ button.close {
 
 .btn-mini {
   padding: 2px 6px;
-  font-size: 11px;
-  line-height: 14px;
+  font-size: 12px;
+  line-height: 16px;
 }
 
 .btn-primary,
@@ -3110,8 +3101,8 @@ input[type="submit"].btn.btn-mini {
 }
 
 .btn-toolbar {
-  margin-top: 9px;
-  margin-bottom: 9px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .btn-toolbar .btn-group {
@@ -3132,16 +3123,16 @@ input[type="submit"].btn.btn-mini {
 
 .btn-group > .btn,
 .btn-group > .dropdown-menu {
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .btn-group > .btn-mini,
 .btn-group > .btn-small {
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .btn-group > .btn-large {
-  font-size: 15px;
+  font-size: 16px;
 }
 
 .btn-group > .btn:first-child {
@@ -3343,7 +3334,7 @@ input[type="submit"].btn.btn-mini {
 
 .alert {
   padding: 8px 35px 8px 14px;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   color: #c09853;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   background-color: #fcf8e3;
@@ -3357,7 +3348,7 @@ input[type="submit"].btn.btn-mini {
   position: relative;
   top: -2px;
   right: -21px;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 .alert-success {
@@ -3394,7 +3385,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .nav {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   margin-left: 0;
   list-style: none;
 }
@@ -3417,7 +3408,7 @@ input[type="submit"].btn.btn-mini {
   padding: 3px 15px;
   font-size: 11px;
   font-weight: bold;
-  line-height: 18px;
+  line-height: 20px;
   color: #999999;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
@@ -3458,7 +3449,7 @@ input[type="submit"].btn.btn-mini {
 .nav-list .divider {
   *width: 100%;
   height: 1px;
-  margin: 8px 1px;
+  margin: 9px 1px;
   *margin: -5px 0 5px;
   overflow: hidden;
   background-color: #e5e5e5;
@@ -3508,7 +3499,7 @@ input[type="submit"].btn.btn-mini {
 .nav-tabs > li > a {
   padding-top: 8px;
   padding-bottom: 8px;
-  line-height: 18px;
+  line-height: 20px;
   border: 1px solid transparent;
   -webkit-border-radius: 4px 4px 0 0;
      -moz-border-radius: 4px 4px 0 0;
@@ -3773,7 +3764,7 @@ input[type="submit"].btn.btn-mini {
 .navbar {
   *position: relative;
   *z-index: 2;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   overflow: visible;
 }
 
@@ -3997,7 +3988,7 @@ input[type="submit"].btn.btn-mini {
 
 .navbar .nav > li > a {
   float: none;
-  padding: 10px 12px 11px;
+  padding: 10px 15px 11px;
   line-height: 19px;
   color: #999999;
   text-decoration: none;
@@ -4012,7 +4003,7 @@ input[type="submit"].btn.btn-mini {
   display: inline-block;
   padding: 4px 10px 4px;
   margin: 5px 5px 6px;
-  line-height: 18px;
+  line-height: 20px;
 }
 
 .navbar .btn-group {
@@ -4285,7 +4276,7 @@ input[type="submit"].btn.btn-mini {
 
 .breadcrumb {
   padding: 7px 14px;
-  margin: 0 0 18px;
+  margin: 0 0 20px;
   list-style: none;
   background-color: #fbfbfb;
   background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
@@ -4321,8 +4312,8 @@ input[type="submit"].btn.btn-mini {
 }
 
 .pagination {
-  height: 36px;
-  margin: 18px 0;
+  height: 40px;
+  margin: 20px 0;
 }
 
 .pagination ul {
@@ -4347,7 +4338,7 @@ input[type="submit"].btn.btn-mini {
 .pagination span {
   float: left;
   padding: 0 14px;
-  line-height: 34px;
+  line-height: 38px;
   text-decoration: none;
   border: 1px solid #ddd;
   border-left-width: 0;
@@ -4397,7 +4388,7 @@ input[type="submit"].btn.btn-mini {
 }
 
 .pager {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   margin-left: 0;
   text-align: center;
   list-style: none;
@@ -4864,7 +4855,7 @@ input[type="submit"].btn.btn-mini {
 
 .thumbnails > li {
   float: left;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   margin-left: 20px;
 }
 
@@ -4902,7 +4893,7 @@ a.thumbnail:hover {
 
 .label,
 .badge {
-  font-size: 10.998px;
+  font-size: 11.844px;
   font-weight: bold;
   line-height: 14px;
   color: #ffffff;
@@ -5177,7 +5168,7 @@ a.badge:hover {
 }
 
 .accordion {
-  margin-bottom: 18px;
+  margin-bottom: 20px;
 }
 
 .accordion-group {
@@ -5208,7 +5199,7 @@ a.badge:hover {
 
 .carousel {
   position: relative;
-  margin-bottom: 18px;
+  margin-bottom: 20px;
   line-height: 1;
 }
 
@@ -5338,7 +5329,7 @@ a.badge:hover {
 .hero-unit p {
   font-size: 18px;
   font-weight: 200;
-  line-height: 27px;
+  line-height: 30px;
   color: inherit;
 }
 
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 7b12bb5da4..6d64028f82 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -26,17 +26,6 @@ body {
   margin: 0 auto;
 }
 
-/* Increase docs base type size and line-heights */
-body {
-  line-height: 20px;
-}
-p {
-  margin-bottom: 15px;
-}
-/*li {
-  line-height: 25px;
-}
-*/
 /* Code in headings */
 h3 code {
   font-size: 14px;
@@ -49,7 +38,6 @@ h3 code {
 -------------------------------------------------- */
 
 .navbar {
-  font-size: 13px;
 }
 
 /* Change the docs' brand */
@@ -197,8 +185,7 @@ hr.soften {
 }
 .marketing h2 {
   font-weight: 400;
-  letter-spacing: -1px;
-}
+`}
 .marketing p {
   color: #555;
 }
diff --git a/docs/assets/img/grid-baseline-20px.png b/docs/assets/img/grid-baseline-20px.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ff044468e1ec5ca0fbd00e523e784302f5abf7d
GIT binary patch
literal 120
zcmeAS@N?(olHy`uVBq!ia0vp^j6f{H!3HFK_`(+gDajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_d9MN*zFjv*Ddl4hJdpm6lV|Nr%DYHSJ%I2i>J7!toSUoDGy
Rs}5Af;OXk;vd$@?2>{_+BEJ9t

literal 0
HcmV?d00001

diff --git a/docs/base-css.html b/docs/base-css.html
index 2b7c1ec712..4655da12fc 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/components.html b/docs/components.html
index 4a658c7605..2c07efbf6e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/download.html b/docs/download.html
index 34fdc741ec..3463cbb030 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/examples.html b/docs/examples.html
index 3b541df3b5..767b024cb6 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/extend.html b/docs/extend.html
index 7169908a6a..77c93af3b9 100644
--- a/docs/extend.html
+++ b/docs/extend.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/index.html b/docs/index.html
index 1789a507c5..683c94086c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/javascript.html b/docs/javascript.html
index 7fb1448ec0..d2a2a961e4 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 3fe6affab9..bb9308ec9f 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 1cda879541..763669b1c8 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -69,13 +69,6 @@
               
  • 
                 {{_i}}Javascript{{/i}}
               
    • 
-              
  • 
-              
  • 
-                {{_i}}Customize{{/i}}
-              
    • 
-              
  • 
-                {{_i}}Examples{{/i}}
-              
    • 
               
  • 
                 {{_i}}Extend{{/i}}
               
    • 
diff --git a/docs/upgrading.html b/docs/upgrading.html
index f001f17721..b12ac2e503 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -57,13 +57,6 @@
               
  • 
                 Javascript
               
    • 
-              
  • 
-              
  • 
-                Customize
-              
    • 
-              
  • 
-                Examples
-              
    • 
               
  • 
                 Extend
               
    • 
diff --git a/less/navbar.less b/less/navbar.less
index a9582e0a47..660838eb8e 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -206,7 +206,7 @@
   float: none;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
+  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
   line-height: 19px;
   color: @navbarLinkColor;
   text-decoration: none;
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index e0870be449..628dbba6f8 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -12,9 +12,24 @@ body {
 .subhead {
   margin-bottom: 36px;
 }
-h4 {
+/*h4 {
   margin-bottom: 5px;
 }
+*/
+
+.type-test {
+  margin-bottom: 20px;
+  padding: 0 20px 20px;
+  background: url(../../docs/assets/img/grid-baseline-20px.png);
+}
+.type-test h1,
+.type-test h2,
+.type-test h3,
+.type-test h4,
+.type-test h5,
+.type-test h6 {
+  xbackground-color: rgba(255,0,0,.2);
+}
 
 
 /* colgroup tests */
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 2396e348cf..4b8b1a2772 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -55,6 +55,45 @@
 
 
 
+
+
+
    
+  
    Typography
    
+
    
+
+
    
+  
    
+    
    
+      
    h1. Heading 1
    
+      
    h2. Heading 2
    
+      
    h3. Heading 3
    
+      
    h4. Heading 4
    
+      
    h5. Heading 5
    
+      
    h6. Heading 6
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+    
    
+  
    
+  
    
+    
    
+      
    h1. Heading 1
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h2. Heading 2
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h3. Heading 3
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h4. Heading 4
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h5. Heading 5
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+      
    h6. Heading 6
    
+      
    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
+    
    
+  
    
+
    
+
+
+
 
 
diff --git a/less/type.less b/less/type.less
index 61a7db493a..8ff42476a6 100644
--- a/less/type.less
+++ b/less/type.less
@@ -3,8 +3,8 @@
 // --------------------------------------------------
 
 
-// BODY TEXT
-// ---------
+// Body text
+// -------------------------
 
 p {
   margin: 0 0 @baseLineHeight / 2;
@@ -20,13 +20,15 @@ p {
   line-height: @baseLineHeight * 1.5;
 }
 
-// HEADINGS
-// --------
+
+// Headings
+// -------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin: (@baseLineHeight / 2) 0;
   font-family: @headingsFontFamily;
   font-weight: @headingsFontWeight;
+  line-height: 1;
   color: @headingsColor;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
@@ -34,59 +36,31 @@ h1, h2, h3, h4, h5, h6 {
     color: @grayLight;
   }
 }
-h1 {
-  font-size: 30px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h3 {
-  font-size: 18px;
-  line-height: @baseLineHeight * 1.5;
-  small {
-    font-size: 14px;
-  }
-}
-h4, h5, h6 {
-  line-height: @baseLineHeight;
-}
-h4 {
-  font-size: 14px;
-  small {
-    font-size: 12px;
-  }
-}
-h5 {
-  font-size: 12px;
-}
-h6 {
-  font-size: 11px;
-  color: @grayLight;
-  text-transform: uppercase;
-}
+h1 { font-size: 36px; line-height: 40px; }
+h2 { font-size: 30px; line-height: 40px; }
+h3 { font-size: 24px; line-height: 40px; }
+h4 { font-size: 18px; line-height: 20px; }
+h5 { font-size: 14px; line-height: 20px; }
+h6 { font-size: 12px; line-height: 20px; }
+
+h1 small { font-size: 24px; }
+h2 small { font-size: 18px; }
+h3 small { font-size: 14px; }
+h4 small { font-size: 14px; }
+
 
 // Page header
+// -------------------------
+
 .page-header {
-  padding-bottom: @baseLineHeight - 1;
-  margin: @baseLineHeight 0;
+  margin: @baseLineHeight 0 (@baseLineHeight - 1);
   border-bottom: 1px solid @grayLighter;
 }
-.page-header h1 {
-  line-height: 1;
-}
 
 
 
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
 
 // Unordered and Ordered lists
 ul, ol {
diff --git a/less/variables.less b/less/variables.less
index 5d900164cf..9a3e0ed4e3 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -48,9 +48,9 @@
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
-@baseFontSize:          13px;
+@baseFontSize:          14px;
 @baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        18px;
+@baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily

From 68146db00454b46493545aff34d06cf2c11e0f6d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 15:15:57 -0700
Subject: [PATCH 7/9] buttons and pre updates for font-size

---
 docs/assets/css/bootstrap.css | 4 ++--
 docs/assets/css/docs.css      | 3 +++
 less/buttons.less             | 2 +-
 less/variables.less           | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 4ec240ba55..329618b05c 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -786,7 +786,7 @@ cite {
 code,
 pre {
   padding: 0 3px 2px;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
   font-size: 13px;
   color: #333333;
   -webkit-border-radius: 3px;
@@ -2726,7 +2726,7 @@ button.close {
 .btn {
   display: inline-block;
   *display: inline;
-  padding: 4px 10px 4px;
+  padding: 4px 14px 4px;
   margin-bottom: 0;
   *margin-left: .3em;
   font-size: 14px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 6d64028f82..bee42dc362 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -428,6 +428,9 @@ h2 + .row {
   margin-left: 0;
   list-style: none;
 }
+.the-icons li {
+  line-height: 25px;
+}
 .the-icons i:hover {
   background-color: rgba(255,0,0,.25);
 }
diff --git a/less/buttons.less b/less/buttons.less
index c46b7cf3e2..b48b0555b8 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -10,7 +10,7 @@
 .btn {
   display: inline-block;
   .ie7-inline-block();
-  padding: 4px 10px 4px;
+  padding: 4px 14px 4px;
   margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
diff --git a/less/variables.less b/less/variables.less
index 9a3e0ed4e3..bc8ff4bed9 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -46,7 +46,7 @@
 // -------------------------
 @sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
-@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
 @baseFontFamily:        @sansFontFamily;

From cd6915cdb4f53f6c8e89599bfacbbb298412ec33 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 5 Jul 2012 19:45:32 -0700
Subject: [PATCH 8/9] tests cleanup on type, homepage content tweaks

---
 docs/index.html                     | 4 ++--
 docs/templates/pages/index.mustache | 4 ++--
 less/tests/css-tests.css            | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 683c94086c..8ceee89336 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -131,12 +131,12 @@
   
    
     
    
       
-      
    Built by nerds, for nerds.
    
+      
    By nerds, for nerds.
    
       
    Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.
    
     
    
     
    
       
-      
    Designed for everyone.
    
+      
    Made for everyone.
    
       
    Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.
    
     
    
     
    
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index b6c4b01122..a40659c5eb 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -61,12 +61,12 @@
   
    
     
    
       
-      
    {{_i}}Built by nerds, for nerds.{{/i}}
    
+      
    {{_i}}By nerds, for nerds.{{/i}}
    
       
    {{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}
    
     
    
     
    
       
-      
    {{_i}}Designed for everyone.{{/i}}
    
+      
    {{_i}}Made for everyone.{{/i}}
    
       
    {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}
    
     
    
     
    
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index 628dbba6f8..6001f53aab 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -28,7 +28,7 @@ body {
 .type-test h4,
 .type-test h5,
 .type-test h6 {
-  xbackground-color: rgba(255,0,0,.2);
+  background-color: rgba(255,0,0,.2);
 }
 
 

From 095e052606a8e1afb496ec4a1e95567a7f123827 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 6 Jul 2012 10:10:56 -0700
Subject: [PATCH 9/9] adding homepage social buttons

---
 docs/assets/css/docs.css            | 22 +++++++++++++---------
 docs/index.html                     | 19 +++++++++++++++++++
 docs/templates/pages/index.mustache | 19 +++++++++++++++++++
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index bee42dc362..6ad151181a 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -147,7 +147,7 @@ hr.soften {
   font-size: 12px;
 }
 .quick-links {
-  min-height: 30px;
+  height: 20px;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -157,15 +157,10 @@ hr.soften {
   min-height: 0;
 }
 .quick-links li {
-  display: inline;
+  display: inline-block;
   margin: 0 8px;
   color: #999;
-}
-.quick-links .github-btn,
-.quick-links .tweet-btn,
-.quick-links .follow-btn {
-  position: relative;
-  top: 5px;
+  line-height: 1;
 }
 
 
@@ -774,7 +769,7 @@ form.bs-docs-example {
           border-radius: 6px;
 }
 .jumbo {
-  padding: 100px 0;
+  padding: 80px 0;
   margin: -60px 0 60px;
   background-color: #222;
   color: #fff;
@@ -859,6 +854,15 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end
 }
 
 
+.jumbo-buttons {
+  padding: 20px 0;
+  margin-top: -60px;
+  text-align: center;
+  background-color: #f5f5f5;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #ddd;
+}
+
 
 @media (max-width: 480px) {
   body {
diff --git a/docs/index.html b/docs/index.html
index 8ceee89336..88d2f6b6a9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -83,6 +83,25 @@
   
    
 
    
 
+
    
+  
    
+    
+  
    
+
    
+
   
    
 
 
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index a40659c5eb..2ca3ed887c 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -13,6 +13,25 @@
   
    
 
    
 
+
    
+  
    
+    
+  
    
+
    
+