From 86eecefea4825ca83ffcb017d91f45a5a0ef7763 Mon Sep 17 00:00:00 2001
From: Jake Hamilton <jake.hamilton@hey.com>
Date: Thu, 24 Oct 2024 14:19:28 -0700
Subject: [PATCH 1/6] refactor(header): extract nav link component, add search
 widget stub, recolor header

refactor(search): darken colors
---
 src/lib/components/Nav.svelte     | 12 ++++++++++++
 src/lib/components/NavLink.svelte | 10 ++++++++++
 src/lib/components/Search.svelte  |  7 +++++++
 src/routes/+layout.svelte         |  8 ++++----
 src/routes/Nav.svelte             | 17 -----------------
 5 files changed, 33 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/components/Nav.svelte
 create mode 100644 src/lib/components/NavLink.svelte
 create mode 100644 src/lib/components/Search.svelte
 delete mode 100644 src/routes/Nav.svelte

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
new file mode 100644
index 0000000..35599d5
--- /dev/null
+++ b/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">Try {DISTRO}</NavLink>
+</div>
diff --git a/src/lib/components/NavLink.svelte b/src/lib/components/NavLink.svelte
new file mode 100644
index 0000000..2886a68
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
new file mode 100644
index 0000000..a9627d5
--- /dev/null
+++ b/src/lib/components/Search.svelte
@@ -0,0 +1,7 @@
+<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 transition-all hover:ring-1 hover:ring-zinc-500 focus:outline-none focus:ring-2 focus:ring-coral-300 placeholder:text-zinc-600"
+	/>
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7cadc62..b753a9a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import { page } from "$app/stores";
 	import "../main.css";
 	import Footer from "./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]">
-	<nav class="min-h-16 h-16 bg-teal-700 text-coral-50 mb-2">
+<div class="flex flex-col underline-offset-[4px]">
+	<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-zinc-800 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-400 hover:from-10% hover:to-coral-300 hover:text-transparent"
 			   href="/">
 				<enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" />
 				floral.systems
diff --git a/src/routes/Nav.svelte b/src/routes/Nav.svelte
deleted file mode 100644
index 05c5364..0000000
--- a/src/routes/Nav.svelte
+++ /dev/null
@@ -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>
-- 
2.44.1


From 1eddddd7d13a7c0644bf1c0b382850966c3ee2ac Mon Sep 17 00:00:00 2001
From: ckie <git-525ff67@ckie.dev>
Date: Fri, 25 Oct 2024 00:57:54 +0300
Subject: [PATCH 2/6] fix(Nav): make special link semibold

---
 src/lib/components/Nav.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index 35599d5..294d7e6 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -8,5 +8,5 @@
 >
 	<Search />
 	<NavLink href="/docs/intro">Docs</NavLink>
-	<NavLink href="https://fleurixos.org" class="text-coral-600">Try {DISTRO}</NavLink>
+	<NavLink href="https://fleurixos.org" class="text-coral-600 font-semibold">Try {DISTRO}</NavLink>
 </div>
-- 
2.44.1


From 4b250361692cf2df52597262884081da99fa3086 Mon Sep 17 00:00:00 2001
From: ckie <git-525ff67@ckie.dev>
Date: Fri, 25 Oct 2024 01:06:27 +0300
Subject: [PATCH 3/6] refactor(Search): constrain max width

---
 src/lib/components/Search.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index a9627d5..c248f99 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -2,6 +2,7 @@
 	<input
 		type="text"
 		placeholder="Search..."
-		class="rounded-md bg-zinc-200 px-4 py-[6px] text-md/10 grow-0 focus:grow transition-all hover:ring-1 hover:ring-zinc-500 focus:outline-none focus:ring-2 focus:ring-coral-300 placeholder:text-zinc-600"
+		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>
-- 
2.44.1


From 285237cf7adec48abd3971f70bcf2c46b39343af Mon Sep 17 00:00:00 2001
From: ckie <git-525ff67@ckie.dev>
Date: Fri, 25 Oct 2024 01:10:48 +0300
Subject: [PATCH 4/6] fix(layout): use same color-set for unhovered state

---
 src/routes/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b753a9a..aa54ddf 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
 	<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-zinc-800 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-400 hover:from-10% hover:to-coral-300 hover:text-transparent"
+					  text-coral-950 transition-colors duration-75 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-400 hover:from-10% hover:to-coral-300 hover:text-transparent"
 			   href="/">
 				<enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" />
 				floral.systems
-- 
2.44.1


From 7619e48d75402a9aab45ee0dcb10c0deaaa46c74 Mon Sep 17 00:00:00 2001
From: ckie <git-525ff67@ckie.dev>
Date: Fri, 25 Oct 2024 01:29:18 +0300
Subject: [PATCH 5/6] refactor(layout): adjust title text colors, introduce new
 colors.coral.970

---
 src/routes/+layout.svelte | 2 +-
 tailwind.config.js        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index aa54ddf..82673a4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -21,7 +21,7 @@
 	<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-950 transition-colors duration-75 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-400 hover:from-10% hover:to-coral-300 hover:text-transparent"
+					  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
diff --git a/tailwind.config.js b/tailwind.config.js
index 8f2ca9b..824c194 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,6 +39,7 @@ export default {
 				'800': '#a41110',
 				'900': '#881514',
 				'950': '#4a0505',
+                '970': '#1f0202',
 			},
 			teal: {
 				'50': '#eefbf5',
-- 
2.44.1


From d3ba4573c98dd1d582a2adf957985752de19fa7e Mon Sep 17 00:00:00 2001
From: ckie <git-525ff67@ckie.dev>
Date: Fri, 25 Oct 2024 01:30:09 +0300
Subject: [PATCH 6/6] chore(Footer): move to $lib/components

---
 src/{routes => lib/components}/Footer.svelte | 0
 src/routes/+layout.svelte                    | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{routes => lib/components}/Footer.svelte (100%)

diff --git a/src/routes/Footer.svelte b/src/lib/components/Footer.svelte
similarity index 100%
rename from src/routes/Footer.svelte
rename to src/lib/components/Footer.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 82673a4..f78f3ef 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <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 "$lib/components/Nav.svelte";
 
 	let { children } = $props();
-- 
2.44.1