From 72b4fd25500b4dee3b79e844b83ceef177783556 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Tue, 15 Oct 2024 13:51:46 -0700
Subject: [PATCH] feat: Style name heading and nav-link

---
 src/app.css                           |  6 ++++++
 src/lib/components/ThemeSwitch.svelte |  2 +-
 src/routes/+page.svelte               | 15 +++++++++------
 src/routes/Navbar.svelte              |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index 80580bc..11d1545 100644
--- a/src/app.css
+++ b/src/app.css
@@ -37,6 +37,9 @@
     --ring: 20 14.3% 4.1%;
 
     --radius: 0.5rem;
+
+	 --name: theme('colors.java.800');
+	 --navlink: theme('colors.eucalyptus.400');
   }
 
   .dark {
@@ -68,6 +71,8 @@
     --destructive-foreground: 60 9.1% 97.8%;
 
     --ring: 24 5.7% 82.9%;
+	 --name: theme('colors.java.300');
+	 --navlink: theme('colors.eucalyptus.200');
   }
 }
 
@@ -107,6 +112,7 @@ a, button {
 	text-shadow: 0 0 5px;
 }
 .nav-link {
+	color: var(--navlink);
 	@apply text-lg;
 	font-weight: 500;
 	font-family: serif;
diff --git a/src/lib/components/ThemeSwitch.svelte b/src/lib/components/ThemeSwitch.svelte
index cd4f708..33288b7 100644
--- a/src/lib/components/ThemeSwitch.svelte
+++ b/src/lib/components/ThemeSwitch.svelte
@@ -19,7 +19,7 @@
 	}
 </script>
 
-<button on:click={toggleTheme} aria-label="Toggle Theme">
+<button class="nav-link" on:click={toggleTheme} aria-label="Toggle Theme">
 	{#if $theme === "tokiwa"}
 		<Sun />
 	{:else}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index db8f46d..419be02 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,15 +51,18 @@
 				 style="padding-bottom: {(1 - progress) * 50}vh"
 		>
 			<div id="navbar" class="h-5 items-center space-x-4 text-sm">
-				<a href="#bio">Bio</a>
+				<a class="nav-link" href="#bio">Bio</a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				{#each routes as item}
 					{#if item.route !== "/"}
-						<a href={item.route} class:disabled-link={item.disabled}>{item.name}</a>
+						<a
+							href={item.route}
+							class="nav-link"
+							class:disabled-link={item.disabled}>{item.name}</a>
 						<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 					{/if}
 				{/each}
-				<a class="icon" href="/rss.xml"><Rss /></a>
+				<a class="icon nav-link" href="/rss.xml"><Rss /></a>
 				<Separator class="bg-gray-500 dark:bg-gray-100" orientation="vertical" />
 				<ThemeSwitch />
 			</div>
@@ -136,7 +139,7 @@
 		@apply bg-background;
 		@apply dark:bg-gray-800;
 		box-shadow:
-			0px -5px 10px 10px rgba(200,200,200,0.4);
+			0px -5px 10px 10px var(--foreground);
 	}
 	#bio {
 		max-width: max(50vw, 100vh);
@@ -149,14 +152,14 @@
 		font-family: serif;
 		font-size: min(10vw, 60px);
 		display: inline-block;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#avatar {
 		line-height: 0;
 		display: inline-block;
 		margin: 5px;
 		margin-right: auto;
-		border: 4px solid theme('colors.eucalyptus.500');
+		border: 1px solid var(--name);
 		border-radius: 50%;
 		aspect-ratio: 1;
 		max-width: 20%;
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 157c7d4..82e28ea 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -29,7 +29,7 @@
 		font-family: serif;
 		font-size: 3rem;
 		font-weight: normal;
-		color: theme('colors.java.800');
+		color: var(--name);
 	}
 	#navbar {
 		display: flex;