adding note in the masthead about less.js and browser support

2 files changed, 28 insertions, 18 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2ddd32980c..92f9d95605 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -27,38 +27,42 @@ section {
 }
 #masthead div.inner, #footer div.inner {
   background: transparent url(../img/grid-18px.png) top center;
-  padding: 45px 0 54px;
+  padding: 45px 0;
   -webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
   box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
 }
 #masthead h1,
 #footer h1,
-#masthead h4,
-#footer h4,
 #masthead p,
-#footer p,
-#masthead small,
-#footer small {
+#footer p {
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
 }
+#masthead p a,
+#footer p a {
+  color: #fff;
+  font-weight: bold;
+}
 #masthead {
   margin-top: 40px;
 }
+#masthead h1,
+#masthead p {
+  text-align: center;
+  margin-bottom: 9px;
+}
 #masthead h1 {
   font-size: 54px;
   line-height: 1;
-  text-align: center;
-  margin-bottom: 9px;
   text-shadow: 0 1px 2px rgba(0,0,0,.5);
 }
+#masthead p {
+  font-weight: 300;
+}
 #masthead p.lead {
   font-size: 20px;
-  font-weight: 300;
   line-height: 27px;
-  text-align: center;
-  margin: 0;
 }
 
 div.quickstart {
@@ -79,6 +83,9 @@ div.quickstart {
 }
 div.quickstart div.row {
   margin: 0 -20px;
+  -webkit-box-shadow: 1px 0 0 #f9f9f9;
+  -moz-box-shadow: 1px 0 0 #f9f9f9;
+  box-shadow: 1px 0 0 #f9f9f9;
 }
 div.quickstart div.columns {
   width: 285px;
@@ -86,6 +93,9 @@ div.quickstart div.columns {
   margin-left: 0;
   padding: 17px 20px 26px;
   border-left: 1px solid #eee;
+  -webkit-box-shadow: inset 1px 0 0 #f9f9f9;
+  -moz-box-shadow: inset 1px 0 0 #f9f9f9;
+  box-shadow: inset 1px 0 0 #f9f9f9;
 }
 div.quickstart div.columns:last-child {
   border-right: 1px solid #eee;
@@ -121,10 +131,6 @@ div.quickstart form textarea {
   margin-bottom: 0;
   color: rgba(255,255,255,.8)
 }
-#footer p a {
-  color: #fff;
-  font-weight: bold;
-}
 /* Special grid styles
 -------------------------------------------------- */
 .show-grid {
diff --git a/docs/index.html b/docs/index.html
index 63cf6c2c7d..465e53ef2e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,7 +25,7 @@
           <img src="assets/img/twitter-logo-no-bird.png" alt="Twitter" /> <span>bootstrap</span>
         </a></h3>
         <ul>
-          <li><a href="#masthead">Overview</a></li>
+          <li class="active"><a href="#masthead">Overview</a></li>
           <li><a href="#grid-system">Grid</a></li>
           <li><a href="#layouts">Layouts</a></li>
           <li><a href="#typography">Typography</a></li>
@@ -47,7 +47,11 @@
             <div class="span11 columns">
 -->
               <h1>Twitter Bootstrap</h1>
-              <p class="lead">Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.</p>
+              <p class="lead">
+                Bootstrap is a toolkit from Twitter designed to kickstart development of websites and apps.<br />
+                It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
+              </p>
+              <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with LESS">built with LESS</a> and was designed to work out of the gate with only modern browsers in mind.</p>
 <!--
             </div>
             <div class="span5 columns">
@@ -1101,7 +1105,7 @@
 
 
 
-<section id="preboot">
+<section id="less">
 <div class="page-header">
   <h1>Using Bootstrap with LESS <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
 </div>