Expandable news section

Only show the most recent news with the older news collapsed in a <details>
element.

Author: jpgrayson

content/_index.md

@@ -62,6 +62,11 @@ bzip2-rs crate which allows for static linking when not using the
 
 This release also contains a few more bugfixes to `stg import`.
 
+[v2.3.2]: https://github.com/stacked-git/stgit/releases/tag/v2.3.2
+[v2.3.1]: https://github.com/stacked-git/stgit/releases/tag/v2.3.1
+[v2.3.0]: https://github.com/stacked-git/stgit/releases/tag/v2.3.0
+
+{{< details "More StGit News..." >}}
 ### 2023-05-15: [StGit v2.2.4][v2.2.4] has been released.
 
 StGit regained the ability to upgrade from stacks created by very old
@@ -249,9 +254,6 @@ See the [extension in the VSCode marketplace][marketplace] or checkout
 
 [stgit-at-work2]: https://soap.coffee/~lthms/opinions/StackedGit2.html
 [stgit-at-work]: https://soap.coffee/~lthms/opinions/StackedGit.html
-[v2.3.2]: https://github.com/stacked-git/stgit/releases/tag/v2.3.2
-[v2.3.1]: https://github.com/stacked-git/stgit/releases/tag/v2.3.1
-[v2.3.0]: https://github.com/stacked-git/stgit/releases/tag/v2.3.0
 [v2.2.4]: https://github.com/stacked-git/stgit/releases/tag/v2.2.4
 [v2.2.3]: https://github.com/stacked-git/stgit/releases/tag/v2.2.3
 [v2.2.2]: https://github.com/stacked-git/stgit/releases/tag/v2.2.2
@@ -267,6 +269,8 @@ See the [extension in the VSCode marketplace][marketplace] or checkout
 [libgit2]: https://libgit2.org/
 [gitoxide]: https://github.com/Byron/gitoxide
 
+{{< /details >}}
+
 ## Why Stacked Git?
 
 The *stack of patches* model is a natural way to maintain a clean Git

layouts/shortcodes/details.html

@@ -0,0 +1,4 @@
+<details>
+  <summary>{{ (.Get 0) | markdownify }}</summary>
+  {{ .Inner | markdownify }}
+</details>

static/css/stgit.css

@@ -123,13 +123,22 @@ h2 { font-size: var(--s3); }
 h3 { font-size: var(--s2); }
 h4 { font-size: var(--s1); }
 
-main > h2 {
+main > details > summary {
+    font-size: var(--s2);
+    color: var(--color-link);
+}
+
+main > details > summary::marker {
+    color: var(--color-darkish);
+}
+
+main h2 {
     background: var(--color-lightish);
     padding-top: 0.5em;
     padding-bottom: 0.25em;
     padding-left: 0.25em;
 }
-main > h3 {
+main h3 {
     text-decoration: underline;
 }
 
@@ -138,8 +147,8 @@ aside > ol,
 aside > ul,
 blockquote > ol,
 blockquote > ul,
-main > ol,
-main > ul {
+main ol,
+main ul {
     padding-left: 2em;
 }
 
@@ -148,7 +157,7 @@ ul > li > ul {
     padding-left: 2em;
 }
 
-main > * + * {
+main * + * {
     margin-top: var(--s3);
 }