patx/afterdarklabs

fix mobile bottom cta 2

Commit 22c117d · patx · 2026-09-04T20:11:32-04:00

Changeset

22c117d00ed4b0bfa29ecedba05b0e16a02b6fcc

Parents

e5f25218be84037ad26a7a9c2e20179da523c738

View source at this commit

Comments

No comments yet.

Log in to comment

Diff

diff --git a/docs/index.html b/docs/index.html
index ce335cc..a7bc8c0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -483,7 +483,7 @@
             height: auto;
             align-items: flex-start;
             padding-top: 48px;
-            padding-bottom: 56px;
+            padding-bottom: calc(56px + env(safe-area-inset-bottom));
         }
 
         .work-intro.is-scroll-ready .work-heading-word {
@@ -1438,6 +1438,7 @@
             if (!closingStatement || !words.length) return;
 
             const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+            const animatedLayout = window.matchMedia('(min-width: 768px) and (hover: hover) and (pointer: fine)');
             let revealStart = 0;
             let revealDistance = 1;
             let revealedWords = -1;
@@ -1451,7 +1452,7 @@
             function updateClosingIntro() {
                 updateFrame = 0;
 
-                if (reduceMotion.matches) {
+                if (reduceMotion.matches || !animatedLayout.matches) {
                     words.forEach(word => word.classList.add('is-revealed'));
                     revealedWords = words.length;
                     return;
@@ -1469,15 +1470,18 @@
 
             function measureClosingIntro() {
                 resizeFrame = 0;
-                closingStatement.classList.toggle('is-scroll-ready', !reduceMotion.matches);
+                const shouldAnimate = animatedLayout.matches && !reduceMotion.matches;
+                closingStatement.classList.toggle('is-scroll-ready', shouldAnimate);
                 closingStatement.classList.remove('is-motion-ready');
 
+                if (!shouldAnimate) {
+                    words.forEach(word => word.classList.add('is-revealed'));
+                    revealedWords = words.length;
+                    return;
+                }
+
                 const statementTop = closingStatement.getBoundingClientRect().top + window.scrollY;
-                const visualViewport = window.visualViewport;
-                // Browser chrome changes only the visual height; pinch zoom changes its width too.
-                const viewportHeight = visualViewport && visualViewport.width >= document.documentElement.clientWidth - 1
-                    ? visualViewport.height
-                    : document.documentElement.clientHeight || window.innerHeight;
+                const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
                 const statementHeight = closingStatement.offsetHeight;
                 const maximumScroll = Math.max(0, document.documentElement.scrollHeight - viewportHeight);
                 revealStart = Math.min(maximumScroll, statementTop - viewportHeight + statementHeight * 0.05);
@@ -1505,6 +1509,7 @@
             window.visualViewport?.addEventListener('resize', scheduleClosingIntroMeasure);
             window.addEventListener('pageshow', scheduleClosingIntroMeasure);
             reduceMotion.addEventListener('change', scheduleClosingIntroMeasure);
+            animatedLayout.addEventListener('change', scheduleClosingIntroMeasure);
             document.fonts?.ready.then(scheduleClosingIntroMeasure);
             measureClosingIntro();
         })();