add colors and logo

src/components/Footer.astro

@@ -59,16 +59,15 @@ const socialLinks = [
         <div class="col-span-1 md:col-span-3">
           <a href="/" class="group inline-block">
             <div class="flex items-center">
-              <div
-                class="relative flex h-10 w-10 transform items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-zinc-800 to-zinc-600 shadow-lg transition-transform dark:from-zinc-200 dark:to-zinc-400"
-              >
-                <span
-                  class="theme-transition-all text-xl font-bold text-zinc-100 duration-300 dark:text-zinc-900"
-                >
-                  {global.initals}
-                </span>
-                <div class="absolute inset-0"></div>
+              <div class="mx-auto aspect-square overflow-hidden rounded-lg">
+                <img
+                  src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
+                  alt="logo"
+                  class="max-h-[40px] max-w-[40px] object-cover"
+                  loading="eager"
+                />
               </div>
+
               <span
                 class="theme-transition-color ml-3 text-xl font-bold text-zinc-900 dark:text-zinc-100"
               >
@@ -112,7 +111,7 @@ const socialLinks = [
         <!-- Quick links -->
         <div class="col-span-1 md:col-span-3">
           <h3
-            class="theme-transition-color relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:bg-zinc-300 after:content-[''] dark:text-zinc-100 dark:after:bg-zinc-700"
+            class="theme-transition-color after:bg-turquoise dark:after:bg-turquoise relative inline-block pb-2 text-sm font-semibold tracking-wider text-zinc-900 uppercase after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-8 after:content-[''] dark:text-zinc-100"
           >
             Navigation
           </h3>

src/components/Navigation.astro

@@ -25,7 +25,19 @@ const currentPath = pathname.slice(1);
 >
   <div class="mx-auto flex max-w-3xl items-center justify-between px-4">
     <!-- Logo -->
-    <a href="/" class="text-xl font-bold text-zinc-900 dark:text-white">{global.initals}</a>
+    <a
+      href="/"
+      class="from-midnight to-turquoise relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br text-xl shadow-lg transition-transform"
+    >
+      <div class="mx-auto aspect-square overflow-hidden rounded-lg">
+        <img
+          src=`${process.env.DIRECTUS_URL ?? "https://directus.alexlebens.dev"}/assets/${global.logo}`
+          alt="logo"
+          class="max-h-[40px] max-w-[40px] object-cover"
+          loading="eager"
+        />
+      </div>
+    </a>
 
     <!-- Desktop navigation -->
     <nav class="hidden items-center space-x-6 sm:flex">

src/components/ThemeToggle.astro

@@ -5,7 +5,7 @@
 <button
   id="theme-toggle"
   data-theme-toggle
-  class="group relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-zinc-100 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:hover:bg-zinc-800 dark:focus:ring-zinc-700"
+  class="group hover:bg-desert/50 dark:hover:bg-midnight/50 relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 focus:ring-2 focus:ring-zinc-300 focus:outline-hidden sm:p-2 dark:focus:ring-zinc-700"
   aria-label="Toggle dark mode"
 >
   <div class="relative z-10 flex h-5 w-5 items-center justify-center">