test

mkdocs/site/overrides/home.cm.html

@@ -0,0 +1,211 @@
+{% extends "main.html" %}
+
+{% block content %}
+
+<div style="position: relative; padding-top: 56.25%;">
+  <iframe
+    src="https://customer-1ebw5tv06sxrrq32.cloudflarestream.com/e98f453daee6e89c3a1632465806d0d5/iframe?muted=true&preload=true&loop=true&autoplay=true&poster=https%3A%2F%2Fcustomer-1ebw5tv06sxrrq32.cloudflarestream.com%2Fe98f453daee6e89c3a1632465806d0d5%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
+    loading="lazy"
+    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
+    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+    allowfullscreen="true"
+  ></iframe>
+</div>
+
+<div class="hero-section">
+  <h1>Welcome to Changemaker V5 </h1>
+  <p class="description">A self-hosted, open-source platform for digital campaigns.</p>
+  <p class="description">Changemaker V5 is a battle-tested, lightweight, self-hosted productivity suite that empowers you to build secure websites, blogs, newsletters, and forms. With 100% locally hosted AI and automation systems, it helps you manage a community of collaborators—from personal projects to full-fledged campaigns—granting you complete control, inherent security, and true freedom of speech for your content. </p>
+  <p class="subtitle">Build your power, don't rent it.</p>
+  <a href="#apps-showcase" class="cta-button">Explore Applications</a>
+  <a href="https://gitea.bnkhome.org/bnkops/Changemaker" class="git-code-button">
+    <span class="material-icons">code</span> Code
+  </a>
+</div>
+
+<div class="quick-start-section">
+  <h2>Quick Start</h2>
+  <p>Familiar with the terminal, git, and <a href="https://docs.docker.com/get-docker/" target="_blank">Docker</a>? Get Changemaker up and running in minutes:</p>
+  <div class="code-container">
+    <pre><code># Clone the repository
+git clone https://gitea.bnkhome.org/bnkops/Changemaker.git
+cd Changemaker</code></pre>
+  </div>
+
+  <div class="code-container">
+    <pre><code># Run the config.sh script
+./config.sh</code></pre>
+    </div>
+  
+  <div class="code-container">
+    <pre><code># Start all services
+docker compose up -d</code></pre>
+  </div>
+  
+  <p class="quick-note">That's it! After services start (which may take a few minutes on first run), visit http://localhost:3011 to get started.</p>
+  <p class="quick-note"><a href="http://localhost:3011" class="button">Access Homepage (only works with if Changemaker installed)</a> 
+  <p class="important-note"><strong>Important:</strong> Make sure to visit <a href="https://localhost:9444">https://localhost:9444</a> immediately to configure Portainer before the installation process times out. See the <a href="{{ 'apps/portainer/' | url }}">Portainer documentation</a> for details.</p>
+  <a href="https://gitea.bnkhome.org/bnkops/Changemaker/src/branch/main/README.md" class="button">Detailed Installation Guide</a>
+</div>
+
+<div class="info-section">
+  <h2>What is Changemaker?</h2>
+  <p>Changemaker V5 is a curated set of free & open source tools that has been pre-configured into a platform for the express intent of running a digital campaign. It empowers you to deploy secure, locally-built websites, blogs, newsletters, & forms – from personal projects to full-fledged campaigns.</p>
+</div>
+
+<div class="info-section">
+  <h2>Why Changemaker?</h2>
+  <p>Changemaker V5 is a project undertaken by The Bunker Operations, a community building organization, headquartered in Edmonton, Alberta, Canada, to provide our community a digital campaign alternative to mainstream American systems. It intends to be a plug-and-play web server platform so we can transition our friends, allies, and comrades off of corporate systems.</p>
+</div>
+
+<div class="apps-grid-container" id="apps-showcase">
+  <h2>Core Applications & Services</h2>
+  <p style="text-align: center; max-width: 700px; margin: 0 auto 2rem auto;">Changemaker V5 comes packed with a suite of powerful, self-hosted tools. Click on any app to learn more about its features and how to use it.</p>
+  <div class="apps-grid">
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">dashboard</span>Homepage</h3>
+        <p>Main dashboard for Changemaker V5. Your central command center for all services.</p>
+      </div>
+      <a href="{{ 'apps/homepage/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">code</span>Code Server</h3>
+        <p>Visual Studio Code in your browser. Develop and edit code from any device.</p>
+      </div>
+      <a href="{{ 'apps/code-server/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">edit_note</span>Flatnotes</h3>
+        <p>Simple, markdown-based note-taking, directly connected to your blog.</p>
+      </div>
+      <a href="{{ 'apps/flatnotes/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">mail</span>Listmonk</h3>
+        <p>Self-hosted newsletter and mailing list manager for full control over campaigns.</p>
+      </div>
+      <a href="{{ 'apps/listmonk/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">table_chart</span>NocoDB</h3>
+        <p>Open Source Airtable Alternative. Turn any database into a smart spreadsheet.</p>
+      </div>
+      <a href="{{ 'apps/nocodb/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">question_answer</span>Answer</h3>
+        <p>Self-hosted Q&A platform for teams to share knowledge internally.</p>
+      </div>
+      <a href="{{ 'apps/answer/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">draw</span>Excalidraw</h3>
+        <p>Virtual whiteboard for sketching and collaborative diagramming.</p>
+      </div>
+      <a href="{{ 'apps/excalidraw/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">apps</span>Ferdium</h3>
+        <p>All-in-one desktop app that helps you organize multiple social media services in one place.</p>
+      </div>
+      <a href="{{ 'apps/ferdium/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">source</span>Gitea</h3>
+        <p>Lightweight, self-hosted Git service for managing repositories and collaboration.</p>
+      </div>
+      <a href="{{ 'apps/gitea/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">article</span>MkDocs Material</h3>
+        <p>Create beautiful documentation sites with Markdown (like this one!).</p>
+      </div>
+      <a href="{{ 'apps/mkdocs-material/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">people</span>Monica CRM</h3>
+        <p>Personal relationship management system to organize interactions with your contacts.</p>
+      </div>
+      <a href="{{ 'apps/monica-crm/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">integration_instructions</span>n8n</h3>
+        <p>Workflow automation tool that connects various apps and services together.</p>
+      </div>
+      <a href="{{ 'apps/n8n/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">smart_toy</span>Ollama</h3>
+        <p>Run open-source large language models locally for AI-powered assistance.</p>
+      </div>
+      <a href="{{ 'apps/ollama/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">chat</span>OpenWebUI</h3>
+        <p>Web interface for interacting with your Ollama AI models.</p>
+      </div>
+      <a href="{{ 'apps/openwebui/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">sailing</span>Portainer</h3>
+        <p>Container management platform that simplifies deploying and managing Docker environments.</p>
+      </div>
+      <a href="{{ 'apps/portainer/' | url }}" class="button">Learn More</a>
+    </div>
+
+    <div class="app-card">
+      <div>
+        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">forum</span>Rocket.Chat</h3>
+        <p>Self-hosted team communication platform with real-time chat and collaboration.</p>
+      </div>
+      <a href="{{ 'apps/rocketchat/' | url }}" class="button">Learn More</a>
+    </div>
+  </div>
+</div>
+
+<div class="info-section">
+  <h2>Development Pathway</h2>
+  <p>Changemaker is continuously evolving. Here are some identified wants for development:</p>
+  <ul>
+    <li>Internal integrations for asset management (e.g., shared plain file locations).</li>
+    <li>Database connections for automation systems (e.g., manuals for NocoDB & n8n).</li>
+    <li>Enhanced manuals and landing site for the whole system.</li>
+    <li>Comprehensive training materials.</li>
+  </ul>
+  <p>Stay tuned for updates and new features! For more details, check the <a href="{{ 'readme/#development-pathway' | url }}">full development pathway</a>.</p>
+</div>
+
+{% endblock %}
+
+{% block tabs %}
+  {{ super() }}
+{% endblock %}

