Hide banner on scroll (#6441)

Hide banner when scrolling down the page by restructuring the style of pages to make the entire body scrollable, rather than just the page content. Then make other changes to account for that restructuring, such as increasing the scroll margins of headers. Resolves #6406
dart-lang · Feb 20, 2025 · 4800e90 · 4800e90
1 parent 47a3176
commit 4800e90
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 119 deletions.
diff --git a/src/_includes/head.html b/src/_includes/head.html
@@ -1,4 +1,4 @@
-{% assign cache_bust = '?v=2' %}
+{% assign cache_bust = '?v=3' %}
 
 <head>
   <meta charset="utf-8">

diff --git a/src/_includes/navigation-main.html b/src/_includes/navigation-main.html
@@ -1,6 +1,6 @@
 {% assign page_url_path = page.url | regexReplace: '/index$|/index\.html$|\.html$|/$' | prepend: '/*' | append: '/' -%}
 
-<nav id="mainnav" class="site-header">
+<nav id="mainnav">
   <div id="menu-toggle"><span class="material-symbols" title="Toggle side navigation menu." aria-label="Toggle side navigation menu." type="button">menu</span></div>
   <a href="/" class="brand" title="{{site.title}}">
     <img src="/assets/img/logo/logo-white-text.svg" alt="{{site.title}}">
@@ -31,11 +31,11 @@
         {%- if page_url_path contains '/*/get-dart/' %} active {%- endif -%}">Get Dart</a>
     </li>
     <li class="searchfield">
-      <form action="/search" class="site-header__search form-inline" id="cse-search-box">
+      <form action="/search" class="site-header-search form-inline" id="cse-search-box">
         <input type="hidden" name="cx" value="011220921317074318178:_yy-tmb5t_i">
         <input type="hidden" name="ie" value="UTF-8">
         <input type="hidden" name="hl" value="en">
-        <input class="site-header__searchfield form-control search-field" type="search" name="q"
+        <input class="site-header-searchfield form-control search-field" type="search" name="q"
           id="search-main" autocomplete="off" placeholder="Search" aria-label="Search">
       </form>
     </li>

diff --git a/src/_includes/navigation-side.html b/src/_includes/navigation-side.html
@@ -1,6 +1,6 @@
 <div id="sidenav">
-  <form action="/search/" class="site-header__search form-inline">
-    <input class="site-header__searchfield form-control search-field" type="search" name="q"
+  <form action="/search/" class="site-header-search form-inline">
+    <input class="site-header-searchfield form-control search-field" type="search" name="q"
            id="search-side" autocomplete="off" placeholder="Search" aria-label="Search">
   </form>
 

diff --git a/src/_includes/page-header.html b/src/_includes/page-header.html
@@ -3,7 +3,7 @@
   <p>{% render 'banner.html' %}</p>
 </div>
 {% endif -%}
-<header id="page-header" class="site-header">
+<header id="site-header">
   {% include 'navigation-main.html' %}
   {% if obsolete -%}
   {% if obsolete == true -%}

diff --git a/src/_sass/base/_base.scss b/src/_sass/base/_base.scss
@@ -13,8 +13,6 @@ body {
   font-weight: 400;
   line-height: 1.5;
   color: $site-color-body;
-
-  height: 100vh;
 }
 
 section {

diff --git a/src/_sass/base/_layout.scss b/src/_sass/base/_layout.scss
@@ -1,9 +1,5 @@
 @use '../base/variables' as *;
 
-#page-header {
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
-}
-
 #page-content {
   display: flex;
   min-height: calc(100vh - $site-header-height);
@@ -36,8 +32,6 @@
 #site-below-header {
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - $site-header-height);
-  overflow-y: auto;
 }
 
 #site-main-row {

diff --git a/src/_sass/base/_print.scss b/src/_sass/base/_print.scss
@@ -2,7 +2,7 @@
 
 @media print {
   // Don't display navigation aids when printing.
-  #page-header, #sidenav, #prev-next, #page-footer, .banner,
+  #site-header, #sidenav, #prev-next, #page-footer, .banner,
   #site-toc--inline, #site-toc--side, #page-github-links, #cookie-notice {
     display: none !important;
   }

diff --git a/src/_sass/components/_card.scss b/src/_sass/components/_card.scss
@@ -18,7 +18,7 @@
     background-color: var(--card-container-color, rgb(242, 245, 255));
     height: auto;
 
