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

feat: Enable wrapping of main navbar when its long

This commit is contained in:
Leni Aniva 2024-10-11 00:53:35 -07:00
parent 99ce735252
commit bc40990b52
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/routes/+page.svelte
View File

@ -48,12 +48,12 @@
class="floater-elem" class="floater-elem"
style="padding-bottom: {(1 - progress) * 50}vh" style="padding-bottom: {(1 - progress) * 50}vh"
> >
<div class="flex h-5 items-center space-x-4 text-sm"> <div id="navbar" class="h-5 items-center space-x-4 text-sm">
<a class="navbar-link" href="#bio">Bio</a> <a href="#bio">Bio</a>
{#each routes as item} {#each routes as item}
{#if item.route !== "/"} {#if item.route !== "/"}
<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" /> <Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
<a class="navbar-link" href={item.route} class:disabled-link={item.disabled}>{item.name}</a> <a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -98,8 +98,8 @@
background-position: center center; background-position: center center;
z-index: -10; z-index: -10;
position: fixed; position: fixed;
min-width: 100vw; min-width: 100%;
min-height: 100vh; min-height: 100%;
overscroll-behaviour: none; overscroll-behaviour: none;
} }
#front { #front {
@ -116,6 +116,10 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
#navbar {
display: flex;
flex-wrap: wrap;
}
.floater-elem { .floater-elem {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;