mkdocs/site/overrides/home.html

@@ -1,211 +1,98 @@
 {% extends "main.html" %}
 
 {% block content %}
+<div class="page-layout">
+  <div class="home-container">
+    <div class="home-content">
+      <h1>Welcome to The BNKops Archive 📚</h1>
+      <p>Your resource hub for community-powered technology and organizing</p>
+      <p>A curated collection of documentation, guides, and resources from The Bunker Operations.</p>
+      <p class="subtitle">Build your power, don't rent it. ✊</p>
       
-<div style="position: relative; padding-top: 56.25%;">
-  <iframe
-    src="https://customer-1ebw5tv06sxrrq32.cloudflarestream.com/e98f453daee6e89c3a1632465806d0d5/iframe?muted=true&preload=true&loop=true&autoplay=true&poster=https%3A%2F%2Fcustomer-1ebw5tv06sxrrq32.cloudflarestream.com%2Fe98f453daee6e89c3a1632465806d0d5%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
-    loading="lazy"
-    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
-    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-    allowfullscreen="true"
-  ></iframe>
+      <div class="home-buttons">
+        <a href="#resources-showcase" class="home-button primary">Browse Resources</a>
+        <a href="#" class="home-button secondary">About BNKops</a>
+      </div>
+    </div>
   </div>
   
