src/lib/components/Nav.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import NavLink from "./NavLink.svelte";
-	import Search from "./Search.svelte";
-</script>
-
-<div
-	class="max-md:hidden flex gap-x-4 h-full items-center grow"
->
-	<Search />
-	<NavLink href="/docs/intro">Docs</NavLink>
-	<NavLink href="https://fleurixos.org" class="text-coral-600 font-semibold">Try {DISTRO}</NavLink>
-</div>

src/lib/components/NavLink.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	let props = $props()
-</script>
-
-<a
-	{...props}
-	class="{props.class ?? ""} no-link-style hover:underline"
->
-	{@render props.children?.()}
-</a>

src/lib/components/Search.svelte

@@ -1,8 +0,0 @@
-<div class="flex grow justify-end pl-4">
-	<input
-		type="text"
-		placeholder="Search..."
-		class="rounded-md bg-zinc-200 px-4 py-[6px] text-md/10 grow-0
-   			   focus:grow max-w-96 transition-all hover:ring-1 hover:ring-zinc-500 focus:outline-none focus:ring-2 focus:ring-coral-300 placeholder:text-zinc-600"
-	/>
-</div>

src/routes/+layout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { page } from "$app/stores";
 	import "../main.css";
-	import Footer from "$lib/components/Footer.svelte";
+	import Footer from "./Footer.svelte";
-	import Nav from "$lib/components/Nav.svelte";
+	import Nav from "./Nav.svelte";
 
 	let { children } = $props();
 	globalThis.PKGS = "petalpkgs";
@@ -17,11 +17,11 @@
     <meta name="theme-color" content="#136951">
 </svelte:head>
 
-<div class="flex flex-col underline-offset-[4px]">
+<div class="flex flex-col text-blue-950 underline-offset-[4px]">
-	<nav class="min-h-16 h-16 bg-zinc-50 mb-2">
+	<nav class="min-h-16 h-16 bg-teal-700 text-coral-50 mb-2">
 		<div class="mx-auto container flex h-full justify-between">
 			<a class="flex h-full items-center justify-center font-aladin text-3xl/10
-					  text-coral-970 transition-colors duration-75 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-500 hover:from-15% hover:to-coral-400 hover:text-transparent"
+					  text-coral-50 hover:text-coral-100 no-link-style gap-x-2"
 			   href="/">
 				<enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" />
 				floral.systems

src/routes/Nav.svelte

@@ -0,0 +1,17 @@
+{#snippet link(to, title)}
+	<a
+		href={to}
+		class="no-link-style
+    		   py-1 px-2 h-min bg-coral-100 rounded-md border-b-2 border-r-2 border-coral-200 text-blue-950 hover:bg-coral-200"
+		>{title}</a
+	>
+{/snippet}
+
+<div class="max-md:hidden text-lg flex gap-2 h-full items-center">
+	{@render link("/docs/intro", "intro")}
+	{@render link("/colors", "colors")}
+	<!--
+		{@render link("https://fleurixos.org", `Try ${DISTRO}`)}
+		{@render link("https://petalpkgs.org", `Use ${PKGS}`)}
+	-->
+</div>

tailwind.config.js

@@ -39,7 +39,6 @@ export default {
 				'800': '#a41110',
 				'900': '#881514',
 				'950': '#4a0505',
-                '970': '#1f0202',
 			},
 			teal: {
 				'50': '#eefbf5',