Merge branch 'main' into a11y-fixes

Author: tunetheweb

public/baseline-status.min.js

@@ -35,7 +35,7 @@ import Authors from "./authors.astro";
       padding-block-end: 100px;
 
       @media (orientation: landscape) {
-        min-block-size: 1100px;
+        min-block-size: 1100px !important;
       }
 
       background-image: url(/biomes/cyberspace-sidebar.png),

public/social.png

@@ -44,7 +44,7 @@ const totalFeatures = biomes.reduce((total, biome) => {
     </div>
     <div>
       <p class="sub-title">
-        Chrome and <span class="callout"><Icon aria-label="CSS" name="css" size="1ch" title="CSS" /> in 2024</span> journeyed<br>
+        Chrome and <span class="callout"><Icon aria-label="CSS" name="css" size="1ch" title="CSS" /> CSS</span> in 2024 journeyed<br>
         through the <b>forest</b>, over the <b>mountains</b>, and across the <b>seas</b>…
       </p>
     </div>
@@ -239,6 +239,13 @@ const totalFeatures = biomes.reduce((total, biome) => {
               animation-range: 25% 75%;
             }
           }
+          /* Center stan when no SDA or no motion */
+          @media (prefers-reduced-motion: reduce) {
+            margin: 0 auto;
+          }
+          @supports not (animation-timeline: view()) {
+            margin: 0 auto;
+          }
         }
       }
     }
@@ -277,11 +284,16 @@ const totalFeatures = biomes.reduce((total, biome) => {
         transform-origin: center;
 
         @media (prefers-reduced-motion: no-preference) {
-          animation:
-            particle-scroll linear both,
-            particle-enter 1s ease;
-          animation-timeline: scroll(y root), auto;
-          animation-range: 0vh var(--range);
+          @supports (animation-timeline: view()) {
+            animation:
+              particle-scroll linear both,
+              particle-enter 1s ease;
+            animation-timeline: scroll(y root), auto;
+            animation-range: 0vh var(--range);
+          }
+          @supports not (animation-timeline: view()) {
+            animation: particle-enter 1s ease;
+          }
         }
 
         &.pixel {

public/video/animate-to-auto.mp4

@@ -107,13 +107,11 @@ const { biomes } = Astro.props;
     e.target.lastScrollTop = st <= 0 ? 0 : st;
   }
 
-  const observer = new IntersectionObserver(
+  const biomeObserver = new IntersectionObserver(
     (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          const details = document.querySelector(
-            `#${entry.target.getAttribute("data-details-target")}`
-          );
+          const details = document.querySelector(`#${entry.target.getAttribute("data-details-target")}`);
           details.setAttribute("open", "");
         }
       });
@@ -123,15 +121,49 @@ const { biomes } = Astro.props;
     }
   );
 
+  const featureObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const id = entry.target.getAttribute("id");
+        const $li = document.querySelector(`aside nav details li:has(a[href="#${id}"])`);
+
+        if (!$li) return;
+
+        if (entry.isIntersecting) {
+          $li.classList.add('in-view');
+        } else {
+          $li.classList.remove('in-view');
+        }
+      });
+    },
+    {
+      threshold: 0,
+    }
+  );
+
   function observeForSidenav() {
     document.querySelectorAll(".biome > section").forEach((biome) => {
-      observer.observe(biome);
+      biomeObserver.observe(biome);
+
+      if (!CSS.supports('animation-timeline: view()')) {
+        const features = biome.querySelectorAll('.features-list > div > article');
+        features.forEach(feature => {
+          featureObserver.observe(feature);
+        });
+      }
     });
   }
 
   function unobserveForSidenav() {
     document.querySelectorAll(".biome > section").forEach((biome) => {
-      observer.unobserve(biome);
+      biomeObserver.unobserve(biome);
+
+      if (!CSS.supports('animation-timeline: view()')) {
+        const features = biome.querySelectorAll('.features-list > div > article');
+        features.forEach(feature => {
+          featureObserver.unobserve(feature);
+        });
+      }
     });
   }
 
@@ -246,14 +278,26 @@ const { biomes } = Astro.props;
             position: absolute;
             top: 0;
             left: 4px;
-            background: var(--link);
-
+            
             inline-size: 3px;
             block-size: 100%;
+            
+            /* SDA ScrollSpy */
+            @supports (animation-timeline: view()) {
+              background: var(--link);
+              transform: scaleY(0);
+              animation: i-spy linear;
+              animation-timeline: var(--_view-timeline);
+            }
+
+            @supports not (animation-timeline: view()) {
+              background: transparent;
+            }
+          }
 
-            transform: scaleY(0);
-            animation: i-spy linear;
-            animation-timeline: var(--_view-timeline);
+          /* IntersectionObserver-based ScrollSpy */
+          &.in-view::before {
+            background: var(--link);
           }
 
           & code {

public/video/animated-details-accordion.mp4

@@ -119,12 +119,14 @@
   }
 
   @media (prefers-reduced-motion: no-preference) {
-    ::view-transition-old(root) {
-      animation: none;
-    }
+    @media(width <= 1600px) {
+      ::view-transition-old(root) {
+        animation: none;
+      }
 
-    ::view-transition-new(root) {
-      animation: 2.5s cubic-bezier(0.25, 1, 0.3, 1) circle-in-top-right forwards;
+      ::view-transition-new(root) {
+        animation: 2s cubic-bezier(0.25, 1, 0.3, 1) circle-in-top-right forwards;
+      }
     }
   }
 </style>