Website Update

Author: Modelized

docs/assets/css/style.css

@@ -2075,7 +2075,7 @@ a {
   }
 
   .discipline-stack-shell {
-    --discipline-card-width: min(100%, 24.1rem);
+    --discipline-card-width: min(calc(100% - 2.35rem), 24.1rem);
     --discipline-card-height: clamp(25.8rem, 84vw, 30.4rem);
   }
 

docs/assets/js/shell.js

@@ -3,7 +3,7 @@
 
   const body = document.body;
   const base = (body?.getAttribute('data-base') || '.').trim();
-  const assetVersion = '20260410s';
+  const assetVersion = '20260410t';
   const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   const SETTLE_PASS_DELAYS = [0, 140, 320, 560];
   const simpleIcon = (name) => `https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/${name}.svg`;
@@ -1038,27 +1038,57 @@
       return;
     }
 
+    const revealElement = (element, observer) => {
+      if (element.classList.contains("is-visible")) {
+        return;
+      }
+      element.classList.add("is-visible");
+      observer?.unobserve?.(element);
+    };
+
+    const inView = (element) => {
+      const rect = element.getBoundingClientRect();
+      const vh = window.innerHeight || document.documentElement.clientHeight;
+      const vw = window.innerWidth || document.documentElement.clientWidth;
+      return rect.bottom > 0 && rect.right > 0 && rect.top < vh && rect.left < vw;
+    };
+
     const observer = new IntersectionObserver(
       (entries, obs) => {
         entries.forEach((entry) => {
           if (!entry.isIntersecting) {
             return;
           }
-          entry.target.classList.add("is-visible");
-          obs.unobserve(entry.target);
+          revealElement(entry.target, obs);
         });
       },
       {
-        rootMargin: "0px 0px -10% 0px",
-        threshold: 0.12
+        root: null,
+        rootMargin: "0px 0px -1% 0px",
+        threshold: 0
       }
     );
 
     revealElements.forEach((element) => observer.observe(element));
+    const revealVisibleNow = () => {
+      revealElements.forEach((element) => {
+        if (!element.classList.contains("is-visible") && inView(element)) {
+          revealElement(element, observer);
+        }
+      });
+    };
+    requestAnimationFrame(revealVisibleNow);
     settleHeroReveal(observer);
     requestAnimationFrame(() => settleHeroReveal(observer));
-    window.setTimeout(() => settleHeroReveal(observer), 120);
-    window.addEventListener("pageshow", () => settleHeroReveal(observer));
+    window.setTimeout(() => {
+      settleHeroReveal(observer);
+      revealVisibleNow();
+    }, 120);
+    window.addEventListener("resize", revealVisibleNow);
+    window.addEventListener("pageshow", () => {
+      settleHeroReveal(observer);
+      revealVisibleNow();
+    });
   }
 
   function initHeroIntro() {

docs/index.html

@@ -8,7 +8,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="assets/css/style.css?v=20260410s">
+  <link rel="stylesheet" href="assets/css/style.css?v=20260410t">
 
   <link rel="icon" type="image/svg+xml" href="favicon.svg">
   <link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -185,6 +185,6 @@ <h2>A <span class="tagline-script">Closer Look</span> At The Path</h2>
 
   <div id="footer-slot"></div>
 
-  <script src="assets/js/shell.js?v=20260410s" defer></script>
+  <script src="assets/js/shell.js?v=20260410t" defer></script>
 </body>
 </html>