-<div class="hero-section">
-  <h1>Welcome to Changemaker V5 </h1>
-  <p class="description">A self-hosted, open-source platform for digital campaigns.</p>
-  <p class="description">Changemaker V5 is a battle-tested, lightweight, self-hosted productivity suite that empowers you to build secure websites, blogs, newsletters, and forms. With 100% locally hosted AI and automation systems, it helps you manage a community of collaborators—from personal projects to full-fledged campaigns—granting you complete control, inherent security, and true freedom of speech for your content. </p>
-  <p class="subtitle">Build your power, don't rent it.</p>
-  <a href="#apps-showcase" class="cta-button">Explore Applications</a>
-  <a href="https://gitea.bnkhome.org/bnkops/Changemaker" class="git-code-button">
-    <span class="material-icons">code</span> Code
+  <div class="left-sidebar">
+    <div class="sidebar-card resources">
+      <div class="card-content">
+        <h3>Our Resources</h3>
+        <div class="resource-list">
+          <a href="#" class="resource-item">
+            <span class="resource-icon">📚</span>
+            <div class="resource-info">
+              <strong>BNKops Archive</strong>
+              <span>Knowledge base for community power</span>
+            </div>
+          </a>
+          <a href="#" class="resource-item">
+            <span class="resource-icon">🚀</span>
+            <div class="resource-info">
+              <strong>Changemaker V5</strong>
+              <span>Self-hosted platform for digital campaigns</span>
+            </div>
+          </a>
+          <a href="#" class="resource-item">
+            <span class="resource-icon">💻</span>
+            <div class="resource-info">
+              <strong>Original Repository</strong>
+              <span>Access our open-source code</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <a href="#" class="sidebar-card download">
+      <span class="card-icon">⭳</span>
+      <div class="card-content">
+        <h3>Download Documentation</h3>
+        <p>Free & Open Source</p>
+      </div>
     </a>
   </div>
   
-<div class="quick-start-section">
-  <h2>Quick Start</h2>
-  <p>Familiar with the terminal, git, and <a href="https://docs.docker.com/get-docker/" target="_blank">Docker</a>? Get Changemaker up and running in minutes:</p>
-  <div class="code-container">
-    <pre><code># Clone the repository
-git clone https://gitea.bnkhome.org/bnkops/Changemaker.git
-cd Changemaker</code></pre>
+  <div class="contact-sidebar">
+    <div class="sidebar-card contact">
+      <div class="card-content">
+        <h3>What You'll Find Here</h3>
+        <p>Documentation, guides, and resources to help build and maintain your digital campaigns and community infrastructure.</p>
+        
+        <div class="community-profile">
+          <img src="../assets/bnkops-logo.png" alt="BNKops Logo" class="community-photo">
+          <div class="community-info">
+            <strong>The Bunker Operations</strong>
+          </div>
         </div>
         
