[docs] Spacing tweaks when getting responsive.

2 files changed, 40 insertions, 4 deletions

diff --git a/docs/static/css/drf-styles.css b/docs/static/css/drf-styles.css
index 25b6f8d2..fcc60532 100644
--- a/docs/static/css/drf-styles.css
+++ b/docs/static/css/drf-styles.css
@@ -1,8 +1,39 @@
+/* Set the body padding-top when above 980px to push the content down from
+   below the navbar, which is fixed at >980px screen widths. */
+@media (min-width: 980px) {
+  body {
+    padding-top: 71px;
+  }
+}
+
 body {
-  padding-top: 60px;
   padding-bottom: 40px;
 }
 
+
+
+/* Preserve the spacing of the navbar across different screen sizes. */
+.navbar-inner {
+  padding: 5px 0; 
+}
+
+@media (max-width: 979px) {
+  .navbar .brand {
+    margin-left: 0;
+    padding-left: 0;
+  }
+  .navbar-inner .container-fluid {
+    padding-left: 15px;
+  }
+}
+
+
+.nav-list li.main {
+  font-weight: bold;
+}
+
+
+
 /* Set the table of contents to static so it flows back into the content when
    viewed on tablets and smaller. */
 @media (max-width: 767px) {
@@ -11,10 +42,15 @@ body {
   }
 }
 
-.nav-list li.main {
-  font-weight: bold;
+/* When the page is in two-column layout, give the main content some room
+   to breath on the left. */
+@media (min-width: 768px) {
+  #main-content {
+    padding-left: 1em;
+  }
 }
 
+
 blockquote {
   font-family: Georgia, serif;
   font-size: 18px;
diff --git a/docs/template.html b/docs/template.html
index 1b4113d1..f4a8edb9 100644
--- a/docs/template.html
+++ b/docs/template.html
@@ -92,7 +92,7 @@
           </div>
         </div>
 
-        <div class="span9">
+        <div id="main-content" class="span9">
           {{ content }}
         </div><!--/span-->
       </div><!--/row-->