adjust logo

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">
-        <img src="/fingerprint_scope_logo.svg" alt="CC24-Hub" class="nav-logo" />
+      <a href="/" class="nav-brand">
+        <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;