From bf64ae1aad1b012da207db7ebae03572f135e4a8 Mon Sep 17 00:00:00 2001
From: Xyphyn <james@xylight.dev>
Date: Mon, 18 Sep 2023 18:41:38 -0700
Subject: [PATCH] feat: add fancy gradient

---
 src/lib/components/ui/Logo.svelte   | 35 ++++++++++++++++++++++++++---
 src/lib/components/ui/Navbar.svelte |  8 +++++--
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/ui/Logo.svelte b/src/lib/components/ui/Logo.svelte
index e666721b..f8d524e5 100644
--- a/src/lib/components/ui/Logo.svelte
+++ b/src/lib/components/ui/Logo.svelte
@@ -4,15 +4,44 @@
 
 <svg
   {width}
+  height={width}
   viewBox="0 0 100 100"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  aria-label="Home"
-  class="inline"
 >
+  <linearGradient
+    gradientTransform="rotate(315, 0.5, 0.5)"
+    x1="50%"
+    y1="0%"
+    x2="50%"
+    y2="100%"
+    id="gradient"
+  >
+    <stop stop-color="black" stop-opacity="1" offset="0%" />
+    <stop stop-color="black" stop-opacity="1" offset="100%" />
+  </linearGradient>
   <path
     id="hexagon"
     d="M45.5 10.8868C48.594 9.10042 52.406 9.10042 55.5 10.8868L82.3061 26.3632C85.4001 28.1496 87.3061 31.4508 87.3061 35.0235V65.9765C87.3061 69.5492 85.4001 72.8504 82.3061 74.6368L55.5 90.1132C52.406 91.8996 48.594 91.8996 45.5 90.1132L18.6939 74.6368C15.5999 72.8504 13.6939 69.5492 13.6939 65.9765V35.0235C13.6939 31.4508 15.5999 28.1496 18.6939 26.3632L45.5 10.8868Z"
-    class="fill-black dark:fill-white"
+    class="fill-[url(#gradient)]"
   />
 </svg>
+
+<style>
+  stop {
+    transition: stop-color 200ms;
+    stop-color: black;
+  }
+
+  :global(.dark) stop {
+    stop-color: white;
+  }
+
+  :global(.logo:hover) svg stop:first-child {
+    stop-color: #7f27c7;
+  }
+
+  :global(.logo:hover) svg stop:last-child {
+    stop-color: #f30386;
+  }
+</style>
diff --git a/src/lib/components/ui/Navbar.svelte b/src/lib/components/ui/Navbar.svelte
index 44caa6f9..574d65c2 100644
--- a/src/lib/components/ui/Navbar.svelte
+++ b/src/lib/components/ui/Navbar.svelte
@@ -47,7 +47,7 @@
   dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16"
 >
   <div class="flex flex-row gap-2 items-center mr-auto">
-    <a href="/" class="flex flex-row items-center gap-2">
+    <a href="/" class="flex flex-row items-center gap-2 logo group">
       {#if LINKED_INSTANCE_URL}
         {#if $site}
           <Avatar
@@ -82,7 +82,11 @@
         <Logo width={40} />
         <div class="flex flex-row items-center gap-2 max-[1000px]:hidden">
           <span class="opacity-30 text-xl">/</span>
-          <span class="text-sm font-bold">
+          <span
+            class="text-sm font-bold group-hover:bg-gradient-to-r
+            group-hover:text-transparent group-hover:bg-clip-text
+            group-hover:from-violet-500 group-hover:to-pink-600 transition-colors"
+          >
             {$instance}
           </span>
         </div>