content, css, client: use a static inert clone

...rather than a static mock, which wasn't *quite* matching
the real deal's world wrap every time

4 files changed, 48 insertions, 50 deletions

diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index a45f7415..d667a6f4 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -276,10 +276,16 @@ export default {
       (html.isBlank(slots.title)
         ? null
      : slots.headingMode === 'sticky'
-        ? relations.stickyHeadingContainer.slots({
-            title: titleContentsHTML,
-            cover: slots.cover,
-          })
+        ? [
+            relations.stickyHeadingContainer.slots({
+              title: titleContentsHTML,
+              cover: slots.cover,
+            }),
+
+            relations.stickyHeadingContainer.clone().slots({
+              rootAttributes: {inert: true},
+            }),
+          ]
         : html.tag('h1', titleContentsHTML));
 
     // TODO: There could be neat interactions with the sticky heading here,
diff --git a/src/content/dependencies/generateStickyHeadingContainer.js b/src/content/dependencies/generateStickyHeadingContainer.js
index f58b0cd8..64becc5e 100644
--- a/src/content/dependencies/generateStickyHeadingContainer.js
+++ b/src/content/dependencies/generateStickyHeadingContainer.js
@@ -2,6 +2,11 @@ export default {
   extraDependencies: ['html'],
 
   slots: {
+    rootAttributes: {
+      type: 'attributes',
+      mutable: false,
+    },
+
     title: {
       type: 'html',
       mutable: false,
@@ -15,6 +20,8 @@ export default {
 
   generate: (slots, {html}) => html.tags([
     html.tag('div', {class: 'content-sticky-heading-root'},
+      slots.rootAttributes,
+
       !html.isBlank(slots.cover) &&
         {class: 'has-cover'},
 
@@ -48,10 +55,5 @@ export default {
             html.tag('div', {class: 'content-sticky-subheading-row'},
               html.tag('h2', {class: 'content-sticky-subheading'})),
           ]))),
-
-    html.tag('h1', {class: 'imaginary-static-heading-root'},
-      html.tag('span', {class: 'imaginary-static-heading-row'},
-        html.tag('span', {class: 'imaginary-static-heading-title'},
-          slots.title.clone()))),
   ]),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 7eabc58b..d3ab28a7 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -2904,35 +2904,31 @@ h3.content-heading {
 }
 
 .content-sticky-heading-root {
-  position: sticky;
-  top: 0;
-  width: 100%;
+  width: calc(100% + 2 * var(--content-padding));
+  margin: calc(-1 * var(--content-padding));
+  margin-bottom: 0;
 }
 
-.content-sticky-heading-anchor {
-  position: relative;
+.content-sticky-heading-anchor,
+.content-sticky-heading-container {
   width: 100%;
 }
 
-.content-sticky-heading-container {
-  position: absolute;
-  width: 100%;
+.content-sticky-heading-root:not([inert]) {
+  position: sticky;
+  top: 0;
 }
 
-.imaginary-static-heading-root,
-.imaginary-static-heading-row,
-.imaginary-static-heading-title {
-  display: block;
+.content-sticky-heading-anchor:not(:matches(.content-sticky-heading-root[inert]) *) {
+  position: relative;
 }
 
-.content-sticky-heading-root,
-.imaginary-static-heading-root {
-  width: calc(100% + 2 * var(--content-padding));
-  margin: calc(-1 * var(--content-padding));
+.content-sticky-heading-container:not(:matches(.content-sticky-heading-root[inert]) *) {
+  position: absolute;
 }
 
-.imaginary-static-heading-root {
-  margin-bottom: calc(0.5 * var(--content-padding));
+.content-sticky-heading-root[inert] {
+  visibility: hidden;
 }
 
 main.long-content .content-sticky-heading-container {
@@ -2946,12 +2942,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   padding-right: calc(var(--long-content-padding-ratio) * (100% - 2 * var(--content-padding)) + var(--content-padding));
 }
 
-.imaginary-static-heading-root {
-  visibility: hidden;
-}
-
-.content-sticky-heading-row,
-.imaginary-static-heading-row {
+.content-sticky-heading-row {
   box-sizing: border-box;
   padding:
     calc(1.25 * var(--content-padding) + 5px)
@@ -2961,9 +2952,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
 
   width: 100%;
   margin: 0;
-}
 
-.content-sticky-heading-row {
   background: var(--bg-black-color);
   border-bottom: 1px dotted rgba(220, 220, 220, 0.4);
 
@@ -2983,8 +2972,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   grid-template-columns: 1fr min(40%, 90px);
 }
 
-.content-sticky-heading-root.has-cover +
-.imaginary-static-heading-root .imaginary-static-heading-title {
+.content-sticky-heading-root.has-cover {
   padding-right: min(40%, 400px);
 }
 
@@ -2992,10 +2980,6 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   position: relative;
   margin: 0;
   padding-right: 20px;
-}
-
-.content-sticky-heading-row h1,
-.imaginary-static-heading-title {
   line-height: 1.4;
 }
 
diff --git a/src/static/js/client/sticky-heading.js b/src/static/js/client/sticky-heading.js
index 1020cab3..fba05b84 100644
--- a/src/static/js/client/sticky-heading.js
+++ b/src/static/js/client/sticky-heading.js
@@ -7,7 +7,10 @@ import {cssProp, dispatchInternalEvent, templateContent}
 export const info = {
   id: 'stickyHeadingInfo',
 
+  stickyRoots: null,
+
   stickyContainers: null,
+  staticContainers: null,
 
   stickyHeadingRows: null,
   stickyHeadings: null,
@@ -23,7 +26,6 @@ export const info = {
   contentCovers: null,
   contentCoversReveal: null,
 
-  imaginaryStaticHeadings: null,
   referenceCollapsedHeading: null,
 
   state: {
@@ -37,8 +39,16 @@ export const info = {
 };
 
 export function getPageReferences() {
+  info.stickyRoots =
+    Array.from(document.querySelectorAll('.content-sticky-heading-root:not([inert])'));
+
   info.stickyContainers =
-    Array.from(document.getElementsByClassName('content-sticky-heading-container'));
+    info.stickyRoots
+      .map(el => el.querySelector('.content-sticky-heading-container'));
+
+  info.staticContainers =
+    info.stickyRoots
+      .map(el => el.nextElementSibling);
 
   info.stickyCoverContainers =
     info.stickyContainers
@@ -84,10 +94,6 @@ export function getPageReferences() {
     info.contentContainers
       .map(el => Array.from(el.querySelectorAll('.content-heading')));
 
-  info.imaginaryStaticHeadings =
-    info.contentContainers
-      .map(el => el.querySelector('.imaginary-static-heading-root'));
-
   info.referenceCollapsedHeading =
     info.stickyHeadings
       .map(el => el.querySelector('.reference-collapsed-heading'));
@@ -182,16 +188,16 @@ function updateStuckStatus(index) {
 
 function updateCollapseStatus(index) {
   const stickyContainer = info.stickyContainers[index];
+  const staticContainer = info.staticContainers[index];
   const stickyHeading = info.stickyHeadings[index];
-  const imaginaryStaticHeading = info.imaginaryStaticHeadings[index];
   const referenceCollapsedHeading = info.referenceCollapsedHeading[index];
 
   const {height: uncollapsedHeight} = stickyHeading.getBoundingClientRect();
   const {height: collapsedHeight} = referenceCollapsedHeading.getBoundingClientRect();
 
   if (
-    imaginaryStaticHeading.getBoundingClientRect().bottom < 4 ||
-    imaginaryStaticHeading.getBoundingClientRect().top < -80
+    staticContainer.getBoundingClientRect().bottom < 4 ||
+    staticContainer.getBoundingClientRect().top < -80
   ) {
     if (!stickyContainer.classList.contains('collapse')) {
       stickyContainer.classList.add('collapse');