-  <div class="code-container">
-    <pre><code># Run the config.sh script
-./config.sh</code></pre>
-    </div>
-  
-  <div class="code-container">
-    <pre><code># Start all services
-docker compose up -d</code></pre>
-  </div>
-  
-  <p class="quick-note">That's it! After services start (which may take a few minutes on first run), visit http://localhost:3011 to get started.</p>
-  <p class="quick-note"><a href="http://localhost:3011" class="button">Access Homepage (only works with if Changemaker installed)</a> 
-  <p class="important-note"><strong>Important:</strong> Make sure to visit <a href="https://localhost:9444">https://localhost:9444</a> immediately to configure Portainer before the installation process times out. See the <a href="{{ 'apps/portainer/' | url }}">Portainer documentation</a> for details.</p>
-  <a href="https://gitea.bnkhome.org/bnkops/Changemaker/src/branch/main/README.md" class="button">Detailed Installation Guide</a>
-</div>
-
-<div class="info-section">
-  <h2>What is Changemaker?</h2>
-  <p>Changemaker V5 is a curated set of free & open source tools that has been pre-configured into a platform for the express intent of running a digital campaign. It empowers you to deploy secure, locally-built websites, blogs, newsletters, & forms – from personal projects to full-fledged campaigns.</p>
-</div>
-
-<div class="info-section">
-  <h2>Why Changemaker?</h2>
-  <p>Changemaker V5 is a project undertaken by The Bunker Operations, a community building organization, headquartered in Edmonton, Alberta, Canada, to provide our community a digital campaign alternative to mainstream American systems. It intends to be a plug-and-play web server platform so we can transition our friends, allies, and comrades off of corporate systems.</p>
-</div>
-
-<div class="apps-grid-container" id="apps-showcase">
-  <h2>Core Applications & Services</h2>
-  <p style="text-align: center; max-width: 700px; margin: 0 auto 2rem auto;">Changemaker V5 comes packed with a suite of powerful, self-hosted tools. Click on any app to learn more about its features and how to use it.</p>
-  <div class="apps-grid">
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">dashboard</span>Homepage</h3>
-        <p>Main dashboard for Changemaker V5. Your central command center for all services.</p>
-      </div>
-      <a href="{{ 'apps/homepage/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">code</span>Code Server</h3>
-        <p>Visual Studio Code in your browser. Develop and edit code from any device.</p>
-      </div>
-      <a href="{{ 'apps/code-server/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">edit_note</span>Flatnotes</h3>
-        <p>Simple, markdown-based note-taking, directly connected to your blog.</p>
-      </div>
-      <a href="{{ 'apps/flatnotes/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">mail</span>Listmonk</h3>
-        <p>Self-hosted newsletter and mailing list manager for full control over campaigns.</p>
-      </div>
-      <a href="{{ 'apps/listmonk/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">table_chart</span>NocoDB</h3>
-        <p>Open Source Airtable Alternative. Turn any database into a smart spreadsheet.</p>
-      </div>
-      <a href="{{ 'apps/nocodb/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">question_answer</span>Answer</h3>
-        <p>Self-hosted Q&A platform for teams to share knowledge internally.</p>
-      </div>
-      <a href="{{ 'apps/answer/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">draw</span>Excalidraw</h3>
-        <p>Virtual whiteboard for sketching and collaborative diagramming.</p>
-      </div>
-      <a href="{{ 'apps/excalidraw/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">apps</span>Ferdium</h3>
-        <p>All-in-one desktop app that helps you organize multiple social media services in one place.</p>
-      </div>
-      <a href="{{ 'apps/ferdium/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">source</span>Gitea</h3>
-        <p>Lightweight, self-hosted Git service for managing repositories and collaboration.</p>
-      </div>
-      <a href="{{ 'apps/gitea/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">article</span>MkDocs Material</h3>
-        <p>Create beautiful documentation sites with Markdown (like this one!).</p>
-      </div>
-      <a href="{{ 'apps/mkdocs-material/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">people</span>Monica CRM</h3>
-        <p>Personal relationship management system to organize interactions with your contacts.</p>
-      </div>
-      <a href="{{ 'apps/monica-crm/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">integration_instructions</span>n8n</h3>
-        <p>Workflow automation tool that connects various apps and services together.</p>
-      </div>
-      <a href="{{ 'apps/n8n/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">smart_toy</span>Ollama</h3>
-        <p>Run open-source large language models locally for AI-powered assistance.</p>
-      </div>
-      <a href="{{ 'apps/ollama/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">chat</span>OpenWebUI</h3>
-        <p>Web interface for interacting with your Ollama AI models.</p>
-      </div>
-      <a href="{{ 'apps/openwebui/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">sailing</span>Portainer</h3>
-        <p>Container management platform that simplifies deploying and managing Docker environments.</p>
-      </div>
-      <a href="{{ 'apps/portainer/' | url }}" class="button">Learn More</a>
-    </div>
-
-    <div class="app-card">
-      <div>
-        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">forum</span>Rocket.Chat</h3>
-        <p>Self-hosted team communication platform with real-time chat and collaboration.</p>
-      </div>
-      <a href="{{ 'apps/rocketchat/' | url }}" class="button">Learn More</a>
+        <div class="contact-actions">
+          <a href="#" class="action-btn">
+            <span class="icon">📞</span>
+            Contact Us
+          </a>
+          <a href="#" class="action-btn secondary">
+            <span class="icon">👥</span>
+            Join Community
+          </a>
         </div>
       </div>
     </div>
     
