From 50d0b505af8ed2038dc0f6ee01b8ba04b04310eb Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Sun, 6 Apr 2025 11:50:42 -0300
Subject: 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
---
 src/static/css/site.css                | 48 ++++++++++++----------------------
 src/static/js/client/sticky-heading.js | 24 ++++++++++-------
 2 files changed, 31 insertions(+), 41 deletions(-)

(limited to 'src/static')

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');
-- 
cgit 1.3.0-6-gf8a5