styling

src/components/TestPage.astro

@@ -14,7 +14,7 @@
     addEventListener("pagereveal", (e) => {
       const d = {};
       d.viewTransition = e?.viewTransition;
-      d.activation = activation(window.navigation?.activation);
+      d.activation = activation("navigation" in window ? window.navigation?.activation : undefined);
       sessionStorage.setItem("vtbag-pagereveal", JSON.stringify(d));
     });
 

src/components/ToolsBar.astro

@@ -43,7 +43,7 @@
     });
     addEventListener("pagereveal", (e) => {
       if (e.viewTransition) {
-        const elem = mark(window.navigation?.activation.from);
+        const elem = mark("navigation" in window && window.navigation?.activation.from);
         e.viewTransition.finished.then(() =>
           elem?.style.removeProperty("view-transition-name")
         );

src/pages/basics/hide-and-seek/problem.astro

@@ -65,7 +65,7 @@ import Bsky from "../../../components/Bsky.astro";
       addEventListener("pagereveal", (event) => {
         if (event.viewTransition) {
           if (
-            new URL(window.navigation?.activation.from.url, location.href).pathname !==
+            new URL("navigation" in window && window.navigation?.activation.from.url, location.href).pathname !==
             "/basics/hide-and-seek/problem/"
           ) {
             event.viewTransition.skipTransition?.();

src/pages/viewer-demo/1.astro

@@ -2,6 +2,7 @@
 import Layout from "./_Layout.astro";
 import { Image } from "astro:assets";
 import Content from "./_1.mdx";
+import i1 from "./_400_1.webp";
 ---
 
 <Layout title="Image Slider Demo">
@@ -11,12 +12,12 @@ import Content from "./_1.mdx";
     <a href="/viewer-demo/">All</a>
     <a href="/viewer-demo/2/" data-vtbag-link-types="next/prev">Next</a>
     <Image
-      src="https://picsum.photos/id/534/300/400"
+      src={i1}
       alt="Image 1"
       width="300"
       height="400"
     />
-    <Content/>
+    <div style="max-width: 600px; margin-inline:auto"><Content/></div>
   </main>
 </Layout>
 <style is:global>

src/pages/viewer-demo/2.astro

@@ -2,6 +2,7 @@
 import Layout from "./_Layout.astro";
 import { Image } from "astro:assets";
 import Content from "./_2.mdx";
+import i2 from "./_400_2.webp";
 ---
 
 <Layout title="Image Slider Demo">
@@ -11,12 +12,12 @@ import Content from "./_2.mdx";
     <a href="/viewer-demo/">All</a>
     <a href="/viewer-demo/3/" data-vtbag-link-types="next/prev">Next</a>
     <Image
-      src="https://picsum.photos/id/635/300/400"
+      src={i2}
       alt="Image 2"
       width="300"
       height="400"
     />
-    <Content />
+    <div style="max-width: 600px; margin-inline:auto"><Content/></div>
   </main>
 </Layout>
 <style is:global>

src/pages/viewer-demo/3.astro

@@ -2,6 +2,7 @@
 import Layout from "./_Layout.astro";
 import { Image } from "astro:assets";
 import Content from "./_3.mdx";
+import i3 from "./_400_3.webp";
 ---
 
 <Layout title="Image Slider Demo">
@@ -11,12 +12,12 @@ import Content from "./_3.mdx";
     <a href="/viewer-demo/">All</a>
     <a href="/viewer-demo/1/" data-vtbag-link-types="next/prev">Next</a>
     <Image
-      src="https://picsum.photos/id/625/300/400"
+      src={i3}
       alt="Image 3"
       width="300"
       height="400"
     />
-    <Content/>
+    <div style="max-width: 600px; margin-inline:auto"><Content/></div>
   </main>
 </Layout>
 <style is:global>

src/pages/viewer-demo/_1.mdx

@@ -1,7 +1,9 @@
 This page features links to a previous and a next page. The HTML for these two links has an additional `data-vtbag-link-types` attribute:
+
 ```html
 <a href="/viewer-demo/3/" data-vtbag-link-types="prev/next">Prev</a>
 <a href="/viewer-demo/">All</a>
 <a href="/viewer-demo/2/" data-vtbag-link-types="next/prev">Next</a>
 ```
+
 The identifiers before the slash (/) are set as view transition types on forward navigation. The identifiers after the slash are optional. If they are present, they are set as view transition types for history back traversals.

src/pages/viewer-demo/_3.mdx

@@ -1,4 +1,5 @@
 With the script and the annotations in place you can use the generated view transition types to guard your animation rules:
+
 ```css
   :active-view-transition-type(next) {
     &::view-transition-old(img) {

src/pages/viewer-demo/_Layout.astro

@@ -39,48 +39,40 @@ const { title } = Astro.props;
     margin-inline: auto;
     padding: 1ex;
   }
+
   img {
     display: block;
     margin-inline: auto;
     margin-top: 1ex;
+    view-transition-class: img;
   }
 
   @view-transition {
     navigation: auto;
   }
 
-  ::view-transition-old(img),
-  ::view-transition-new(img) {
+  ::view-transition-old(.img),
+  ::view-transition-new(.img) {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
-  ::view-transition-image-pair(img1),
-  ::view-transition-image-pair(img2),
-  ::view-transition-image-pair(img3) {
+  ::view-transition-image-pair(*) {
     overflow: hidden;
   }
   :active-view-transition-type(next) {
-    &::view-transition-old(img1),
-    &::view-transition-old(img2),
-    &::view-transition-old(img3) {
+    &::view-transition-old(.img) {
       animation: slide-out-left 0.5s ease-out;
     }
-    &::view-transition-new(img1),
-    &::view-transition-new(img2),
-    &::view-transition-new(img3) {
+    &::view-transition-new(.img) {
       animation: slide-in-left 0.5s ease-out;
     }
   }
   :active-view-transition-type(prev) {
-    &::view-transition-old(img1),
-    &::view-transition-old(img2),
-    &::view-transition-old(img3) {
+    &::view-transition-old(.img) {
       animation: slide-out-right 0.5s ease-out;
     }
-    &::view-transition-new(img1),
-    &::view-transition-new(img2),
-    &::view-transition-new(img3) {
+    &::view-transition-new(.img) {
       animation: slide-in-right 0.5s ease-out;
     }
   }

src/pages/viewer-demo/index.astro

@@ -1,52 +1,43 @@
 ---
 import Layout from "./_Layout.astro";
 import { Image } from "astro:assets";
+import i1 from "./_200_1.webp";
+import i2 from "./_200_2.webp";
+import i3 from "./_200_3.webp";
 ---
 
 <Layout title="Image Slider Demo">
-  <main>
+  <main style="max-width:910px;">
     <h1>Image Slider Demo</h1>
     <p>
       This tech demo uses <b>links annotated with view transition types</b> for
-      fine grained control over <b>browser-native cross-document</b> view transitions.
-      Click an image!
+      fine grained control over <b>browser-native cross-document</b> view
+      transitions. Click an image!
     </p>
     <a href="/viewer-demo/1/"
-      ><Image
-        src="https://picsum.photos/id/534/300/200"
-        alt="Image 1"
-        width="300"
-        height="200"
-      /></a
+      ><Image src={i1} alt="Image 1" width="300" height="200" /></a
     ><a href="/viewer-demo/2/">
-      <Image
-        src="https://picsum.photos/id/635/300/200"
-        alt="Image 2"
-        width="300"
-        height="200"
-      /></a
+      <Image src={i2} alt="Image 2" width="300" height="200" /></a
     ><a href="/viewer-demo/3/">
-      <Image
-        src="https://picsum.photos/id/625/300/200"
-        alt="Image 3"
-        width="300"
-        height="200"
-      /></a
-    ><p>[Return to the <a href="/tools/turn-signal/#link-types">turn-signal page</a>]</p>
+      <Image src={i3} alt="Image 3" width="300" height="200" /></a
+    ><p>
+      [Return to the <a href="/tools/turn-signal/#link-types"
+        >turn-signal page</a
+      >]
+    </p>
   </main>
 </Layout>
 
 <style is:global>
   main {
-    margin-inline: auto;
-    padding: 1rem;
-    max-width: 910px;
     text-align: center;
   }
   p {
     text-align: justify;
   }
-a img {display: inline}
+  a img {
+    display: inline;
+  }
   h1 {
     font-size: 2.5rem;
     font-weight: 700;