Add a few more explanatory comments

Author: parlough

web/sig.txt

@@ -1 +1 @@
-3664B38081E6AFC7A052C0D58672E1EA
+77FD7967080D3865482753638F7833E7

web/styles/_content.scss

@@ -7,6 +7,9 @@
   order: 2;
   overflow-y: scroll;
   padding: 10px 20px 0 20px;
+
+  // Add a min height of the rest of the view port after the header,
+  // so that the footer isn't awkwardly in the middle of the page.
   min-height: calc(100vh - var(--main-header-height));
 }
 

web/styles/_header.scss

@@ -8,6 +8,7 @@ header {
   flex-direction: row;
   align-items: center;
 
+  // Position the header at the top of the view port, even on scrolling.
   position: sticky;
   top: 0;
   z-index: 10;

web/styles/_sidebar.scss

@@ -89,6 +89,8 @@
 }
 
 .sidebar-offcanvas-left, .sidebar-offcanvas-right {
+  // Even as the primary viewport scrolls, the sidebars should remain visible,
+  // but below the top header which is always at the top of the viewport.
   position: sticky;
   top: var(--main-header-height);
   overflow-y: auto;
@@ -145,7 +147,7 @@
     transition: all .25s ease-out;
     z-index: 2000;
     top: 0;
-    width: 280px; /* works all the way down to an iphone 4 */
+    width: 280px;
     // Set a max width for narrow layouts that accounts for margin.
     max-width: calc(100% - 20px);
     height: 90%;

web/styles/_theme.scss

@@ -3,6 +3,7 @@
 // BSD-style license that can be found in the LICENSE file.
 
 :root {
+  // Used by the header and sticky elements wanting to position below it.
   --main-header-height: 50px;
 }