aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

feat: Sticky navbar

This commit is contained in:
Leni Aniva 2024-10-26 18:16:20 -07:00
parent 78a414c747
commit 482f7e59a7
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/+layout.svelte
View File

@ -11,7 +11,7 @@
<!-- Homepage has its own navbar with animations --> <!-- Homepage has its own navbar with animations -->
{#if $page.url.pathname != "/"} {#if $page.url.pathname != "/"}
<div id="layout"> <div id="layout">
<div id="navbar"> <div id="nav">
<Navbar /> <Navbar />
<slot name="header" /> <slot name="header" />
</div> </div>
@ -58,7 +58,7 @@
width: min(100vw, max(50vw, 100vh)); width: min(100vw, max(50vw, 100vh));
grid-area: content; grid-area: content;
} }
#navbar { #nav {
align-self: right; align-self: right;
padding-left: 10px; padding-left: 10px;
grid-area: nav; grid-area: nav;

3
src/routes/Navbar.svelte
View File

@ -35,7 +35,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
justify-content: between; position: sticky;
top: 0;
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#navbar { #navbar {