Okay Wish I could say I know exactly. Will do better next time promise lol

mkdocs/site/blog/index.html

@@ -16,7 +16,7 @@
         <link rel="canonical" href="https://bnkserve.org/blog/">
       
       
-        <link rel="prev" href="../docs/troubleshooting/">
+        <link rel="prev" href="../docs/phil/">
       
       
       
@@ -24,7 +24,7 @@
       
       
       <link rel="icon" href="../assets/favicon.png">
-      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.1">
+      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.2">
     
     
       
@@ -58,8 +58,12 @@
     
       <link rel="stylesheet" href="../stylesheets/home.css">
     
+      <link rel="stylesheet" href="../stylesheets/docs-comments.css">
+    
       <link rel="stylesheet" href="../assets/css/video-player.css">
     
+      <link rel="stylesheet" href="../assets/css/image-gallery.css">
+    
       <link rel="stylesheet" href="../assets/css/payment-widgets.css">
     
     <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
@@ -177,43 +181,63 @@
               </button>
             
             
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
 <nav class="cm-header-nav" role="navigation" aria-label="Application">
-  <div class="cm-header-nav__inner">
-    <a href="#" data-path="/campaigns" class="cm-header-nav__link">
-      <span class="material-icons">campaign</span>
-      <span class="cm-header-nav__label">Campaigns</span>
-    </a>
-    <a href="#" data-path="/map" class="cm-header-nav__link">
-      <span class="material-icons">map</span>
-      <span class="cm-header-nav__label">Map</span>
-    </a>
-    <a href="#" data-path="/shifts" class="cm-header-nav__link">
-      <span class="material-icons">groups</span>
-      <span class="cm-header-nav__label">Volunteer</span>
-    </a>
-    <a href="#" data-path="/gallery" class="cm-header-nav__link">
-      <span class="material-icons">play_circle</span>
-      <span class="cm-header-nav__label">Gallery</span>
-    </a>
-    <a href="#" data-path="/responses" class="cm-header-nav__link">
-      <span class="material-icons">forum</span>
-      <span class="cm-header-nav__label">Responses</span>
-    </a>
-    <a href="#" data-path="/donate" class="cm-header-nav__link">
-      <span class="material-icons">favorite</span>
-      <span class="cm-header-nav__label">Donate</span>
-    </a>
-    <a href="#" data-path="/login" class="cm-header-nav__link">
-      <span class="material-icons">login</span>
-      <span class="cm-header-nav__label">Sign In</span>
+  <div class="cm-header-nav__brand">
+    <a href="#" data-path="/home" class="cm-header-nav__brand-link">
+      <span class="cm-header-nav__brand-text">Changemaker Lite</span>
     </a>
   </div>
+  <div class="cm-header-nav__links">
+    <div class="cm-header-nav__links-inner">
+      <a href="#" data-path="/" class="cm-header-nav__link" data-nav-id="home" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">home</span><span class="cm-header-nav__label">Home</span></a>
+      <a href="#" data-path="/campaigns" class="cm-header-nav__link" data-nav-id="campaigns"><span class="material-icons-outlined">send</span><span class="cm-header-nav__label">Campaigns</span></a>
+      <a href="#" data-path="/map" class="cm-header-nav__link" data-nav-id="map"><span class="material-icons-outlined">place</span><span class="cm-header-nav__label">Map</span></a>
+      <a href="#" data-path="/shifts" class="cm-header-nav__link" data-nav-id="shifts"><span class="material-icons-outlined">event</span><span class="cm-header-nav__label">Shifts</span></a>
+      <a href="#" data-path="/events" class="cm-header-nav__link" data-nav-id="events" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">event</span><span class="cm-header-nav__label">Events</span></a>
+      <a href="#" data-path="/gallery" class="cm-header-nav__link" data-nav-id="gallery"><span class="material-icons-outlined">play_circle</span><span class="cm-header-nav__label">Gallery</span></a>
+      <a href="#" data-path="/pricing" class="cm-header-nav__link" data-nav-id="pricing"><span class="material-icons-outlined">attach_money</span><span class="cm-header-nav__label">Pricing</span></a>
+      <a href="#" data-path="/shop" class="cm-header-nav__link" data-nav-id="shop"><span class="material-icons-outlined">shopping_bag</span><span class="cm-header-nav__label">Shop</span></a>
+      <a href="#" data-path="/donate" class="cm-header-nav__link" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span class="cm-header-nav__label">Donate</span></a>
+      <a href="/" class="cm-header-nav__link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span class="cm-header-nav__label">Website</span></a>
+      <a href="/docs/" class="cm-header-nav__link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span class="cm-header-nav__label">Docs</span></a>
+      <a href="#" data-path="/app" class="cm-header-nav__link">
+        <span class="material-icons-outlined">dashboard</span>
+        <span class="cm-header-nav__label">Admin</span>
+      </a>
+    </div>
+    <button class="cm-header-nav__hamburger" aria-label="Open navigation menu">
+      <span class="material-icons-outlined">menu</span>
+    </button>
+  </div>
 </nav>
