Use better page transistions

2026-03-22 21:54:24 +01:00
parent e6e17d880e
commit d5fb608091
8 changed files with 21 additions and 19 deletions
@@ -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">
-    <h1>{entry.data.title}</h1>
+  <div class="glass-container header" style={`view-transition-name: blog-header-${entry.id};`}>
+    <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>