557d39332c
This PR adds the ability to collapse section in the docs sidebar (which are persistent until you close the tab), and some design facelift to the docs, which makes its design close to the site as well as polishing up many elements and interactions (like moving the search to a modal and making the table of content visible in smaller breakpoints). <img width="600" height="2270" alt="Screenshot 2025-11-28 at 5 26@2x" src="https://github.com/user-attachments/assets/3a8606c6-f74f-4bd2-84c8-d7a67ff97564" /> Release Notes: - N/A
68 lines
1.3 KiB
CSS
68 lines
1.3 KiB
CSS
.pagetoc {
|
|
box-sizing: border-box;
|
|
position: sticky;
|
|
top: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
width: 220px;
|
|
padding: 28px 0 120px 0;
|
|
max-height: calc(100svh - 50px);
|
|
overflow-x: hidden;
|
|
}
|
|
.pagetoc > :last-child {
|
|
margin-bottom: 16px;
|
|
}
|
|
.pagetoc a {
|
|
width: fit-content;
|
|
font-size: 1.4rem;
|
|
color: var(--fg) !important;
|
|
display: inline-block;
|
|
padding: 2px 0;
|
|
text-align: left;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--toc-link-underline);
|
|
}
|
|
.pagetoc a:hover {
|
|
text-decoration-color: var(--toc-link-underline-hover);
|
|
}
|
|
.pagetoc a.active {
|
|
background-color: var(--sidebar-active-bg);
|
|
color: var(--sidebar-active) !important;
|
|
text-decoration-color: hsl(219, 93%, 42%, 0.1);
|
|
}
|
|
.pagetoc a.active:hover {
|
|
text-decoration-color: hsl(219, 93%, 42%, 0.8);
|
|
}
|
|
.pagetoc .active {
|
|
background: var(--sidebar-bg);
|
|
color: var(--sidebar-fg);
|
|
}
|
|
.pagetoc .pagetoc-H1 {
|
|
display: none;
|
|
}
|
|
.pagetoc .pagetoc-H3 {
|
|
margin-left: 2ch;
|
|
}
|
|
.pagetoc .pagetoc-H4 {
|
|
margin-left: 4ch;
|
|
}
|
|
.pagetoc .pagetoc-H5 {
|
|
display: none;
|
|
}
|
|
.pagetoc .pagetoc-H6 {
|
|
display: none;
|
|
}
|
|
.toc-title {
|
|
margin: 0;
|
|
margin-bottom: 6px;
|
|
font-size: 1.4rem;
|
|
color: var(--full-contrast);
|
|
}
|
|
|
|
@media only screen and (max-width: 1020px) {
|
|
.toc-container {
|
|
display: none;
|
|
}
|
|
}
|