feat: add fancy gradient

Xyphyn · Sep 19, 2023 · bf64ae1 · bf64ae1
1 parent 0bdfa46
commit bf64ae1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git 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
@@ -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>