adjust logo

public/logo-placeholder.svg

@@ -1,9 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="32" height="32" rx="6" fill="#2563eb"/>
-  <path d="M16 6L8 12V20L16 26L24 20V12L16 6Z" stroke="white" stroke-width="2" stroke-linejoin="round"/>
-  <circle cx="16" cy="16" r="3" fill="white"/>
-  <line x1="16" y1="6" x2="16" y2="13" stroke="white" stroke-width="1.5"/>
-  <line x1="16" y1="19" x2="16" y2="26" stroke="white" stroke-width="1.5"/>
-  <line x1="8" y1="12" x2="13" y2="14.5" stroke="white" stroke-width="1.5"/>
-  <line x1="19" y1="17.5" x2="24" y2="20" stroke="white" stroke-width="1.5"/>
-</svg>

src/components/Navigation.astro

@@ -7,10 +7,11 @@ const currentPath = Astro.url.pathname;
 <nav>
   <div class="container">
     <div class="nav-wrapper">
-      <div class="nav-brand">
+      <a href="/" class="nav-brand">
-        <img src="/fingerprint_scope_logo.svg" alt="CC24-Hub" class="nav-logo" />
+        <img src="/logo-dark.png" alt="CC24-Hub" class="nav-logo nav-logo-light" />
+        <img src="/logo-white.png" alt="CC24-Hub" class="nav-logo nav-logo-dark" />
         <span style="font-weight: 600; font-size: 1.125rem;">CC24-Hub</span>
-      </div>
+      </a>
       
       <ul class="nav-links">
         <li>
@@ -39,4 +40,35 @@ const currentPath = Astro.url.pathname;
       </ul>
     </div>
   </div>
-</nav>
+</nav>
+
+<style>
+  /* Logo theme switching */
+  .nav-logo-light {
+    display: block;
+  }
+  
+  .nav-logo-dark {
+    display: none;
+  }
+  
+  [data-theme="dark"] .nav-logo-light {
+    display: none;
+  }
+  
+  [data-theme="dark"] .nav-logo-dark {
+    display: block;
+  }
+  
+  /* Make brand clickable */
+  .nav-brand {
+    text-decoration: none;
+    color: inherit;
+    transition: var(--transition-fast);
+  }
+  
+  .nav-brand:hover {
+    text-decoration: none;
+    opacity: 0.8;
+  }
+</style>

src/styles/global.css

@@ -137,6 +137,15 @@ nav {
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
+  text-decoration: none !important;
+  color: var(--color-text) !important;
+  transition: var(--transition-fast);
+}
+
+.nav-brand:hover {
+  text-decoration: none !important;
+  opacity: 0.8;
+  transform: translateY(-1px);
 }
 
 .nav-logo {
@@ -144,6 +153,23 @@ nav {
   height: 32px;
 }
 
+/* Logo theme switching - global styles */
+.nav-logo-light {
+  display: block;
+}
+
+.nav-logo-dark {
+  display: none;
+}
+
+[data-theme="dark"] .nav-logo-light {
+  display: none;
+}
+
+[data-theme="dark"] .nav-logo-dark {
+  display: block;
+}
+
 .nav-links {
   display: flex;
   align-items: center;