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 { .toc-container-side {
--padding-indent-base: 24px; --padding-indent-base: 20px;
--padding-level-indent: 24px; --padding-level-indent: var(--padding-indent-base);
width: 400px; /* width: 300px; */
margin: 32px 12px 0 12px; margin-left: 12px;
margin-right: 12px;
position: sticky; position: sticky;
top: 64px; top: 64px;
border-left: var(--border-style) var(--border-dash-size) var(--color-highlight); 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 { .container {
width: var(--page-width); max-width: var(--page-width);
margin: 0 auto; margin: 0 auto;
padding: 0 24px; padding: 0 24px;
box-sizing: border-box; box-sizing: border-box;
} }
.content { .content {
display: flex; max-width: var(--page-width);
flex-direction: row; width: 100%;
display: grid;
grid-template-columns: auto minmax(300px, 24vw);
}
.content-sidebar-main-container {
width: 100%;
} }
.side { .side {
width: fit-content; width: 100%;
margin-top: 32px;
margin-bottom: 8px;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.content { .content {
padding: 0 8px; padding: 0 8px;
flex-direction: column; width: 100%;
grid-template-rows: auto auto;
grid-template-columns: 1fr;
} }
.side { .side {
min-width: 0; min-width: 0;
max-width: 100%;
margin-top: 8px;
width: 100%; width: 100%;
order: -1;
} }
} }
</style> </style>