SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 💄 change navigation to floating bar

Browse source 
Since clipping overflow on the main page content container would break its gradient box shadow, navigation needed a different approach to styling
This commit is contained in:
Sebin Nyshkim 2025-07-11 17:49:19 +02:00
parent 9f6ddc0e54
commit 3aa5634a73
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
1 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/navigation.webc
View file

@ -28,13 +28,16 @@
--nav-border: var(--border-thin) solid var(--clr-box-border);
position: sticky;
top: 0;
inset: 0.5em;
display: grid;
justify-items: end;
background-color: var(--nav-background-color);
margin-block: 0.5em 0;
margin-inline: 0.5em;
border-radius: inherit;
border-block-end: var(--nav-border);
z-index: 2;
@ -46,7 +49,7 @@
}
@media (min-width: 64em) {
--nav-spacing: 2em;
--nav-spacing: 1.5em;
}
}
@ -82,7 +85,7 @@
--nav-items-orientation: column nowrap;
position: var(--nav-items-position);
top: 3em;
top: 3.5em;
display: flex;
flex-flow: var(--nav-items-orientation);
@ -93,10 +96,9 @@
background-color: var(--clr-nav-background);
margin: 0;
border: var(--border-thin) solid var(--clr-nav-border);
border-block-start: none;
border-inline-end: none;
border-end-start-radius: 0.75em;
border-radius: inherit;
padding-inline: var(--nav-spacing);
z-index: 3;