+<div class="cm-header-nav__mobile-drawer" id="cm-mobile-drawer">
+  <div class="cm-header-nav__mobile-header">
+    <span class="cm-header-nav__brand-text">Changemaker Lite</span>
+    <button class="cm-header-nav__mobile-close" aria-label="Close navigation menu">
+      <span class="material-icons-outlined">close</span>
+    </button>
+  </div>
+  <div class="cm-header-nav__mobile-links">
+    <a href="#" data-path="/" class="cm-header-nav__mobile-link" data-nav-id="home" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">home</span><span>Home</span></a>
+    <a href="#" data-path="/campaigns" class="cm-header-nav__mobile-link" data-nav-id="campaigns"><span class="material-icons-outlined">send</span><span>Campaigns</span></a>
+    <a href="#" data-path="/map" class="cm-header-nav__mobile-link" data-nav-id="map"><span class="material-icons-outlined">place</span><span>Map</span></a>
+    <a href="#" data-path="/shifts" class="cm-header-nav__mobile-link" data-nav-id="shifts"><span class="material-icons-outlined">event</span><span>Shifts</span></a>
+    <a href="#" data-path="/events" class="cm-header-nav__mobile-link" data-nav-id="events" target="_blank" rel="noopener noreferrer"><span class="material-icons-outlined">event</span><span>Events</span></a>
+    <a href="#" data-path="/gallery" class="cm-header-nav__mobile-link" data-nav-id="gallery"><span class="material-icons-outlined">play_circle</span><span>Gallery</span></a>
+    <a href="#" data-path="/pricing" class="cm-header-nav__mobile-link" data-nav-id="pricing"><span class="material-icons-outlined">attach_money</span><span>Pricing</span></a>
+    <a href="#" data-path="/shop" class="cm-header-nav__mobile-link" data-nav-id="shop"><span class="material-icons-outlined">shopping_bag</span><span>Shop</span></a>
+    <a href="#" data-path="/donate" class="cm-header-nav__mobile-link" data-nav-id="donate"><span class="material-icons-outlined">favorite_border</span><span>Donate</span></a>
+    <a href="/" class="cm-header-nav__mobile-link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span>Website</span></a>
+    <a href="/docs/" class="cm-header-nav__mobile-link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span>Docs</span></a>
+    <a href="#" data-path="/app" class="cm-header-nav__mobile-link">
+      <span class="material-icons-outlined">dashboard</span>
+      <span>Admin</span>
+    </a>
+  </div>
+</div>
+<div class="cm-header-nav__mobile-overlay" id="cm-mobile-overlay"></div>
 <script>
-// Resolve nav link hrefs based on the current browser hostname.
-// localhost → http://localhost:{ADMIN_PORT}
-// subdomain.example.org → {proto}://app.example.org
 (function() {
   var h = location.hostname;
   var base;
@@ -225,76 +249,188 @@
     else { parts.unshift('app'); }
     base = location.protocol + '//' + parts.join('.');
   }
-  var links = document.querySelectorAll('.cm-header-nav__link[data-path]');
+  var links = document.querySelectorAll('[data-path]');
   for (var i = 0; i < links.length; i++) {
     links[i].setAttribute('href', base + links[i].getAttribute('data-path'));
   }
+  // Highlight active nav link based on current path
+  var path = location.pathname;
+  var activeLink = null;
+  if (path.indexOf('/docs') === 0) activeLink = 'docs';
+  document.querySelectorAll('.cm-header-nav__link[data-nav-id], .cm-header-nav__mobile-link[data-nav-id]').forEach(function(el) {
+    if (el.getAttribute('data-nav-id') === activeLink) {
+      el.classList.add('cm-header-nav__link--active');
+    }
+  });
+  // Hamburger toggle
+  var hamburger = document.querySelector('.cm-header-nav__hamburger');
+  var drawer = document.getElementById('cm-mobile-drawer');
+  var overlay = document.getElementById('cm-mobile-overlay');
+  var closeBtn = document.querySelector('.cm-header-nav__mobile-close');
+  function openDrawer() { drawer.classList.add('open'); overlay.classList.add('open'); }
+  function closeDrawer() { drawer.classList.remove('open'); overlay.classList.remove('open'); }
+  if (hamburger) hamburger.addEventListener('click', openDrawer);
+  if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
+  if (overlay) overlay.addEventListener('click', closeDrawer);
 })();
 </script>
 <style>