-<div class="info-section">
-  <h2>Development Pathway</h2>
-  <p>Changemaker is continuously evolving. Here are some identified wants for development:</p>
-  <ul>
-    <li>Internal integrations for asset management (e.g., shared plain file locations).</li>
-    <li>Database connections for automation systems (e.g., manuals for NocoDB & n8n).</li>
-    <li>Enhanced manuals and landing site for the whole system.</li>
-    <li>Comprehensive training materials.</li>
-  </ul>
-  <p>Stay tuned for updates and new features! For more details, check the <a href="{{ 'readme/#development-pathway' | url }}">full development pathway</a>.</p>
+    <div class="sidebar-card explore">
+      <div class="card-content">
+        <h3>Explore More</h3>
+        <p>Discover additional resources and tools for community organizing</p>
+        <a href="#" class="home-button secondary">View All Resources</a>
+      </div>
+    </div>
+  </div>
 </div>
-
 {% endblock %}
 
-{% block tabs %}
+{% block styles %}
 {{ super() }}
+<link rel="stylesheet" href="{{ 'stylesheets/home.css' | url }}">
 {% endblock %}

mkdocs/site/stylesheets/extra-cm-archive.css

@@ -0,0 +1,43 @@
+/* Multi-line code blocks */
+pre {
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+  max-width: 100%;
+  overflow-x: hidden !important;
+  position: static !important; /* Change to static to remove from stacking context */
+}
+
+pre code {
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+  width: 100%;
+  display: inline-block;
+  position: static !important;
+}
+
+/* Inline code blocks */
+p code {
+  white-space: normal !important;
+  word-break: normal !important;
+  width: auto !important;
+  display: inline !important;
+  background-color: rgba(175, 184, 193, 0.2);
+  padding: 0.2em 0.4em;
+  border-radius: 6px;
+}
+
+/* Target the popup container specifically */
+div[role="dialog"],
+.md-dialog,
+.md-tooltip,
+.md-overlay {
+  position: relative !important;
+  z-index: 100000 !important; /* Very high z-index */
+}
+
+/* Ensure code blocks inside popups behave properly */
+div[role="dialog"] pre,
+.md-dialog pre {
+  position: relative !important;
+  z-index: 1 !important;
+}

mkdocs/site/stylesheets/home.css

