Update sidenav and responsive css

1 files changed, 52 insertions, 35 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fc08e30da..2aa2ec5e7 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -91,7 +91,7 @@ section > ul li {
 }
 .masthead h1 {
   /*font-size: 120px;*/
-  /*line-height: 1;*/
+  line-height: 1;
   /*letter-spacing: -2px;*/
 }
 .masthead p {
@@ -111,13 +111,6 @@ section > ul li {
   color: rgba(255,255,255,.25);
 }
 
-/* Subhead (other docs pages)
-------------------------- */
-
-.subhead {
-  text-align: left;
-}
-
 
 
 /* Marketing section of Overview
@@ -203,33 +196,6 @@ section > ul li {
   opacity: 1;
 }
 
-/* Affix all the things, and set widths because they're positioned, depending on viewport size */
-@media screen and (min-width: 768px) {
-  body {
-    padding-top: 44px;
-  }
-  /* From here, start to affix the nav because we keep columns here */
-  .bs-docs-sidenav.affix {
-    position: fixed;
-    top: 54px;
-  }
-  .bs-docs-sidenav {
-    width: 170px;
-  }
-}
-
-@media screen and (min-width: 992px) {
-  .bs-docs-sidenav {
-    width: 220px;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .bs-docs-sidenav {
-    width: 260px;
-  }
-}
-
 
 
 /* Bootstrap code examples
@@ -474,3 +440,54 @@ section > ul li {
 .bs-docs-social-buttons .twitter-share-button {
   width: 98px !important;
 }
+
+
+
+/* Responsive variations
+-------------------------------------------------- */
+
+/* Tablets and up */
+@media screen and (min-width: 768px) {
+  /* Account for fixed navbar */
+  body {
+    padding-top: 44px;
+  }
+
+  /* Tweak display of docs jumbotrons */
+  .bs-docs-jumbotron {
+    padding-top:    100px;
+    padding-bottom: 100px;
+  }
+  .masthead h1 {
+    font-size: 80px;
+  }
+  .masthead p {
+    font-size: 24px;
+  }
+  .subhead {
+    text-align: left;
+  }
+
+  /* From here, start to affix the nav because we keep columns here */
+  .bs-docs-sidenav.affix {
+    position: fixed;
+    top: 54px;
+  }
+  .bs-docs-sidenav {
+    width: 170px;
+  }
+}
+
+/* Tablets/desktops and up */
+@media screen and (min-width: 992px) {
+  .bs-docs-sidenav {
+    width: 220px;
+  }
+}
+
+/* Large desktops and up */
+@media screen and (min-width: 1200px) {
+  .bs-docs-sidenav {
+    width: 260px;
+  }
+}
\ No newline at end of file