denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved styling of side-bound TableOfContents component

Browse Source
This commit is contained in:
denizk0461
2026-04-26 22:39:07 +02:00
parent a1effdec8e
commit 72347769c3
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/lib/components/table-of-contents.svelte
View File

@@ -81,31 +81,38 @@
<style> <style>
:global { :global {
body {
--padding-indent-base: 44px;
--padding-level-indent: 24px;
}
.toc-container, .toc-container-side { .toc-container, .toc-container-side {
box-sizing: border-box; box-sizing: border-box;
padding: 16px 0; padding: 16px 0;
border: var(--border-style) var(--border-dash-size) var(--color-highlight);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.toc-container { .toc-container {
--padding-indent-base: 44px;
--padding-level-indent: 24px;
max-width: var(--width-toc); max-width: var(--width-toc);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 12px; margin-top: 12px;
border: var(--border-style) var(--border-dash-size) var(--color-highlight);
background-color: var(--color-background-highlight); background-color: var(--color-background-highlight);
} }
.toc-container-side { .toc-container-side {
--padding-indent-base: 24px;
--padding-level-indent: 24px;
width: 400px; width: 400px;
margin: 0 12px 0 12px; margin: 32px 12px 0 12px;
position: sticky; position: sticky;
top: 64px; top: 64px;
border-left: var(--border-style) var(--border-dash-size) var(--color-highlight);
}
.toc-container-side .toc-list a {
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
} }
.toc-list { .toc-list {