From bc40990b52bcbaaa1cb612960bfefe166a1c3e40 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 11 Oct 2024 00:53:35 -0700
Subject: [PATCH] feat: Enable wrapping of main navbar when its long

---
 src/routes/+page.svelte | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f8c035e..340d511 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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;