alois/hugo-PaperMod
1
0
Fork 0
mirror of https://github.com/adityatelange/hugo-PaperMod.git synced 2026-05-21 11:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve table of contents

Browse Source 
- Convert the `.toc` class to a `<details>` element
- Update styles for improved accessibility and interaction
This commit is contained in:
Aditya Telange
2026-04-11 17:56:08 +05:30
parent 7c29bf83e7
commit e8b88d4e72
2 changed files with 114 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/common/post-single.css
+37 -17
View File
@@ -45,40 +45,60 @@
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
} }
.toc { details.toc {
margin-bottom: var(--content-gap); margin-bottom: var(--content-gap);
border: 1px solid var(--border);
background: var(--code-bg); background: var(--code-bg);
border-radius: var(--radius); border-radius: var(--radius);
padding: 0.4em; border: 1px solid var(--border);
} }
[data-theme="dark"] .toc { [data-theme="dark"] details.toc {
background: var(--entry); 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; user-select: none;
} }
.toc details[open] summary { details .title {
cursor: zoom-out;
}
.toc .details {
display: inline; display: inline;
font-weight: 500; 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); margin-inline-start: var(--gap);
} }
layouts/partials/toc.html
+2 -4
View File
@@ -1,10 +1,9 @@
{{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}} {{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
{{- $has_headers := ge (len $headers) 1 -}} {{- $has_headers := ge (len $headers) 1 -}}
{{- if $has_headers -}} {{- 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)"> <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> </summary>
<div class="inner"> <div class="inner">
@@ -93,5 +92,4 @@
{{- end }} {{- end }}
</div> </div>
</details> </details>
</div>
{{- end }} {{- end }}