skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Scope sidebar min-height fix to desktop only

Browse Source 
The min-height: calc(100vh - var(--site-header-height)) added earlier
so the sticky sidebar's border-right divider reaches the bottom of
the viewport on desktop was applying on mobile too. On mobile the
sidebar is static (not sticky) and collapses behind a toggle, so the
min-height reserved a full viewport of empty space above the main
content whenever the menu was collapsed. The result: opening
/anti-patterns on mobile showed just the 'Sections' dropdown in the
first screen, then a blank viewport, then the rules below the fold.

Wrap the min-height rule in a min-width: 921px media query so it only
applies on desktop, matching the breakpoint that switches the layout
to the two-column grid.
This commit is contained in:
Paul Bakaus
2026-04-08 13:31:23 -07:00
parent 2a38fad925
commit 1bd08ebad9
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/sub-pages.css
+10 -3
View File
@@ -340,9 +340,6 @@ main#main {
position: sticky;
top: var(--site-header-height);
align-self: start;
/* Always full viewport height below the site header so the divider
line extends to the bottom of the viewport even on short pages. */
min-height: calc(100vh - var(--site-header-height));
max-height: calc(100vh - var(--site-header-height));
overflow-y: auto;
padding: var(--spacing-lg) 0 var(--spacing-2xl);
@@ -351,6 +348,16 @@ main#main {
scrollbar-color: var(--color-mist) transparent;
}
/* Desktop only: reserve full viewport height so the border-right
divider reaches the bottom of the viewport even on short pages.
On mobile this rule would leave a viewport-sized empty block
above the main content when the menu is collapsed. */
@media (min-width: 921px) {
.skills-sidebar {
min-height: calc(100vh - var(--site-header-height));
}
}
.skills-sidebar::-webkit-scrollbar {
width: 6px;
}