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

mkdocs/site/docs/getting-started/index.html

@@ -19,14 +19,14 @@
         <link rel="prev" href="../">
       
       
-        <link rel="next" href="environment-variables/">
+        <link rel="next" href="installation/">
       
       
         
       
       
       <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">
     
     
       
@@ -60,8 +60,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>
@@ -179,43 +183,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;
@@ -227,76 +251,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>
 
@@ -614,6 +750,8 @@
         
       
         
+      
+        
       
         
       
@@ -689,6 +827,12 @@
       
         
           
+        
+      
+        
+      
+        
+      
         
       
         
@@ -755,6 +899,36 @@
   
   
   
+    <li class="md-nav__item">
+      <a href="installation/" class="md-nav__link">
+        
+  
+  
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z"/></svg>
+  
+  <span class="md-ellipsis">
+    
+  
+    Installation
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
+              
+                
+  
+  
+  
+  
     <li class="md-nav__item">
       <a href="environment-variables/" class="md-nav__link">
         
@@ -779,6 +953,66 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="first-steps/" class="md-nav__link">
+        
+  
+  
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.74 11.72c.47 1.23.42 2.51-.99 3.02-2.9 1.07-3.55-1.74-3.59-1.88zm-5.03-.81 4.32-1.07c-.19-1.05.1-2.1.1-3.34 0-1.68-1.33-4.97-3.45-4.44-2.42.6-2.77 3.29-2.68 4.59.12 1.3 1.64 4.08 1.71 4.26m12.14 8.94c-.03.15-.69 2.95-3.59 1.89-1.4-.52-1.46-1.8-.99-3.03zm2.15-6.2c.1-1.3-.24-4-2.67-4.6-2.11-.55-3.44 2.76-3.44 4.45 0 1.23.28 2.28.11 3.33l4.3 1.07c.08-.18 1.59-2.96 1.7-4.25"/></svg>
+  
+  <span class="md-ellipsis">
+    
+  
+    First Steps
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="features/" class="md-nav__link">
+        
+  
+  
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m18.09 11.77 1.47 6.33L14 14.74 8.44 18.1l1.46-6.33L5 7.5l6.47-.54L14 1l2.53 5.96L23 7.5zM2 12.43c.19 0 .38-.06.55-.17l3.2-2.11-1.57-1.36-2.73 1.8c-.461.3-.589.91-.29 1.41.2.27.52.43.84.43m-.84 9.12c.2.29.52.45.84.45.19 0 .38-.05.55-.16l4.11-2.71.34-1.37.31-1.45-5.86 3.85c-.461.31-.589.93-.29 1.39m.29-6.17a1 1 0 0 0-.29 1.38c.2.3.52.45.84.45.19 0 .38-.05.55-.16l5.42-3.55.27-1.19-.92-.81z"/></svg>
+  
+  <span class="md-ellipsis">
+    
+  
+    Features at a Glance
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       
@@ -800,62 +1034,24 @@
           
         
       
-    
-    
-    
-      
-      
-    
-    
-      
-        
         
       
-    
-    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
+        
       
         
-  
-  
-  
-    <a href="../features/" class="md-nav__link">
-      
-  
-  
-  <span class="md-ellipsis">
-    
-  
-    Feature Guides
-  
-
-    
-  </span>
-  
-  
-
-      
-        <span class="md-nav__icon md-icon"></span>
-      
-    </a>
-  
-
-      
-    </li>
-  
-
-              
-            
-              
-                
-  
-  
-  
-  
-    
-    
       
         
-          
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
         
       
     
@@ -883,7 +1079,7 @@
   <span class="md-ellipsis">
     
   
-    Administration
+    Admin Guide
   
 
     
@@ -916,6 +1112,88 @@
           
         
       
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+    
+    
+    
+      
+      
+    
+    
+      
+        
+        
+      
+    
+    <li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
+      
+        
+  
+  
+  
+    <a href="../user-guide/" class="md-nav__link">
+      
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    User Guide
+  
+
+    
+  </span>
+  
+  
+
+      
+        <span class="md-nav__icon md-icon"></span>
+      
+    </a>
+  
+
+      
+    </li>
+  
+
+              
+            
+              
+                
+  
+  
+  
+  
+    
+    
+      
+        
+          
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
     
     
     
@@ -1251,6 +1529,34 @@
 
               
             
+              
+                
+  
+  
+  
+  
+    <li class="md-nav__item">
+      <a href="../phil/" class="md-nav__link">
+        
+  
+  
+  <span class="md-ellipsis">
+    
+  
+    Philosophy
+  
+
+    
+  </span>
+  
+  
+
+      </a>
+    </li>
+  
+
+              
+            
           </ul>
         </nav>
       
@@ -1695,10 +2001,11 @@
 </span></code></pre></div>
 <h2 id="next-steps">Next Steps<a class="headerlink" href="#next-steps" title="Permanent link">&para;</a></h2>
 <ul>
-<li><a href="environment-variables/">Environment Variables</a> — complete <code>.env</code> reference with every configurable option</li>
-<li><a href="../features/">Feature Guides</a> — explore campaigns, map, and media</li>
+<li><a href="environment-variables/">Environment Variables</a> — complete <code>.env</code> reference</li>
+<li><a href="first-steps/">First Steps</a> — create your first campaign and add locations</li>
+<li><a href="features/">Features at a Glance</a> — visual overview of every module</li>
+<li><a href="../admin/">Admin Guide</a> — full administration reference</li>
 <li><a href="../deployment/">Deployment</a> — production setup with SSL and tunneling</li>
-<li><a href="../architecture/">Architecture</a> — understand the system design</li>
 </ul>
 
 
@@ -1757,13 +2064,13 @@
         
         
           
-          <a href="environment-variables/" class="md-footer__link md-footer__link--next" aria-label="Next: Environment Variables">
+          <a href="installation/" class="md-footer__link md-footer__link--next" aria-label="Next: Installation">
             <div class="md-footer__title">
               <span class="md-footer__direction">
                 Next
               </span>
               <div class="md-ellipsis">
-                Environment Variables
+                Installation
               </div>
             </div>
             <div class="md-footer__button md-icon">
@@ -1836,8 +2143,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>