sites/trwnh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

WIP: floating TOC toggle on articles

Browse source
This commit is contained in:
a 2024-10-06 16:50:17 -05:00
parent f4feb28827
commit e5a5f5e8b6
5 changed files with 59 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
unified.test.hugo/assets/styles/common.scss
View file

@ -23,5 +23,6 @@
@import "features/autonumbering"; @import "features/autonumbering";
@import "features/search"; @import "features/search";
@import "features/syntax-highlighting";
@import "components/table-of-contents"; @import "components/table-of-contents";

6
unified.test.hugo/assets/styles/common/content.scss
View file

@ -1,5 +1,5 @@
.hugo-content { .hugo-content {
*:first-child { > *:first-child {
margin-block-start: 0; margin-block-start: 0;
} }
/* text */ /* text */
@ -104,7 +104,7 @@
line-height: 1.4; line-height: 1.4;
overflow: auto; overflow: auto;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-break: break-word;
display: grid; display: grid;
tab-size: 3; tab-size: 3;
margin-block-end: 1em; margin-block-end: 1em;
@ -115,6 +115,8 @@
color: var(--ui-overlay-text); color: var(--ui-overlay-text);
padding: 0.25rem; padding: 0.25rem;
font-size: 1rem; font-size: 1rem;
white-space: pre-wrap;
word-break: break-word;
} }
:not(.highlight) > pre { :not(.highlight) > pre {
line-height: 1.5; line-height: 1.5;

50
unified.test.hugo/assets/styles/layouts/_default/single.scss
View file

@ -40,7 +40,55 @@
max-width: 80ch; max-width: 80ch;
margin-inline: auto; margin-inline: auto;
} }
#toc-toggle {
display: none;
position: fixed;
bottom: 1em;
right: 1em;
background-color: var(--ui-overlay);
z-index: 5;
outline: none;
&:checked ~ .page-toc {
display: block;
position: fixed;
z-index: 10;
bottom: 5em;
height: 80vh;
overflow-y: scroll;
right: 1em;
background: var(--ui-overlay);
}
}
label[for="toc-toggle"] {
position: fixed;
bottom: 1em;
right: 1em;
z-index: 5;
background: var(--ui-overlay);
padding: 1em;
border-radius: 100em;
width: 6em;
display: flex;
justify-content: center;
}
#toc-toggle__label-hide {
display: none;
}
#toc-toggle:checked ~ #toc-toggle__label-hide {
display: flex;
}
#toc-toggle:checked ~ #toc-toggle__label-show {
display: none;
}
@media (min-width: 400px) {
.container {
padding: 0 2em;
}
}
@media (min-width: 60rem) { @media (min-width: 60rem) {
label[for="toc-toggle"] {
display: none;
}
.container {padding: 0;} .container {padding: 0;}
.page[has-toc] { .page[has-toc] {
display: grid; display: grid;
@ -67,6 +115,8 @@
align-self: start; align-self: start;
justify-self: start; justify-self: start;
max-width: unset; max-width: unset;
border-inline-start: thin solid var(--ui-overlay);
padding-inline-start: 2em;
details { details {
padding: 0; padding: 0;
background: none; background: none;

4
unified.test.hugo/assets/styles/screen.scss
View file

@ -1,3 +1 @@
@import "common"; @import "common";
@import "features/syntax-highlighting";

3
unified.test.hugo/layouts/_default/single.html
View file

@ -42,6 +42,9 @@
<hr> <hr>
</header> </header>
{{ if .Params.toc }} {{ if .Params.toc }}
<input type="checkbox" id="toc-toggle">
<label for="toc-toggle" id="toc-toggle__label-show">Show TOC</label>
<label for="toc-toggle" id="toc-toggle__label-hide">Hide TOC</label>
<aside class="page-toc toc section"> <aside class="page-toc toc section">
<div class="container"> <div class="container">
<details open> <details open>