Improve table of contents

- Convert the `.toc` class to a `<details>` element
- Update styles for improved accessibility and interaction

assets/css/common/post-single.css

@@ -45,40 +45,60 @@
     -webkit-box-decoration-break: clone;
 }
 
-.toc {
+details.toc {
     margin-bottom: var(--content-gap);
-    border: 1px solid var(--border);
     background: var(--code-bg);
     border-radius: var(--radius);
-    padding: 0.4em;
+    border: 1px solid var(--border);
 }
 
-[data-theme="dark"] .toc {
+[data-theme="dark"] details.toc {
     background: var(--entry);
 }
 
-.toc details summary {
+details.toc summary {
-    cursor: zoom-in;
+    padding: 0.5rem 1.2rem;
-    margin-inline-start: 10px;
+    border-radius: var(--radius);
+}
+
+details summary {
+    cursor: pointer;
+    display: list-item;
+    width: 100%;
+    margin-inline-start: 0;
     user-select: none;
 }
 
-.toc details[open] summary {
+details .title {
-    cursor: zoom-out;
-}
-
-.toc .details {
     display: inline;
     font-weight: 500;
+    margin-inline-start: 0.2rem;
 }
 
-.toc .inner {
+details {
-    margin: 5px 20px;
+    interpolate-size: allow-keywords;
-    padding: 0 10px;
-    opacity: 0.9;
 }
 
-.toc li ul {
+details::details-content {
+    height: 0;
+    opacity: 0;
+    overflow: clip;
+    transition: height 150ms ease,
+        opacity 150ms ease,
+        content-visibility 150ms allow-discrete;
+}
+
+details[open]::details-content {
+    height: auto;
+    opacity: 1;
+}
+
+details .inner {
+    margin: 0 2.4rem;
+    padding-bottom: 0.6rem;
+}
+
+details li ul {
     margin-inline-start: var(--gap);
 }
 

layouts/partials/toc.html

@@ -1,10 +1,9 @@
 {{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
 {{- $has_headers := ge (len $headers) 1 -}}
 {{- if $has_headers -}}
-<div class="toc">
+<details class="toc" {{if (.Param "TocOpen") }} open{{ end }}>
-    <details {{if (.Param "TocOpen") }} open{{ end }}>
     <summary accesskey="c" title="(Alt + C)">
-            <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
+        <span class="title">{{- i18n "toc" | default "Table of Contents" }}</span>
     </summary>
 
     <div class="inner">
@@ -92,6 +91,5 @@
         </ul>
         {{- end }}
     </div>
-    </details>
+</details>
-</div>
 {{- end }}