From 534b29b0bc6efedb927f6941e4720697525d3b58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Delgado?=
 <11708972+adriandelgado@users.noreply.github.com>
Date: Mon, 5 Aug 2024 20:59:38 -0500
Subject: [PATCH] Refactor Navbar again (#46)

* Refactor Navbar again

* Optimize SVGs
---
 src/lib/assets/images/logo.png          | Bin 2801 -> 0 bytes
 src/lib/assets/logos/gecko-code.svg     |  17 +++++++++++++++++
 src/lib/assets/logos/gecko.svg          |  15 +++++++++++++++
 src/lib/components/layout/Navbar.svelte |  10 +++++-----
 4 files changed, 37 insertions(+), 5 deletions(-)
 delete mode 100644 src/lib/assets/images/logo.png
 create mode 100644 src/lib/assets/logos/gecko-code.svg
 create mode 100644 src/lib/assets/logos/gecko.svg

diff --git a/src/lib/assets/images/logo.png b/src/lib/assets/images/logo.png
deleted file mode 100644
index f2d6d4f7ffc553427d8fe802278652bfded23306..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2801
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
D&rLBO

diff --git a/src/lib/assets/logos/gecko-code.svg b/src/lib/assets/logos/gecko-code.svg
new file mode 100644
index 0000000..d79a169
--- /dev/null
+++ b/src/lib/assets/logos/gecko-code.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="574" height="263">
+	<path fill="#f59e0b" d="m222 150.3 3.6 19 36.216 22.92L255 165.8l53.5-5.2 37.2-28.9 12.8-20.8.9 9.2 15.6 16.5-9.9-34.4-14.5-23.5z" />
+	<path fill="#dc2626" d="m350.6 78.7-31.2-39.3-12.45 63.603Z" />
+	<path fill="#f59e0b" d="M350.6 78.7 383.9 0 347 7.7l-27.6 31.7Z" />
+	<path fill="#c2410c" d="M371.711 125.17 390.5 133l-14.3-12.8 12.5-1-17-3.9 4.9-11.1-8.66 7.868zM350.6 78.7l66.8-42.6-1.8-15.2-15.4-2.7L383.9 0Z" />
+	<path fill="#713f12" d="M312.674 73.76 292.3 76.6l-20.9-13.2 11.9 22.9 26.767.78zm-60.984 60.01 18.71-24.37-15.7-5.5 4.7-13.5-20.9 22.3 10.4-.5-26.9 38.1z" />
+	<path fill="#dc2626" d="M249.61 100.846 240 82.2l-.7 19.3-13.9-3.6 13.1 14.8zm44.61-24.514 6.18-6.832L293 71l-3.5-17.5-2.8 12-10.5-14.6 4.58 18.424L292.3 76.6z" />
+	<path fill="#c2410c" d="m255 165.8 8.9 34.5-22.2 21.4-7.2 28.2 39.8-49.7 2.1-12.3z" />
+	<path fill="#713f12" d="m243.57 238.574 6.03 3.226 7.7 21.2 2.5-16 12.2 7.6-9-22.6 10.5-2.9-10.1-2.7 1.18-14.062z" />
+	<path fill="#dc2626" d="m222 150.3-23 19.1-6.1 21.4 32.7-21.5z" />
+	<path fill="#f59e0b" d="m222 150.3-54.8 20.9 19.6 40.8 12.2-42.6Z" />
+	<path fill="#c2410c" d="m167.2 171.2-18.5 52.5 38.1-11.7Z" />
+	<path fill="#713f12" d="M445.5 230 574 112.6v45.8zm-272.9 33h37.79-.09l17.6-32.1-20.8-25.7-10 3.1-4.2-17.5-6.1 21.2-38.1 11.7 30.2 18.9z" />
+	<path fill="#84cc16" d="M128.5 41 0 158.4v-45.8zm317 0L574 158.4v-45.8z" />
+	<path fill="#713f12" d="M128.5 230 0 112.6v45.8z" />
+	<path fill="#dc2626" d="m148.7 223.7 23.9 39.3 6.3-20.4z" />
+</svg>
diff --git a/src/lib/assets/logos/gecko.svg b/src/lib/assets/logos/gecko.svg
new file mode 100644
index 0000000..6bfff70
--- /dev/null
+++ b/src/lib/assets/logos/gecko.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="268.7" height="263">
+	<path fill="#f59e0b" d="m73.3 150.3 3.6 19 36.216 22.92-6.816-26.42 53.5-5.2 37.2-28.9 12.8-20.8.9 9.2 15.6 16.5-9.9-34.4-14.5-23.5z" />
+	<path fill="#dc2626" d="m201.9 78.7-31.2-39.3-12.45 63.603Z" />
+	<path fill="#f59e0b" d="M201.9 78.7 235.2 0l-36.9 7.7-27.6 31.7Z" />
+	<path fill="#c2410c" d="M223.011 125.17 241.8 133l-14.3-12.8 12.5-1-17-3.9 4.9-11.1-8.66 7.868zM201.9 78.7l66.8-42.6-1.8-15.2-15.4-2.7L235.2 0Z" />
+	<path fill="#713f12" d="M163.974 73.76 143.6 76.6l-20.9-13.2 11.9 22.9 26.767.78zm-60.984 60.01 18.71-24.37-15.7-5.5 4.7-13.5-20.9 22.3 10.4-.5-26.9 38.1z" />
+	<path fill="#dc2626" d="M100.91 100.846 91.3 82.2l-.7 19.3-13.9-3.6 13.1 14.8Zm44.61-24.514 6.18-6.832-7.4 1.5-3.5-17.5-2.8 12-10.5-14.6 4.58 18.424L143.6 76.6Z" />
+	<path fill="#c2410c" d="m106.3 165.8 8.9 34.5L93 221.7l-7.2 28.2 39.8-49.7 2.1-12.3z" />
+	<path fill="#713f12" d="m94.87 238.574 6.03 3.226 7.7 21.2 2.5-16 12.2 7.6-9-22.6 10.5-2.9-10.1-2.7 1.18-14.062z" />
+	<path fill="#dc2626" d="m73.3 150.3-23 19.1-6.1 21.4 32.7-21.5z" />
+	<path fill="#f59e0b" d="m73.3 150.3-54.8 20.9L38.1 212l12.2-42.6Z" />
+	<path fill="#c2410c" d="M18.5 171.2 0 223.7 38.1 212Z" />
+	<path fill="#713f12" d="M23.9 263h37.79-.09l17.6-32.1-20.8-25.7-10 3.1-4.2-17.5-6.1 21.2L0 223.7l30.2 18.9Z" />
+	<path fill="#dc2626" d="M0 223.7 23.9 263l6.3-20.4Z" />
+</svg>
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 83d28eb..1474b48 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/stores";
-	import logo from "$lib/assets/images/logo.png";
+	import gecko_code from "$lib/assets/logos/gecko-code.svg";
 
 	const current_path = $derived($page.url.pathname);
 
@@ -14,20 +14,20 @@
 </script>
 
 <nav class="flex items-center justify-between p-4">
-	<img src={logo} alt="Logo de Kokoa" width="40" height="40" />
+	<img src={gecko_code} alt="Logo de Kokoa" width="52.9" height="24.4" />
 	<div class="flex gap-x-8 text-lg">
 		{#each LINKS as { href, text } (href)}
-			<a {href} class="relative font-bold hover:underline">
+			<a {href} class="relative font-fira hover:underline">
 				<span
 					aria-hidden="true"
-					class="absolute -left-2 text-green-400 {current_path !== href ? 'hidden' : ''}"
+					class="absolute -left-3 text-lime-500 {current_path !== href ? 'hidden' : ''}"
 				>
 					{"{"}
 				</span>
 				{text}
 				<span
 					aria-hidden="true"
-					class="absolute -right-2 text-green-400 {current_path !== href ? 'hidden' : ''}"
+					class="absolute -right-3 text-lime-500 {current_path !== href ? 'hidden' : ''}"
 				>
 					{"}"}
 				</span>