Place footer below main content

Author: parlough

lib/resources/styles.css

@@ -1 +1 @@
-B33E364DD554BA379AE780C5C4237B34
+631031823A0AFF791A65761D059274B6

web/sig.txt

@@ -2,13 +2,16 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
+html {
+  // Account for sticky header, so fragments appear below it after scrolling.
+  scroll-padding-top: calc(var(--main-header-height) + 1rem);
+}
+
 html,
 body {
   margin: 0;
   padding: 0;
-  height: 100%;
   width: 100%;
-  overflow: hidden;
   box-sizing: border-box;
 }
 
@@ -19,7 +22,6 @@ body {
 body {
   display: flex;
   flex-direction: column;
-  -webkit-overflow-scrolling: touch;
 
   -webkit-text-size-adjust: 100%;
   overflow-x: hidden;
@@ -34,5 +36,4 @@ main {
   flex: 1;
   display: flex;
   flex-direction: row;
-  min-height: 0;
 }

web/styles/_base.scss

@@ -7,6 +7,7 @@
   order: 2;
   overflow-y: scroll;
   padding: 10px 20px 0 20px;
+  min-height: calc(100vh - var(--main-header-height));
 }
 
 a {

web/styles/_content.scss

@@ -3,10 +3,15 @@
 // BSD-style license that can be found in the LICENSE file.
 
 header {
-  flex: 0 0 50px;
+  flex: 0 0 var(--main-header-height, 50px);
   display: flex;
   flex-direction: row;
   align-items: center;
+
+  position: sticky;
+  top: 0;
+  z-index: 10;
+
   padding-left: 30px;
   padding-right: 30px;
   background-color: var(--main-header-color);

web/styles/_header.scss

@@ -56,16 +56,17 @@
 
 
 .typeahead {
-  padding: 17px 17px 17px 50px;
+  padding: 16px 16px 16px 32px;
   width: 422px;
-  height: 20px;
-  font-size: 13px;
+  height: 24px;
+  font-size: 15px;
+  background-color: var(--main-bg-color);
+  color: var(--main-text-color);
   background-image: url("./search.svg");
   background-repeat: no-repeat;
-  background-position: 4%;
+  background-position: 2%;
   outline: 0;
   background-size: 20px;
-  filter: var(--main-number-filter);
 }
 
 .search-summary {

web/styles/_search.scss

@@ -88,12 +88,19 @@
   background-color: black;
 }
 
+.sidebar-offcanvas-left, .sidebar-offcanvas-right {
+  position: sticky;
+  top: var(--main-header-height);
+  overflow-y: auto;
+  min-height: 0;
+  max-height: calc(100vh - var(--main-header-height));
+}
+
 .sidebar-offcanvas-left {
   flex: 0 1 230px;
   order: 1;
-  overflow-y: scroll;
-  padding: 20px 0 15px 30px;
-  margin: 5px 20px 0 0;
+  padding: 25px 0 15px 30px;
+  margin-right: 20px;
 
   h5 {
     margin-bottom: 10px;
@@ -108,10 +115,7 @@
 .sidebar-offcanvas-right {
   flex: 0 1 12em;
   order: 3;
-  overflow-y: scroll;
-  padding: 20px 15px 15px 15px;
-  margin-top: 5px;
-  margin-right: 20px;
+  padding: 25px 20px 15px 15px;
 
   // The right nav should disappear out of view when the window shrinks.
   @media screen and (max-width: 992px) {
@@ -146,7 +150,7 @@
     max-width: calc(100% - 20px);
     height: 90%;
     background-color: var(--main-bg-color);
-    overflow-y: scroll; /* TODO: how to hide scroll bars? */
+    overflow-y: scroll;
     padding: 10px;
     margin: 10px 10px;
     box-shadow: 5px 5px 5px 5px #444444;
@@ -167,11 +171,3 @@
     color: var(--main-hyperlinks-color);
   }
 }
-
-::-webkit-scrollbar-button{ display: none; height: 13px; border-radius: 0; background-color: #AAA; }
-::-webkit-scrollbar-button:hover{ background-color: #AAA; }
-::-webkit-scrollbar-thumb{ background-color: var(--main-scrollbar-color); }
-::-webkit-scrollbar-thumb:hover{ background-color: var(--main-scrollbar-color); }
-::-webkit-scrollbar{ width: 4px; }
-
-.main-content::-webkit-scrollbar{ width: 8px; }

web/styles/_sidebar.scss

@@ -2,6 +2,10 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
+:root {
+  --main-header-height: 50px;
+}
+
 .light-theme {
   /*background-color body, listdropdown*/
   --main-bg-color: #fff;
@@ -36,7 +40,6 @@
   --main-var-color: #008080;
   --main-string-color: #d14;
 
-  --main-number-filter: invert(0%);
   --main-icon-color: black;
 
   /* alerts */
@@ -46,6 +49,8 @@
   --alert-warning-fgColor: #955d00;
   --alert-error-fgColor: #c43131;
 
+  color-scheme: light;
+
   #light-theme-button {
     display: none;
   }
@@ -88,7 +93,6 @@
   --main-var-color: #55A09B;
   --main-string-color: #FF2D64;
 
-  --main-number-filter: invert(100%);
   --main-icon-color: white;
 
   /* alerts */
@@ -98,6 +102,8 @@
   --alert-warning-fgColor: #cea11f;
   --alert-error-fgColor: #ff6666;
 
+  color-scheme: dark;
+
   #dark-theme-button {
     display: none;
   }