Add details open and close transition

diff --git a/index.html b/index.html
index 048be24969ae55388e1b5bfd9f5ab53739d174f4..b6332726defc79daf43b07dc5b8bfa7a081ec9f3 100644 (file)
--- 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;