From: Cameron Otsuka <cameron@otsuka.haus>
Date: Sat, 25 Oct 2025 01:00:34 +0000 (-0700)
Subject: align transition styles
X-Git-Url: https://git.otsuka.systems/?a=commitdiff_plain;h=eca3e3aacd4e10bcf48099d240be467a63fcea32;p=cotsuka.github.io

align transition styles
---

diff --git a/src/components/metadata.astro b/src/components/metadata.astro
index ac88704..91d5ef3 100644
--- a/src/components/metadata.astro
+++ b/src/components/metadata.astro
@@ -32,12 +32,10 @@ const date = formatDate(entry.data.date);
         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;
+            transition: all 0.4s linear;
         }
     }
     summary:hover {
diff --git a/src/components/ui/spoiler.astro b/src/components/ui/spoiler.astro
index 9598ac6..28aaad9 100644
--- a/src/components/ui/spoiler.astro
+++ b/src/components/ui/spoiler.astro
@@ -9,10 +9,17 @@
         background-color: #000000;
         margin-bottom: 1rem;
         padding: 0.5rem;
-    }
-    details.spoiler[open] {
-        color: unset;
-        background-color: unset;
-        border: 0.1rem solid;
+        &[open] {
+            color: unset;
+            background-color: unset;
+            border: 0.1rem solid;
+        }
+        &::details-content {
+            opacity: 0;
+        }
+        &[open]::details-content {
+            opacity: 1;
+            transition: all 0.4s linear;
+        }
     }
 </style>
\ No newline at end of file