more style tweaks for mobile

Author: sethladd

lib/resources/styles.css

@@ -58,6 +58,17 @@ header .masthead {
   padding-top: 64px;
 }
 
+header .masthead .contents {
+  padding: 0;
+}
+
+@media screen and (max-width:768px) {
+  header .masthead .contents {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
 .body {
   margin-top: 24px;
 }
@@ -549,11 +560,6 @@ button {
 
 /* left-nav disappears, and can transition in from the left */
 @media screen and (max-width:768px) {
-  .main-content {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
   #sidenav-left-toggle {
     display: inline;
     background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#FFFFFF' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");

lib/templates/_head.html

@@ -46,31 +46,32 @@
           </div> <!-- /row -->
         </div> <!-- /container -->
     </nav>
+
     <div class="container masthead">
       <div class="row">
-        <ol class="breadcrumbs gt-separated visible-xs">
-            {{#navLinks}}
-            <li><a href="{{href}}">{{name}}</a></li>
-            {{/navLinks}}
-            {{^navLinks.isEmpty}}
-            <li class="self-crumb">{{self.name}}</li>
-            {{/navLinks.isEmpty}}
-        </ol>
-        <div class="title-description">
-            <h1 class="title">
-                {{{ layoutTitle }}}
-            </h1>
-            <!-- p class="subtitle">
-                {{{ oneLineDoc }}}
-            </p -->
-        </div>
-        <ul class="subnav">
-            {{#subnavItems}}
-            <li><a href="{{href}}">{{name}}</a></li>
-            {{/subnavItems}}
-        </ul>
+        <div class="col-sm-12 contents">
+          <ol class="breadcrumbs gt-separated visible-xs">
+              {{#navLinks}}
+              <li><a href="{{href}}">{{name}}</a></li>
+              {{/navLinks}}
+              {{^navLinks.isEmpty}}
+              <li class="self-crumb">{{self.name}}</li>
+              {{/navLinks.isEmpty}}
+          </ol>
+          <div class="title-description">
+              <h1 class="title">
+                  {{{ layoutTitle }}}
+              </h1>
+          </div>
+          <ul class="subnav">
+              {{#subnavItems}}
+              <li><a href="{{href}}">{{name}}</a></li>
+              {{/subnavItems}}
+          </ul>
+        </div> <!-- /col -->
       </div> <!-- /row -->
     </div> <!-- /container -->
+    
 </header>
 
 <div class="container body">