implement view transitions

diff --git a/src/components/metadata.astro b/src/components/metadata.astro
index cff7ec9ab77d2f64b3337b57a51db0acfef9315c..ac88704df9a6023ba0df26924322b55934d0d6bf 100644 (file)
--- 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 2b9ba3f4e52a997c3ff226c03335c66e87d1e337..9c20480925e5e94a329c4fd01cfbefade453b4a7 100644 (file)
--- 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;