feat(glossary): add step 21 smart navigation

src/components/GlossaryEntryStickySync.astro

@@ -24,8 +24,10 @@
       const isCompactViewport = () =>
         mqMobile.matches || mqSmallLandscape.matches;
 
-      const heroHeight = () =>
-        Math.max(0, Math.round(hero.getBoundingClientRect().height || 0));
+      const heroHeight = () => {
+        const rect = hero.getBoundingClientRect();
+        return Math.max(0, Math.round(rect.height || 0));
+      };
 
       const neutralizeGlobalFollowIfCompact = () => {
         if (!isCompactViewport()) {
@@ -45,6 +47,21 @@
         follow.style.display !== "none" &&
         follow.getAttribute("aria-hidden") !== "true";
 
+      const syncFollowState = () => {
+        const on = computeFollowOn();
+
+        if (on) {
+          if (lastFollowOn === true) return;
+          lastFollowOn = true;
+          body.classList.add(FOLLOW_ON_CLASS);
+          return;
+        }
+
+        if (lastFollowOn === false) return;
+        lastFollowOn = false;
+        body.classList.remove(FOLLOW_ON_CLASS);
+      };
+
       const stripLocalSticky = () => {
         document
           .querySelectorAll(
@@ -68,13 +85,6 @@
         }
       };
 
-      const syncFollowState = () => {
-        const on = computeFollowOn();
-        if (on === lastFollowOn) return;
-        lastFollowOn = on;
-        body.classList.toggle(FOLLOW_ON_CLASS, on);
-      };
-
       const syncAll = () => {
         neutralizeGlobalFollowIfCompact();
         stripLocalSticky();
@@ -139,13 +149,6 @@
     z-index: 10;
   }
 
-  :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head){
-    margin-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
-  }
-
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-head h1){
     letter-spacing: -.03em;
   }
@@ -158,10 +161,9 @@
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    overflow: hidden;
+    display: block;
+    -webkit-line-clamp: unset;
+    overflow: visible;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){
@@ -183,11 +185,11 @@
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow){
-    transform: translateY(-1px);
+    transform: none;
   }
 
   :global(body.is-glossary-entry-page.glossary-entry-follow-on #reading-follow .reading-follow__inner){
-    margin-top: -1px;
+    margin-top: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
@@ -238,7 +240,7 @@
     }
 
     :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-dek){
-      display: none;
+      display: block;
     }
 
     :global(body.is-glossary-entry-page.glossary-entry-follow-on .glossary-entry-signals){