update to responsive to fix new masthead

2 files changed, 39 insertions, 84 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ee0b9c8a3..7d36946db 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -37,34 +37,34 @@ section > .row {
 -------------------------------------------------- */
 .jumbotron {
   position: relative;
-}
-.jumbotron h1,
-.jumbotron p {
-  margin-bottom: 10px;
   text-shadow: 0 1px 0 #fff;
 }
 .jumbotron h1 {
-  font-size: 90px;
-  line-height: 1;
   margin-right: 40%;
+  margin-bottom: 10px;
+  font-size: 90px;
   letter-spacing: -1px;
+  line-height: 1;
 }
 .jumbotron p {
-  font-weight: 300;
   margin-right: 32%;
-}
-.jumbotron .lead {
   margin-bottom: 20px;
   font-size: 25px;
+  font-weight: 300;
   line-height: 36px;
 }
 .jumbotron .btn {
   font-size: 20px;
   padding: 14px 24px;
+  margin-right: 5px;
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
           border-radius: 6px;
 }
+.jumbotron .download-info {
+  font-size: 16px;
+  color: #999;
+}
 
 /* Benefits list in masthead */
 .benefits {
@@ -133,9 +133,9 @@ section > .row {
   list-style: none;
   text-align: center;
   background-color: #eee;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
 }
 .quick-links li {
   display: inline;
@@ -167,71 +167,6 @@ section > .row {
 }
 
 
-/* Quickstart section for getting le code
--------------------------------------------------- */
-.quickstart {
-  background-color: #f5f5f5;
-  background-repeat: repeat-x;
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
-  background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
-  background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
-  background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
-  background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
-  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
-  background-image: linear-gradient(#f9f9f9, #f5f5f5);
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #eee;
-}
-.quickstart .container {
-  margin-bottom: 0;
-}
-.quickstart .row {
-  margin: 0 -20px;
-  -webkit-box-shadow: 1px 0 0 #f9f9f9;
-     -moz-box-shadow: 1px 0 0 #f9f9f9;
-          box-shadow: 1px 0 0 #f9f9f9;
-}
-.quickstart [class*="span"] {
-  width: 285px;
-  height: 117px;
-  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;
-}
-.quickstart [class*="span"]:last-child {
-  border-right: 1px solid #eee;
-  width: 286px;
-}
-.quickstart h6,
-.quickstart p {
-  line-height: 18px;
-  text-align: center;
-  margin-bottom: 9px;
-  color: #333;
-}
-.quickstart .current-version,
-.quickstart .current-version a {
-  color: #999;
-}
-.quickstart h6 {
-  color: #999;
-}
-.quickstart textarea {
-  display: block;
-  width: 275px;
-  height: auto;
-  margin: 0 0 9px;
-  line-height: 21px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-
 /* Special grid styles
 -------------------------------------------------- */
 .show-grid {
@@ -387,9 +322,29 @@ pre.prettyprint {
 /* Responsive Docs
 -------------------------------------------------- */
 @media (max-width: 480px) {
+
+  body > .navbar-fixed .nav {
+    display: none;
+  }
+
   .large-bird {
     display: none;
   }
+
+  .jumbotron h1 {
+    font-size: 36px;
+    margin-right: 0;
+  }
+  .jumbotron p {
+    margin-right: 0;
+    font-size: 18px;
+    line-height: 24px;
+  }
+  .jumbotron .benefits {
+    position: relative;
+    width: auto;
+    margin: 36px 0;
+  }
 }
 
 @media (min-width: 768px) and (max-width: 900px) {
diff --git a/docs/index.html b/docs/index.html
index 5002d9d46..3bc72751e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -76,7 +76,13 @@
       ================================================== -->
       <header class="jumbotron masthead">
         <div class="inner">
-          <div class="benefits pull-right">
+          <h1>Bootstrap,<br> from Twitter</h1>
+          <p class="lead">Bootstrap is a responsive frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
+          <p class="download-info">
+            <a href="#" class="btn primary btn-large">Download on GitHub</a>
+            Currently v2.0.0
+          </p>
+          <div class="benefits">
             <h4>Feature highlights</h4>
             <ul>
               <li><span>&times;</span> Built on LESS</li>
@@ -88,12 +94,6 @@
               <li><span>&times;</span> Dozens of components</li>
             </ul>
           </div>
-          <h1>Bootstrap, from Twitter</h1>
-          <p class="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
-          <p class="download-info">
-            <a href="#" class="btn primary btn-large">Download on GitHub</a>
-            Currently v2.0.0
-          </p>
         </div>
       </header>