commit cbc2ed29a60b351ee9a640f576f0d370b67041d5
author Jamal Carvalho <jamal@golang.org> Thu Mar 10 12:11:28 2022 -0500
committer Jamal Carvalho <jamalcarvalho@google.com> Thu Mar 17 15:12:24 2022 +0000
tree 881d90ab9f0c37989174823fbd6eb2aa21fcceda
parent 2b642b0b5543555fdae9e32487b867602a0f9d33

_content: fix solutions pages subnavigation

When the header was made unsticky the subnav for the
usecase page was not adjusted. This change fixes
the positioning and initialization of the subnav.

Change-Id: I48569fc6c4e21b782ed30269db17083b7b5eea74
Reviewed-on: https://go-review.googlesource.com/c/website/+/391538
Reviewed-by: Dmitri Shuralyov <dmitshur@google.com>
Trust: Jamal Carvalho <jamalcarvalho@google.com>

_content/css/styles.css

diff --git a/_content/css/styles.css b/_content/css/styles.css
index f2d24c7..5389adc 100644
--- a/_content/css/styles.css
+++ b/_content/css/styles.css
@@ -662,6 +662,8 @@
 }
 .BreadcrumbNav-inner {
   display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0;
   justify-content: start;
   list-style: none;
   margin: 0 auto;
@@ -1413,10 +1415,6 @@
   margin: 0;
 }
 .FeaturedUsers table tbody tr td img {
-  bottom: 0;
-  margin: auto;
-  position: absolute;
-  top: 0;
   width: 5rem;
 }
 .FeaturedUsers-moreProjectsBtn {
@@ -1434,9 +1432,9 @@
   margin-bottom: 1rem;
   width: auto;
 }
-.FeaturedUsers--hiddenMobile,
 .FeaturedUsers--hiddenMobile {
   display: none;
+  vertical-align: middle !important;
 }
 @media only screen and (max-width: 48rem) {
   .FeaturedUsers table tbody tr td:last-of-type {
@@ -1445,7 +1443,6 @@
   }
 }
 @media only screen and (min-width: 48rem) {
-  .FeaturedUsers--hiddenMobile,
   .FeaturedUsers--hiddenMobile {
     display: table-cell;
   }
@@ -3247,6 +3244,7 @@
   background-color: var(--color-background);
   box-shadow: 0 0.125rem 0.125rem rgba(171, 171, 171, 0.405239);
   position: fixed;
+  top: 0;
   width: 100%;
   z-index: 10;
 }
@@ -3359,7 +3357,7 @@
 }
 .UseCaseSubNav-anchorLinks--sticky {
   position: fixed;
-  top: 5.5rem;
+  top: 2rem;
 }
 a.UseCase-anchorLink {
   background: transparent;

_content/js/misc.js

diff --git a/_content/js/misc.js b/_content/js/misc.js
index 708d6ff..6e762c6 100644
--- a/_content/js/misc.js
+++ b/_content/js/misc.js
@@ -32,7 +32,7 @@
   const headerHeightPx = 56;
   const sectionHeadings = Array.from(
     document.querySelectorAll('.sectionHeading')
-  ).map(h => h.firstChild);
+  );
   let distanceFromTop =
     window.pageYOffset +
     contentBody.getBoundingClientRect().top -
@@ -151,13 +151,6 @@
         scrollPosition = siteHeader.clientHeight + header.clientHeight;
       }
     }
-
-    sectionHeadings.forEach((sectionHeading) => {
-      sectionHeading.setAttribute('style', `
-        margin-bottom: -${scrollPosition}px;
-        padding-top: ${scrollPosition}px;
-      `)
-    });
   }
 
   function setStickyNav() {