Add a details shortcode

2023-06-04 21:54:08 -07:00
2 changed files with 24 additions and 0 deletions
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -339,3 +339,23 @@ figure {
        margin: 0 0.25rem 0 0.25rem;
    }
 }
+
+details {
+    @include bordered-block;
+    padding: 0.5rem 0.5rem 0 0.5rem;
+
+    &[open] {
+        padding-bottom: 0.5rem;
+
+        summary {
+            border-bottom: $standard-border;
+            margin-bottom: 0.5rem;
+        }
+    }
+}
+
+summary {
+    margin: 0 -0.5rem 0 -0.5rem;
+    padding: 0.5rem;
+    padding-top: 0;
+}
--- a/layouts/shortcodes/details.html
+++ b/layouts/shortcodes/details.html
@@ -0,0 +1,4 @@
+<details>
+    <summary>{{ .Get "summary" | markdownify }}</summary>
+    {{ .Inner | markdownify }}
+</details>