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