@@ -0,0 +1,341 @@
+/* Core layout */
+.page-layout {
+  display: flex;
+  gap: 2rem;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+/* Left sidebar */
+.left-sidebar {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  order: 2;
+}
+
+/* Main content container */
+.home-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  padding: 1.5rem;
+  min-width: 0;
+  order: 1;
+}
+
+.home-content {
+  max-width: 800px;
+  margin: 0;
+}
+
+/* Typography styles */
+.home-content h1 {
+  margin: 0 0 1rem;
+  font-size: 1.8rem;
+}
+
+.home-content p {
+  margin: 0.5rem 0;
+  font-size: 0.95rem;
+  line-height: 1.4;
+}
+
+.subtitle {
+  font-weight: bold;
+  font-style: italic;
+  color: var(--md-primary-fg-color);
+  margin: 0.7rem 0 1rem 0 !important;
+}
+
+/* Button styles */
+.home-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.8rem;
+  margin-top: 1rem;
+}
+
+.home-button {
+  display: inline-block;
+  padding: 0.7rem 1.4rem;
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9rem;
+  transition: all 0.2s ease;
+}
+
+.home-button.primary {
+  background-color: var(--md-primary-fg-color);
+  color: white;
+}
+
+.home-button.primary:hover {
+  background-color: var(--md-primary-fg-color--dark);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.home-button.secondary {
+  background-color: transparent;
+  color: var(--md-primary-fg-color);
+  border: 1px solid var(--md-primary-fg-color);
+}
+
+.home-button.secondary:hover {
+  background-color: rgba(var(--md-primary-fg-color--rgb), 0.05);
+  transform: translateY(-2px);
+}
+
+/* Contact sidebar */
+.contact-sidebar {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  order: 3;
+}
+
+/* Card styling */
+.sidebar-card {
+  background: var(--md-primary-bg-color);
+  border-radius: 8px;
+  padding: 1.2rem;
+  text-decoration: none;
+  color: inherit;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.sidebar-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--md-primary-fg-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.card-content h3 {
+  font-size: 1.1rem;
+  margin: 0 0 0.8rem 0;
+  color: var(--md-primary-fg-color);
+}
+
+.card-content p {
+  font-size: 0.85rem;
+  margin: 0.3rem 0 0.8rem;
+}
+
+/* Resources card */
+.resource-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.resource-item {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0.7rem;
+  border-radius: 6px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.resource-item:hover {
+  background: rgba(var(--md-primary-fg-color--rgb), 0.1);
+  transform: translateY(-2px);
+}
+
+.resource-icon {
+  font-size: 1.2rem;
+}
+
+.resource-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.resource-info strong {
+  font-size: 0.9rem;
+  margin-bottom: 0.2rem;
+}
+
+.resource-info span {
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+/* Download card */
+.sidebar-card.download {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: var(--md-primary-fg-color);
+  color: white;
+}
+
+.card-icon {
+  font-size: 1.5rem;
+  opacity: 0.9;
+}
+
+/* Community profile */
+.community-profile {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1rem 0;
+  padding: 0.8rem;
+  background: rgba(var(--md-primary-fg-color--rgb), 0.04);
+  border-radius: 8px;
+  border-left: 3px solid var(--md-primary-fg-color);
+}
+
+.community-photo {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--md-primary-fg-color);
+}
+
+.community-info {
+  flex: 1;
+}
+
+.community-info strong {
+  display: block;
+  font-size: 0.9rem;
+  color: var(--md-primary-fg-color);
+}
+
+/* Contact actions */
+.contact-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  margin-top: 1rem;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1rem;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  color: inherit;
+  text-decoration: none;
+  font-size: 0.85rem;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: var(--md-primary-fg-color);
+  color: white;
+  border-color: var(--md-primary-fg-color);
+}
+
+.action-btn.secondary {
+  background: rgba(var(--md-primary-fg-color--rgb), 0.1);
+  color: var(--md-primary-fg-color);
+}
+
+.icon {
+  opacity: 0.8;
+}
+
+/* Responsive design */
+@media (max-width: 1200px) {
+  .page-layout {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .home-container {
+    flex-basis: 100%;
+    order: 1;
+  }
+  
+  .left-sidebar {
+    flex-basis: 45%;
+    order: 2;
+  }
+  
+  .contact-sidebar {
+    flex-basis: 45%;
+    order: 3;
+  }
+}
+
+@media (max-width: 900px) {
+  .page-layout {
+    flex-direction: column;
+  }
+  
+  .home-container {
+    order: 1;
+  }
+  
+  .left-sidebar, 
+  .contact-sidebar {
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  
+  .left-sidebar {
+    order: 2;
+  }
+  
+  .contact-sidebar {
+    order: 3;
+  }
+}
+
+@media (max-width: 600px) {
+  .page-layout {
+    padding: 0.5rem;
+  }
+  
+  .home-buttons {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .home-button {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+/* Dark mode support */
+[data-md-color-scheme="slate"] .sidebar-card {
+  background: rgba(45, 55, 72, 0.3);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-md-color-scheme="slate"] .resource-item {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+[data-md-color-scheme="slate"] .resource-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+[data-md-color-scheme="slate"] .action-btn {
+  background: rgba(45, 55, 72, 0.5);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+}