Merge pull request #5 from xdev-software/improve-mobile-layouts

Improve mobile layouts

Author: AB-xdev

supplemental-ui/css/site-extra.css

@@ -29,7 +29,6 @@ body {
 
 .nav-list{
     margin: 0;
- 
 }
 
 footer.footer {
@@ -45,18 +44,18 @@ footer.footer .link-separator
 	color: #c02222;
 }
 
-.doc h1 {
+.doc > h1.page:first-child {
     color: #ffffff;
     background-color: #c02222;
     padding: 1rem 2rem 0.75rem;
-    margin: 1.5rem auto 1.5rem auto !important;
+    margin: auto auto 0.5em auto;
     text-transform: uppercase;
 }
 
 .doc {
     width: 100%;
     max-width: 100%;
-    padding: 0;
+    padding: 0.5em;
 }
 /* ====== Global Styles (Light Theme) ====== */
 body {
@@ -114,7 +113,7 @@ body {
 /* ====== Sidebar ====== */
 .sidebar {
     background: #f9fafb;
-    padding: 1rem 1rem 0rem 1rem ;
+    padding: 1rem 1rem 0rem 1rem;
     font-size: 0.9rem;
     color: #6b7280;
     flex: 1 1 250px;
@@ -152,3 +151,30 @@ body {
     box-shadow: 0 0 20px rgba(0,0,0,0.5);
     transition: transform 0.3s ease;
 }
+
+/* ===============================
+   Mobile / Small Screen Styles
+   =============================== */
+@media screen and (max-width: 768px) {
+    .toolbar {
+        padding: 0;
+        bottom: 0;
+        width: 100%;
+        position: fixed;
+        top: auto;
+    }
+
+    /* Toolbar will otherwise overlap end of article */
+    body {
+        padding-bottom: 2.5em !important;
+    }
+
+    /* Nav will otherwise be offset by toolbar */
+    .nav {
+        height: calc(100vh - 2.5em) !important;
+    }
+
+    .nav-container {
+        top: unset;
+    }
+}