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