Use better page transistions

src/components/Navigation.astro

@@ -3,7 +3,7 @@ const currentPath = Astro.url.pathname;
 import Logo from "../assets/logo.svg";
 ---
 
-<nav class="main-nav glass-container">
+<nav class="main-nav glass-container" style="view-transition-name:navigation;">
   <div class="nav-content">
     <a href="/" class="logo">
       <Logo class="logo-img" />

src/pages/blog/[...slug].astro

@@ -15,10 +15,10 @@ const { entry } = Astro.props;
 const { Content } = await render(entry);
 ---
 <BaseLayout title={entry.data.title} theme="blog">
-  <div class="glass-container header">
+  <div class="glass-container header" style={`view-transition-name: blog-header-${entry.id};`}>
-    <h1>{entry.data.title}</h1>
+    <h1 style={`view-transition-name: blog-headline-${entry.id};`}>{entry.data.title}</h1>
     <div class="meta">
-      <time>{entry.data.pubDate.toLocaleDateString()}</time>
+      <time style={`view-transition-name: blog-pubdate-${entry.id};`}>{entry.data.pubDate.toLocaleDateString()}</time>
     </div>
   </div>
   

src/pages/blog/index.astro

@@ -6,16 +6,16 @@ const posts = await getCollection('blog');
 posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 ---
 <BaseLayout title="Blog" theme="blog" description="Gedanken über Technologie, Design und das Leben von c0ntroller.de.">
-  <div class="glass-container header">
+  <div class="glass-container header" style="view-transition-name:main-glass;">
     <h1>Artikel & Gedanken</h1>
     <p>Gedanken über Technologie, Design und das Leben.</p>
   </div>
 
   <div class="list">
     {posts.map(post => (
-      <a href={`/blog/${post.id}`} class="glass-container link-card">
+      <a href={`/blog/${post.id}`} class="glass-container link-card" style={`view-transition-name: blog-header-${post.id};`}>
-        <h2>{post.data.title}</h2>
+        <h2 style={`view-transition-name: blog-headline-${post.id};`}>{post.data.title}</h2>
-        <p class="date">{post.data.pubDate.toLocaleDateString()}</p>
+        <time class="date" style={`view-transition-name: blog-pubdate-${post.id};`}>{post.data.pubDate.toLocaleDateString()}</time>
         <p>{post.data.summary}</p>
       </a>
     ))}

src/pages/book/[...slug].astro

@@ -34,8 +34,8 @@ const chapters = allPages.reduce((acc, p) => {
 }, {} as Record<string, typeof allPages>);
 ---
 <BaseLayout title={page.data.title} theme="book">
-  <div class="glass-container content prose">
+  <div class="glass-container content prose" style="view-transition-name:main-glass;">
-    <h1>{page.data.title}</h1>
+    <h1 style={`view-transition-name: book-headline-${page.id.replaceAll("/", "-")};`}>{page.data.title}</h1>
     <Content />
   </div>
 

src/pages/book/index.astro

@@ -13,7 +13,7 @@ const chapters = pages.reduce((acc, page) => {
 }, {} as Record<string, typeof pages>);
 ---
 <BaseLayout title="Das Buch" theme="book" description="Ein fortlaufendes Werk über Software, Design und Architektur von c0ntroller.de.">
-  <div class="glass-container header">
+  <div class="glass-container header" style="view-transition-name:main-glass;">
     <h1>Das Buch</h1>
     <p>Ein fortlaufendes Werk über Software, Design und Architektur.</p>
   </div>
@@ -25,7 +25,7 @@ const chapters = pages.reduce((acc, page) => {
         <h3>{chapter.replace(/-/g, ' ').toUpperCase()}</h3>
         <ul class="page-list">
           {items.map(item => (
-            <li><a href={`/book/${item.id}`}>{item.data.title}</a></li>
+            <li><a href={`/book/${item.id}`} style={`view-transition-name: book-headline-${item.id.replaceAll("/", "-")};`}>{item.data.title}</a></li>
           ))}
         </ul>
       </div>

src/pages/portfolio/[...slug].astro

@@ -15,8 +15,8 @@ const { entry } = Astro.props;
 const { Content } = await render(entry);
 ---
 <BaseLayout title={entry.data.title} theme="portfolio">
-  <div class="glass-container header">
+  <div class="glass-container header" style={`view-transition-name: project-header-${entry.id};`}>
-    <h1>{entry.data.title}</h1>
+    <h1 style={`view-transition-name: project-headline-${entry.id};`}>{entry.data.title}</h1>
     <p>{entry.data.summary}</p>
     {entry.data.tags && (
       <div class="tags">

src/pages/portfolio/index.astro

@@ -6,15 +6,15 @@ const projects = await getCollection('portfolio');
 projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 ---
 <BaseLayout title="Portfolio" theme="portfolio" description="Eine Auswahl aktueller Projekte und Experimente von c0ntroller.de.">
-  <div class="glass-container">
+  <div class="glass-container" style="view-transition-name:main-glass;">
     <h1>Meine Arbeiten</h1>
     <p>Eine Auswahl aktueller Projekte und Experimente.</p>
   </div>
   
   <div class="grid">
     {projects.map(project => (
-      <a href={`/portfolio/${project.id}`} class="glass-container link-card">
+      <a href={`/portfolio/${project.id}`} class="glass-container link-card" style={`view-transition-name: project-header-${project.id};`}>
-        <h2>{project.data.title}</h2>
+        <h2 style={`view-transition-name: project-headline-${project.id};`}>{project.data.title}</h2>
         <p>{project.data.summary}</p>
         {project.data.tags && (
           <div class="tags">

src/styles/global.css

@@ -5,9 +5,11 @@
   transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
 }
 
+@media (prefers-reduced-motion: no-preference) {
   @view-transition {
     navigation: auto;
   }
+}
 
 ::view-transition-group(root) {
   background-color: var(--bg-color);