Place footer below main content (#4014)

Update the site's layout implementation so that the main content can
scroll with the entire viewport rather than having a separate scroll
view. This allows the footer to be placed after the main content rather
than fixed at the bottom and better aligns the site's layout with
dart.dev and docs.flutter.dev.

- Don't limit the body to a height of 100%, so that the main content can
be scrolled as part of the primary/full viewport. This is what allows
the footer to be after the content.
- Make header sticky so they always remain visible at the top of the
viewport.
- Make sidebars sticky, but below the header, so that they remain
visible when scrolling the main content.
- Remove custom webkit scrollbar styles as they cause part of the
header's chrome to go missing and are platform dependent.
- Add `color-scheme: <light or dark>` to the theme styles so the browser
provides properly themed scrollbars.
- Removing these styles also resolves a TODO relating to the mobile
version of the sidebars.

Resolves #4013

Author: parlough

lib/resources/styles.css

@@ -1 +1 @@
-B33E364DD554BA379AE780C5C4237B34
+77FD7967080D3865482753638F7833E7

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,10 @@
   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));
 }
 
 a {

web/styles/_content.scss

@@ -3,10 +3,16 @@
 // 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 the header at the top of the view port, even on scrolling.
+  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,21 @@
   background-color: black;
 }
 
+.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;
+  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 +117,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) {
@@ -141,12 +147,12 @@
     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%;
     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 +173,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,11 @@
 // 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 {
+  // Used by the header and sticky elements wanting to position below it.
+  --main-header-height: 50px;
+}
+
 .light-theme {
   /*background-color body, listdropdown*/
   --main-bg-color: #fff;
@@ -13,16 +18,12 @@
   --main-text-color: #111111;
   /*typehead search-box*/
   --main-search-bar: #fff;
-  /* scrollbar-thumb */
-  --main-scrollbar-color: #CCC;
   /* footer */
   --main-footer-background: #111111;
   /*header text color*/
   --main-h-text: black;
   /* hyperlinks*/
   --main-hyperlinks-color: #0175C2;
-  /*search background*/
-  --main-search-background: transparent;
 
   --main-inset-bgColor: #f5f5f7;
   --main-inset-borderColor: #dadce0;
@@ -36,7 +37,6 @@
   --main-var-color: #008080;
   --main-string-color: #d14;
 
-  --main-number-filter: invert(0%);
   --main-icon-color: black;
 
   /* alerts */
@@ -46,6 +46,8 @@
   --alert-warning-fgColor: #955d00;
   --alert-error-fgColor: #c43131;
 
+  color-scheme: light;
+
   #light-theme-button {
     display: none;
   }
@@ -67,14 +69,10 @@
   --main-text-color: #fff;
   /*typehead search-box*/
   --main-search-bar: #454545;
-  /* scrollbar-thumb */
-  --main-scrollbar-color: #5f6368;
   /* footer */
   --main-footer-background: #27323a;
   /* hyperlinks*/
   --main-hyperlinks-color: #00D2FA;
-  /*search background*/
-  --main-search-background: black;
 
   --main-inset-bgColor: #242b32;
   --main-inset-borderColor: #676f7e;
@@ -88,7 +86,6 @@
   --main-var-color: #55A09B;
   --main-string-color: #FF2D64;
 
-  --main-number-filter: invert(100%);
   --main-icon-color: white;
 
   /* alerts */
@@ -98,6 +95,8 @@
   --alert-warning-fgColor: #cea11f;
   --alert-error-fgColor: #ff6666;
 
+  color-scheme: dark;
+
   #dark-theme-button {
     display: none;
   }