From 73e66d51122b94e57db87a1728f132c1cc59822a Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 7 Mar 2025 18:15:01 -0800
Subject: [PATCH] Add details open and close transition

---
 index.html | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/index.html b/index.html
index 048be24..b633272 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,7 @@
       --secondary: hsl(90deg 40% 35%);
       --secondary-lighter: hsl(90deg 30% 80%);
       --secondary-lightest: hsl(90deg 5% 90%);
+      interpolate-size: allow-keywords;
     }
 
     body {
@@ -93,6 +94,16 @@
       border-radius: 2px;
     }
 
+    details::details-content {
+      transition: block-size 200ms ease, content-visibility 200ms ease allow-discrete;
+      block-size: 0;
+      overflow: clip;
+    }
+
+    details[open]::details-content {
+      block-size: auto;
+    }
+
     summary {
       background: var(--secondary-lighter);
       padding: 8px 16px;
-- 
2.47.3