Fix additional styling problems

* The toolbar at the bottom obscures other components (e.g. the footer) → Made the document a bit "longer"
  * Fixed the same for the nav area on the left when it's expanded
* Fixed the header having massive amounts of margin on top and bottom → was moved to the document `.doc`

Author: AB-xdev

supplemental-ui/css/cards.css

@@ -153,10 +153,6 @@ pre {
         flex-direction: column; /* stack image and text vertically */
     }
 
-    .doc {
-        padding: 0 1rem 4rem;
-    }
-
     .card-image, .imageblock {
         float: none !important;            /* remove float */
         margin: 1rem !important;         /* center spacing */

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 {
@@ -164,4 +163,18 @@ body {
         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;
+    }
 }