Fix documentation logo display issue

.changeset/fix-docs-logo-display.md

@@ -0,0 +1,5 @@
+---
+"adcontextprotocol": patch
+---
+
+Fix documentation logo display and dark mode support. Updated favicon to use AdCP logo instead of old Docusaurus dinosaur icon. Improved dark mode navbar styling across documentation site.

docs.json

@@ -2,10 +2,10 @@
   "$schema": "https://mintlify.com/schema.json",
   "name": "AdCP - Ad Context Protocol",
   "logo": {
-    "light": "logo/light.svg",
-    "dark": "logo/dark.svg"
+    "light": "/logo/light.svg",
+    "dark": "/logo/dark.svg"
   },
-  "favicon": "static/img/favicon.ico",
+  "favicon": "/img/favicon.ico",
   "theme": "mint",
   "colors": {
     "primary": "#0D9373",
@@ -218,5 +218,6 @@
   "modeToggle": {
     "default": "light",
     "isHidden": false
-  }
+  },
+  "css": ["/mintlify.css"]
 }

mintlify.css

@@ -0,0 +1,20 @@
+/* Custom Mintlify styles */
+
+/* Logo sizing in sidebar - match the navbar style */
+.navbar__logo img,
+img[alt*="Logo"],
+img[src*="/logo/"] {
+  height: 32px !important;
+  width: auto !important;
+}
+
+/* Dark mode navbar support for Mintlify */
+[data-theme="dark"] nav[aria-label="Main"] {
+  background-color: #1b1b1d !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+[data-theme="dark"] .navbar__link,
+[data-theme="dark"] .navbar__title {
+  color: #fff !important;
+}

server/public/nav.js

@@ -49,7 +49,8 @@
         <div class="navbar__items">
           <a class="navbar__brand" href="${homeUrl}">
             <div class="navbar__logo">
-              <img src="/adcp_logo.svg" alt="AdCP Logo">
+              <img src="/logo/light.svg" alt="AdCP Logo" class="logo-light" style="display: block;">
+              <img src="/logo/dark.svg" alt="AdCP Logo" class="logo-dark" style="display: none;">
             </div>
             <b class="navbar__title">AdCP</b>
           </a>
@@ -110,11 +111,13 @@
       .navbar__logo {
         display: flex;
         align-items: center;
+        min-width: 50px;
+        min-height: 20px;
       }
 
       .navbar__logo img {
-        height: 32px;
-        width: 32px;
+        height: 20px;
+        width: auto;
         display: block;
       }
 
@@ -141,6 +144,58 @@
         color: #10b981;
         font-weight: 600;
       }
+
+      /* Logo switching for dark mode */
+      .logo-dark {
+        display: none;
+      }
+
+      /* Dark mode support */
+      @media (prefers-color-scheme: dark) {
+        .navbar {
+          background: #1b1b1d;
+          box-shadow: 0 1px 2px 0 rgba(255,255,255,.1);
+        }
+
+        .navbar__title,
+        .navbar__link {
+          color: #fff;
+        }
+
+        .navbar__link:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .logo-light {
+          display: none;
+        }
+
+        .logo-dark {
+          display: block;
+        }
+      }
+
+      [data-theme="dark"] .navbar {
+        background: #1b1b1d;
+        box-shadow: 0 1px 2px 0 rgba(255,255,255,.1);
+      }
+
+      [data-theme="dark"] .navbar__title,
+      [data-theme="dark"] .navbar__link {
+        color: #fff;
+      }
+
+      [data-theme="dark"] .navbar__link:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      [data-theme="dark"] .logo-light {
+        display: none;
+      }
+
+      [data-theme="dark"] .logo-dark {
+        display: block;
+      }
     </style>
   `;
 

server/public/shared-nav.html

@@ -4,7 +4,8 @@
     <div class="navbar__items" style="display: flex; align-items: center; gap: 1.5rem;">
       <a class="navbar__brand" href="/" style="display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit;">
         <div class="navbar__logo">
-          <img src="/adcp_logo.svg" alt="AdCP Logo" style="height: 32px; width: 32px;">
+          <img src="/logo/light.svg" alt="AdCP Logo" class="logo-light" style="height: 20px; width: auto;">
+          <img src="/logo/dark.svg" alt="AdCP Logo" class="logo-dark" style="height: 20px; width: auto; display: none;">
         </div>
         <b class="navbar__title" style="font-size: 1.25rem; font-weight: 700; color: var(--ifm-navbar-link-color, #000);">AdCP</b>
       </a>
@@ -27,6 +28,45 @@
     --ifm-navbar-shadow: 0 1px 2px 0 rgba(0,0,0,.1);
   }
 
+  /* Dark mode support */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --ifm-navbar-background-color: #1b1b1d;
+      --ifm-navbar-link-color: #fff;
+      --ifm-navbar-link-hover-color: #667eea;
+      --ifm-navbar-shadow: 0 1px 2px 0 rgba(255,255,255,.1);
+    }
+  }
+
+  [data-theme="dark"] {
+    --ifm-navbar-background-color: #1b1b1d;
+    --ifm-navbar-link-color: #fff;
+    --ifm-navbar-link-hover-color: #667eea;
+    --ifm-navbar-shadow: 0 1px 2px 0 rgba(255,255,255,.1);
+  }
+
+  /* Logo switching for dark mode */
+  .logo-dark {
+    display: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .logo-light {
+      display: none;
+    }
+    .logo-dark {
+      display: block;
+    }
+  }
+
+  [data-theme="dark"] .logo-light {
+    display: none;
+  }
+
+  [data-theme="dark"] .logo-dark {
+    display: block;
+  }
+
   .navbar__link:hover {
     background: rgba(102, 126, 234, 0.1);
     color: var(--ifm-navbar-link-hover-color);