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

improved responsiveness of ContentSidebar and TableOfContents when resizing window

Browse Source
This commit is contained in:
denizk0461
2026-04-27 14:49:48 +02:00
parent 72347769c3
commit cf125809bd
2 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,11 +100,12 @@
}
.toc-container-side {
--padding-indent-base: 24px;
--padding-level-indent: 24px;
--padding-indent-base: 20px;
--padding-level-indent: var(--padding-indent-base);
width: 400px;
margin: 32px 12px 0 12px;
/* width: 300px; */
margin-left: 12px;
margin-right: 12px;
position: sticky;
top: 64px;
border-left: var(--border-style) var(--border-dash-size) var(--color-highlight);

23
src/lib/viewport/content-sidebar.svelte
View File

@@ -36,30 +36,43 @@
}
}
.container {
width: var(--page-width);
max-width: var(--page-width);
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
.content {
display: flex;
flex-direction: row;
max-width: var(--page-width);
width: 100%;
display: grid;
grid-template-columns: auto minmax(300px, 24vw);
}
.content-sidebar-main-container {
width: 100%;
}
.side {
width: fit-content;
width: 100%;
margin-top: 32px;
margin-bottom: 8px;
}
@media screen and (max-width: 800px) {
.content {
padding: 0 8px;
flex-direction: column;
width: 100%;
grid-template-rows: auto auto;
grid-template-columns: 1fr;
}
.side {
min-width: 0;
max-width: 100%;
margin-top: 8px;
width: 100%;
order: -1;
}
}
</style>