src/lib/components/Nav.svelte

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,8 @@
+<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 "./Footer.svelte";
+	import Footer from "$lib/components/Footer.svelte";
-	import Nav from "./Nav.svelte";
+	import Nav from "$lib/components/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 text-blue-950 underline-offset-[4px]">
+<div class="flex flex-col underline-offset-[4px]">
-	<nav class="min-h-16 h-16 bg-teal-700 text-coral-50 mb-2">
+	<nav class="min-h-16 h-16 bg-zinc-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-50 hover:text-coral-100 no-link-style gap-x-2"
+					  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"
 			   href="/">
 				<enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" />
 				floral.systems

src/routes/Nav.svelte

@@ -1,17 +0,0 @@
-{#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,6 +39,7 @@ export default {
 				'800': '#a41110',
 				'900': '#881514',
 				'950': '#4a0505',
+                '970': '#1f0202',
 			},
 			teal: {
 				'50': '#eefbf5',