Sticky article-banner

Make article-banner ("A newer version of this document is available")
sticky.
This requires updating the scroll-top, otherwise when clicking on a link
it would be hidden behind the banner.
The existing handling already accounts for the same issue, but with the
height (7.1rem) of the top nav.
We use a dynamic css `var(--scroll-margin-top-space)` which can be
overridden in the case that we have a banner.

Author: osfameron

gulp.d/tasks/build.js

@@ -47,7 +47,7 @@ module.exports = (src, dest, preview) => () => {
       },
     ]),
     // NOTE importFrom is for use in supplemental CSS files
-    postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }),
+    postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: true }),
     preview ? postcssCalc : () => {},
     autoprefixer,
     preview ? () => {} : cssnano({ preset: 'default' }),

src/css/main.css

@@ -12,17 +12,32 @@ main {
   padding-bottom: 4rem;
 }
 
-/* IMPORTANT for this to work, the element cannot be display: flex
-   and cannot have padding top or border top */
+/* This pseudo-element appears to be a home-brewed scroll-padding-top,
+  e.g. is to prevent navigation anchor links from being hidden behind the Menu bar.
+
+  For this to work, the element cannot be display: flex
+  and cannot have padding top or border top.
+
+  By default the var(--scroll-margin-top-space) is set to 7.1em
+  (e.g. the height of the navbar).
+  When a banner ("A newer version of this documentation is available")
+  is shown, this variable is dynamically replaced to account for the
+  banner height.
+  */
+
 main [id]::before {
   content: "";
   display: inherit;
-  height: var(--h2-heading-top-space);
-  margin-top: calc(-1 * var(--h2-heading-top-space));
+  height: var(--scroll-margin-top-space);
+  margin-top: calc(-1 * var(--scroll-margin-top-space));
   visibility: hidden;
   width: 0;
 }
 
+main.with-banner {
+  --scroll-margin-top-space: var(--scroll-margin-top-space-plus-banner);
+}
+
 main table[id]::before {
   display: block;
 }
@@ -56,18 +71,23 @@ main p {
 /* The "You are viewing a pre-release" banner */
 .article-banner {
   align-items: center;
-  background: transparent;
+  background: white;
   border: 1px solid #1174e0;
   color: var(--color-brand-blue-secondary);
   display: flex;
   line-height: 1;
   margin: 1.25rem 0 0;
-  /* margin: calc(-1 * var(--height-spacer)) calc(-1 * var(--width-container-gutter)) var(--height-spacer); */
   padding: var(--base-space);
   border-radius: 3px;
   font-family: "Open Sans", sans-serif;
   font-weight: var(--weight-normal);
   flex-wrap: wrap;
+  /* sticky, 2px from the top menu.
+  Add a white shadow to top to avoid flashing moire as the text scrolls past. */
+  position: sticky;
+  z-index: 9;
+  top: calc(7.1rem + 2px);
+  box-shadow: 0 -2px white;
 }
 
 .article-banner p {

src/css/vars.css

@@ -84,7 +84,8 @@
   --height-nav: calc(var(--height-min-body) + var(--height-spacer) - var(--height-footer));
   --height-nav-with-version: calc(100vh - var(--height-to-body) - var(--height-version-control));
   --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control));
-  --h2-heading-top-space: calc(var(--height-to-body) + 0.5rem);
+  --scroll-margin-top-space: calc(var(--height-to-body) + 0.5rem);
+  --scroll-margin-top-space-plus-banner: calc(var(--height-to-body) + 0.5rem + 5rem);
 
   /* widths */
   --width-main-gutter: 2.5rem;

src/partials/main.hbs

@@ -1,4 +1,7 @@
-<main class="article" data-ceiling="topbar">
+<main
+    class="article {{#unless (or (ne page.attributes.hide-view-latest undefined) (eq page.componentVersion page.component.latest))}}with-banner{{/unless}}" 
+    data-ceiling="topbar">
+
 {{#unless (or (ne page.attributes.hide-view-latest undefined) (eq page.componentVersion page.component.latest))}}
 {{#with page.latest}}
 {{#if ./missing}}