-/* Override MkDocs Material announce bar container */
 .md-banner {
-  background: #6f42c1 !important;
+  background: linear-gradient(135deg, #005a9c 0%, #007acc 100%) !important;
   color: #ffffff !important;
+  padding: 0 !important;
 }
-/* Hide the dismiss (X) button that Material adds for announce.dismiss */
 .md-banner__button {
   display: none !important;
 }
 .cm-header-nav {
-  background: #6f42c1;
-  min-height: 40px;
+  background: linear-gradient(135deg, #005a9c 0%, #007acc 100%);
+  height: 56px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   padding: 0 24px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   z-index: 10;
+  box-sizing: border-box;
 }
-.cm-header-nav__inner {
+.cm-header-nav a {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+.cm-header-nav__brand-link {
   display: flex;
   align-items: center;
-  gap: 6px;
-  max-width: 1400px;
-  width: 100%;
-  justify-content: center;
-  flex-wrap: nowrap;
-  overflow-x: auto;
+  gap: 10px;
+  text-decoration: none !important;
+  color: #fff !important;
+}
+.cm-header-nav__brand-text {
+  font-size: 18px;
+  font-weight: 600;
+  color: #fff !important;
+}
+.cm-header-nav__links {
+  display: flex;
+  align-items: center;
+}
+.cm-header-nav__links-inner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 .cm-header-nav__link {
+  color: rgba(255, 255, 255, 0.85) !important;
+  text-decoration: none !important;
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 16px;
-  color: #ffffff;
-  text-decoration: none;
-  font-size: 0.8rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.12);
-  transition: background 0.15s, transform 0.1s;
+  font-size: 14px;
+  transition: color 0.2s, border-color 0.2s;
   white-space: nowrap;
-  line-height: 1;
+  padding-bottom: 2px;
+  border-bottom: 2px solid transparent;
 }
 .cm-header-nav__link:hover {
-  background: rgba(255,255,255,0.15);
-  color: #ffffff;
-  text-decoration: none;
-  transform: translateY(-1px);
+  color: #fff !important;
+  text-decoration: none !important;
 }
-.cm-header-nav__link:active {
-  transform: translateY(0);
+.cm-header-nav__link--active,
+.cm-header-nav__link--active:hover {
+  color: #fff !important;
+  font-weight: 600;
+  border-bottom-color: #fff;
 }
-.cm-header-nav__link .material-icons {
+.cm-header-nav__link .material-icons-outlined {
   font-size: 16px;
-  opacity: 0.9;
+}
+.cm-header-nav__hamburger {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  color: #fff;
+}
+.cm-header-nav__hamburger .material-icons-outlined {
+  font-size: 24px;
+}
+/* Mobile drawer */
+.cm-header-nav__mobile-drawer {
+  position: fixed;
+  top: 0;
+  right: -280px;
+  width: 280px;
+  height: 100vh;
+  background: #0d1b2a;
+  z-index: 10001;
+  transition: right 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+.cm-header-nav__mobile-drawer.open {
+  right: 0;
+}
+.cm-header-nav__mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  background: #1b2838;
+}
+.cm-header-nav__mobile-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: rgba(255,255,255,0.85);
+  padding: 4px;
+}
+.cm-header-nav__mobile-links {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px 0;
+}
+.cm-header-nav__mobile-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 24px;
+  color: rgba(255,255,255,0.85) !important;
+  text-decoration: none !important;
+  font-size: 15px;
+  border-radius: 4px;
+}
+.cm-header-nav__mobile-link:hover {
+  background: rgba(255,255,255,0.1);
+  color: #fff !important;
+  text-decoration: none !important;
+}
+.cm-header-nav__mobile-link--active {
+  color: #fff !important;
+  font-weight: 600;
+  background: rgba(255,255,255,0.1);
+}
+.cm-header-nav__mobile-link .material-icons-outlined {
+  font-size: 18px;
+}
+.cm-header-nav__mobile-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 10000;
+}
+.cm-header-nav__mobile-overlay.open {
+  display: block;
 }
 @media (max-width: 768px) {
-  .cm-header-nav { padding: 0 8px; }
-  .cm-header-nav__label { display: none; }
-  .cm-header-nav__link { padding: 8px 10px; }
-  .cm-header-nav__inner { gap: 4px; }
+  .cm-header-nav { padding: 0 16px; }
+  .cm-header-nav__links-inner { display: none; }
+  .cm-header-nav__hamburger { display: block; }
 }
 </style>
 
@@ -610,6 +746,8 @@
         
       
         
+      
+        
       
         
       
@@ -824,7 +962,7 @@
       <nav class="md-footer__inner md-grid" aria-label="Footer" >
         
           
-          <a href="../docs/troubleshooting/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Troubleshooting">
+          <a href="../docs/phil/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Philosophy">
             <div class="md-footer__button md-icon">
               
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
@@ -834,7 +972,7 @@
                 Previous
               </span>
               <div class="md-ellipsis">
-                Troubleshooting
+                Philosophy
               </div>
             </div>
           </a>
@@ -904,8 +1042,16 @@
       
         <script src="../assets/js/video-player.js"></script>
       
+        <script src="../assets/js/image-gallery.js"></script>
+      
+        <script src="../assets/js/gancio-events.js"></script>
+      
         <script src="../assets/js/payment-widgets.js"></script>
       
+        <script src="../javascripts/ad-widgets.js"></script>
+      
+        <script src="../javascripts/docs-comments.js"></script>
+      
     
   </body>
 </html>