-    scroll-margin: 2rem;
+    scroll-margin: 4.5rem;
 
     &.hidden {
       display: none;

diff --git a/src/_sass/components/_content.scss b/src/_sass/components/_content.scss
@@ -46,7 +46,7 @@ article {
 
   #site-content-title {
     margin-bottom: 1.5rem;
-    scroll-margin: 2rem;
+    scroll-margin: 4.5rem;
   }
 
   h1,
@@ -57,7 +57,7 @@ article {
   h6 {
     // Push # link targets clear of page header.
     &[id] {
-      scroll-margin: 1.5rem;
+      scroll-margin: 4.5rem;
     }
 
     // Let the wrapper set the bottom margin.
@@ -66,7 +66,7 @@ article {
 
   // Push # link targets clear of page header.
   a[id] {
-    scroll-margin: 1.5rem;
+    scroll-margin: 4.5rem;
   }
 
   .header-wrapper {
@@ -75,6 +75,10 @@ article {
     margin-block-end: 0.75rem;
     align-items: center;
 
+    > h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+    }
+
     .heading-link {
       border-radius: 0.125rem;
       margin-left: 0.4rem;

diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss
@@ -1,79 +1,14 @@
 @use '../base/variables' as *;
 
-#mainnav {
-  background-color: $site-color-header;
-  color: $site-color-header-text;
-  display: flex;
-  align-items: center;
-
-  ul {
-    margin: 0 0 0 auto;
-    padding: 0;
-    list-style: none;
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-
-    li {
-      padding: 0 0.75rem;
-
-      a {
-        color: $site-color-header-text;
-        display: inline-block;
-        padding: 0 6px;
-        font-size: $site-font-size-header;
-        font-weight: 400;
-        font-family: $site-font-family-alt;
-
-        &:hover, &:active {
-          color: $site-color-card-link;
-        }
-      }
-
-      &.searchfield {
-        position: relative;
-
-        form {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      // TODO(parlough): Reverse and simplify these media queries.
-      @media(max-width: 960px) {
-        display: none;
-
-        &.searchfield {
-          display: block;
-        }
-      }
-
-      @media(max-width: 479px) {
-        &.searchfield {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .brand {
-    display: flex;
-    width: 5.5rem;
-    overflow: hidden;
-    margin-left: 1.25rem;
-    align-items: center;
-  }
-}
-
-.site-header {
+#site-header {
   background-color: $site-color-white;
   font-family: $site-font-family-alt;
   position: sticky;
   top: 0;
   z-index: $site-z-header;
 
+  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
+
   .navbar {
     font-size: 1.25rem;
     min-height: $site-header-height;
@@ -127,7 +62,7 @@
     }
   }
 
-  &__search {
+  .site-header-search {
     position: relative;
 
     &::before {
@@ -143,7 +78,7 @@
     }
   }
 
-  &__searchfield {
+  .site-header-searchfield {
     border: 0;
     padding-left: 2rem;
     font-size: 1.25rem;
@@ -161,28 +96,95 @@
       }
     }
   }
-}
 
-#menu-toggle {
-  display: none;
-  align-items: center;
-  line-height: $site-header-height;
-  margin-left: 20px;
-  padding-right: 10px;
-  cursor: pointer;
-  z-index: 100;
-  user-select: none;
-
-  span {
-    font-size: 32px;
-  }
+  #mainnav {
+    background-color: $site-color-header;
+    color: $site-color-header-text;
+    display: flex;
+    align-items: center;
+
+    ul {
+      margin: 0 0 0 auto;
+      padding: 0;
+      list-style: none;
+
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+
+      li {
+        padding: 0 0.75rem;
+
+        a {
+          color: $site-color-header-text;
+          display: inline-block;
+          padding: 0 6px;
+          font-size: $site-font-size-header;
+          font-weight: 400;
+          font-family: $site-font-family-alt;
+
+          &:hover, &:active {
+            color: $site-color-card-link;
+          }
+        }
+
+        &.searchfield {
+          position: relative;
+
+          form {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        // TODO(parlough): Reverse and simplify these media queries.
+        @media(max-width: 960px) {
+          display: none;
+
+          &.searchfield {
+            display: block;
+          }
+        }
+
+        @media(max-width: 479px) {
+          &.searchfield {
+            display: none;
+          }
+        }
+      }
+    }
 
-  // TODO(parlough): Reverse and simplify these media queries.
-  @media(max-width: 479px) {
-    order: 2;
+    .brand {
+      display: flex;
+      width: 5.5rem;
+      overflow: hidden;
+      margin-left: 1.25rem;
+      align-items: center;
+    }
   }
 
-  @media(max-width: 1024px) {
-    display: flex;
+  #menu-toggle {
+    display: none;
+    align-items: center;
+    line-height: $site-header-height;
+    margin-left: 20px;
+    padding-right: 10px;
+    cursor: pointer;
+    z-index: 100;
+    user-select: none;
+
+    span {
+      font-size: 32px;
+    }
+
+    // TODO(parlough): Reverse and simplify these media queries.
+    @media(max-width: 479px) {
+      order: 2;
+    }
+
+    @media(max-width: 1024px) {
+      display: flex;
+    }
   }
 }
diff --git a/src/_sass/components/_misc.scss b/src/_sass/components/_misc.scss
@@ -142,8 +142,11 @@
 }
 
 body.obsolete {
-  #page-header {
+  #site-header {
     .alert {
+      background-color: $alert-warning-bg;
+
+      padding: 0.5rem;
       margin: 0;
 
       h4 {

diff --git a/src/_sass/components/_search.scss b/src/_sass/components/_search.scss
@@ -1,6 +1,6 @@
 @use '../base/variables' as *;
 
-.site-header__search {
+.site-header-search {
   &::before {
     color: $gray;
     z-index: 1;
@@ -32,7 +32,7 @@
   }
 }
 
-.site-header__searchfield {
+.site-header-searchfield {
   border: 0;
   box-shadow: none;
   background-color: transparent;