From: Cameron Otsuka <cameron@otsuka.haus>
Date: Thu, 23 Oct 2025 18:28:57 +0000 (-0700)
Subject: implement view transitions
X-Git-Url: https://git.otsuka.systems/?a=commitdiff_plain;h=30024ce4cf69b2febfa0e2dd5b14a5213536285c;p=cotsuka.github.io

implement view transitions
---

diff --git a/src/components/metadata.astro b/src/components/metadata.astro
index cff7ec9..ac88704 100644
--- a/src/components/metadata.astro
+++ b/src/components/metadata.astro
@@ -30,6 +30,15 @@ const date = formatDate(entry.data.date);
     details {
         margin-bottom: 1rem;
         font-size: 0.8rem;
+        &::details-content {
+            opacity: 0;
+            block-size: 0;
+        }
+        &[open]::details-content {
+            opacity: 1;
+            block-size: auto;
+            transition: content-visibility 0.4s allow-discrete, opacity 0.4s, block-size 0.4s;
+        }
     }
     summary:hover {
         cursor: pointer;
diff --git a/src/styles/style.css b/src/styles/style.css
index 2b9ba3f..9c20480 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,3 +1,7 @@
+@view-transition {
+  navigation: auto;
+}
+
 html {
   background-color: #ffffff;
   color: #000000;
@@ -6,6 +10,7 @@ html {
   font-kerning: normal;
   font-weight: 400;
   font-size: 100%;
+  scrollbar-gutter: stable both-edges;
 }
 body {
   max-width: 45rem;
@@ -48,7 +53,7 @@ img {
 }
 img:hover {
   filter: grayscale(0);
-  transition: all 0.5s linear;
+  transition: all 0.4s linear;
 }
 dd {
   margin-bottom: 0.5rem;