mirror of
https://github.com/CodeF53/personal-site.git
synced 2024-09-19 22:00:35 +00:00
29 lines
768 B
SCSS
29 lines
768 B
SCSS
body { margin: 0 }
|
|
|
|
// by default keep page at the top of the screen
|
|
:root { --header-height: 0px }
|
|
// offset page giving room for header when it's present
|
|
:root:has(header + #page) { --header-height: 3rem }
|
|
|
|
#page {
|
|
position: fixed;
|
|
top: var(--header-height);
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
// fill vertically exactly to remaining screen size (since we
|
|
--root-size: calc(100svh - var(--header-height));
|
|
max-height: var(--root-size);
|
|
min-height: var(--root-size);
|
|
// center contents
|
|
display: flex;
|
|
flex-direction: column;
|
|
& > * { align-self: center; margin: auto; }
|
|
}
|
|
|
|
// only show scrollbar when needed & make header hide stuff under it
|
|
body { overflow-y: overlay; }
|
|
#page {
|
|
overflow: scroll;
|
|
overflow-x: hidden;
|
|
overflow-y: overlay;
|
|
}
|