From 830815f1d84c991a93c90c709b211fe17ab15e0d Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sat, 14 Sep 2024 18:14:02 -0700
Subject: [PATCH] feat: Stylesheet improvement

---
 src/routes/+layout.svelte | 5 ++++-
 src/routes/+page.svelte   | 8 ++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index da4a2ad..c1ece00 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,7 +14,7 @@
 				{#if i > 0}
 					<Separator orientation="vertical" />
 				{/if}
-				<a class:active-link={item.route === $page.url.pathname} href={item.route}>{item.name}</a>
+				<a class="navbar-link" class:active-link={item.route === $page.url.pathname} href={item.route}>{item.name}</a>
 			{/each}
 		</div>
 	</div>
@@ -23,6 +23,9 @@
 <Footer />
 
 <style>
+	:global(.navbar-link) {
+		@apply text-lg;
+	}
 	:global(a) {
 		color: theme('colors.eucalyptus.400');
 		&:hover,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1384f1a..956590c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -40,17 +40,17 @@
 
 <div id="front">
 	<div id="floater">
-		<p class="floater-elem" style="color: #888">{metadata.frontDescription}</p>
+		<p class="text-lg floater-elem" style="color: #888">{metadata.frontDescription}</p>
 		<div
 			class="floater-elem"
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
 			<div class="flex h-5 items-center space-x-4 text-sm">
-				<a href="#bio">Bio</a>
+				<a class="navbar-link" href="#bio">Bio</a>
 				{#each routes as item}
 					{#if item.route !== "/"}
 						<Separator orientation="vertical" />
-						<a href={item.route}>{item.name}</a>
+						<a class="navbar-link" href={item.route}>{item.name}</a>
 					{/if}
 				{/each}
 			</div>
@@ -120,7 +120,7 @@
 			0px -5px 10px 10px rgba(200,200,200,0.4);
 	}
 	#bio {
-		max-width: 100vh;
+		max-width: max(50vw, 100vh);
 		margin-left: auto;
 		margin-right: auto;
 		padding-top: 20px;