From 17a19d53eaa16bf34a9f8f0ebbe0546b9a534d8f Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell@unturf.com>
Date: Mon, 1 Sep 2025 18:41:48 -0400
Subject: [PATCH] 	new file:   css/sidebar-theme.css 	modified:  
 index.html

---
 css/sidebar-theme.css | 164 ++++++++++++++++++++++++++++++++++++++++++
 index.html            | 129 +++++++++++++++++----------------
 2 files changed, 232 insertions(+), 61 deletions(-)
 create mode 100644 css/sidebar-theme.css

diff --git a/css/sidebar-theme.css b/css/sidebar-theme.css
new file mode 100644
index 0000000..a1305bb
--- /dev/null
+++ b/css/sidebar-theme.css
@@ -0,0 +1,164 @@
+/* CSS Grid-based sidebar navigation theme for PicoCSS */
+
+:root {
+  --sidebar-width: 280px;
+  --content-max-width: 1200px;
+  --base-font-size: 16px;
+  --heading-scale: 1.125;
+}
+
+/* Adjust default font sizes */
+html {
+  font-size: var(--base-font-size);
+}
+
+body {
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+h1 { font-size: calc(1rem * var(--heading-scale) * var(--heading-scale) * var(--heading-scale) * var(--heading-scale)); }
+h2 { font-size: calc(1rem * var(--heading-scale) * var(--heading-scale) * var(--heading-scale)); }
+h3 { font-size: calc(1rem * var(--heading-scale) * var(--heading-scale)); }
+h4 { font-size: calc(1rem * var(--heading-scale)); }
+h5, h6 { font-size: 1rem; }
+
+/* Main grid layout */
+body {
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  grid-template-areas: 
+    "sidebar main";
+  gap: 2rem;
+  min-height: 100vh;
+  margin: 0;
+  padding: 1rem;
+}
+
+/* Sidebar navigation */
+aside.sidebar {
+  grid-area: sidebar;
+  background: var(--card-background-color);
+  border-right: 1px solid var(--muted-border-color);
+  padding: 2rem;
+  position: sticky;
+  top: 1rem;
+  height: calc(100vh - 2rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-radius: 0.5rem;
+}
+
+/* Main content area */
+main {
+  grid-area: main;
+  padding: 2rem 3rem;
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Table of contents styling */
+.table-of-contents {
+  font-size: 0.875rem;
+}
+
+.table-of-contents h2 {
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--muted-border-color);
+}
+
+.table-of-contents nav ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.table-of-contents nav ul ul {
+  padding-left: 1.25rem;
+  margin-top: 0.25rem;
+}
+
+.table-of-contents nav li {
+  margin: 0.25rem 0;
+}
+
+.table-of-contents nav a {
+  text-decoration: none;
+  color: var(--color);
+  display: block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: background-color 0.2s;
+}
+
+.table-of-contents nav a:hover {
+  background-color: var(--secondary-focus);
+}
+
+.table-of-contents nav a.active {
+  background-color: var(--primary-focus);
+  color: var(--primary-inverse);
+}
+
+/* Responsive behavior */
+@media (max-width: 768px) {
+  body {
+    grid-template-columns: 1fr;
+    grid-template-areas: 
+      "main";
+  }
+  
+  aside.sidebar {
+    position: fixed;
+    left: -100%;
+    width: var(--sidebar-width);
+    z-index: 1000;
+    transition: left 0.3s ease;
+  }
+  
+  aside.sidebar.open {
+    left: 0;
+  }
+  
+  /* Mobile menu toggle */
+  .sidebar-toggle {
+    display: block;
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    z-index: 1001;
+    background: var(--primary);
+    color: var(--primary-inverse);
+    border: none;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+  }
+}
+
+@media (min-width: 769px) {
+  .sidebar-toggle {
+    display: none;
+  }
+}
+
+/* Sidebar scrollbar styling */
+aside.sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+
+aside.sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+aside.sidebar::-webkit-scrollbar-thumb {
+  background: var(--muted-color);
+  border-radius: 3px;
+}
+
+aside.sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--color);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index cffab5a..2e8f21a 100644
--- a/index.html
+++ b/index.html
@@ -12,38 +12,8 @@
     <link rel="stylesheet" href="/css/pico.classless.min.css">
     <!-- ChunkFive Font -->
     <link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />
-
-    <style>
-    body {
-        max-width: 960px;
-        margin: 0 auto;
-    }
-    
-    /* Table of Contents Visual Hierarchy */
-    aside nav ul {
-        list-style-type: disc;
-        padding-left: 20px;
-    }
-    
-    aside nav ul ul {
-        list-style-type: circle;
-        padding-left: 30px;
-        margin-top: 8px;
-        border-left: 2px solid rgba(67, 160, 71, 0.2);
-        padding-left: 20px;
-        margin-left: 10px;
-    }
-    
-    aside nav li {
-        margin: 6px 0;
-        line-height: 1.4;
-    }
-    
-    aside nav ul ul li {
-        margin: 4px 0;
-        font-size: 0.9em;
-    }
-    </style>
+    <!-- Sidebar Theme -->
+    <link rel="stylesheet" href="/css/sidebar-theme.css">
 
     <!-- Highlight.js for syntax highlighting -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/a11y-dark.min.css" />
@@ -70,33 +40,18 @@
 </head>
 
 <body>
+    <!-- Mobile menu toggle -->
+    <button class="sidebar-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">
+        ☰
+    </button>
 
-    <header>
-        <hgroup>
-            <a href="https://uncloseai.com"><h1 class="unturf" style="font-family: 'ChunkFiveRegular';">russell@unturf. presents, uncloseai</h1></a>
-            <p>Welcome to uncloseai.com - Free LLM & Text To Speech Artificial Intelligence Service</p>
-        </hgroup>
-        <nav>
-            <ul>
-                <li><a href="#" onclick="switchTheme('auto')">Auto</a></li>
-                <li><a href="#" onclick="switchTheme('light')">Light</a></li>
-                <li><a href="#" onclick="switchTheme('dark')">Dark</a></li>
-            </ul>
-        </nav>
-    </header>
-
-    <main>
-        <h2 id="introduction">Introducing uncloseai & Hermes & TTS Speech Endpoints</h2>
-        <p>At <strong>uncloseai.</strong>, we offer free AI services powered by the <a href="https://nousresearch.com/hermes3/" target="_blank">NousResearch/Hermes-3-Llama-3.1-8B</a> model and a TTS (Text-to-Speech) endpoint. Our mission is to provide accessible AI tools for everyone, embodying the principles of both free as in beer & free as in freedom. You can interact with our models without any cost, and you are encouraged to contribute and build upon the open-source code & models that we use.</p>
-          
-	<p>We intend to be a drop in replacement, you can use the existing open source OpenAI client to communicate with us.</p>
-
-        <!-- Table of Contents -->
-        <aside>
-            <h3>📋 Table of Contents</h3>
+    <!-- Left sidebar -->
+    <aside class="sidebar">
+        <div class="table-of-contents">
+            <h2>📋 Table of Contents</h2>
             <nav>
                 <ul>
-                    <li><a href="#introduction">Introducing uncloseai & Hermes & TTS Speech Endpoints</a></li>
+                    <li><a href="#introduction" class="active">Introducing uncloseai & Hermes & TTS Speech Endpoints</a></li>
                     <li><a href="#client-side">Web Client-Only Solution</a>
                         <ul>
                             <li><a href="#quick-start">🚀 Quick Start: Install uncloseai.js</a></li>
@@ -132,8 +87,29 @@
                 </ul>
             </nav>
             
-            <p><strong>🎮 Looking for examples and interactive demos?</strong> <a href="https://ai.unturf.com/demo.html">Visit our comprehensive demo page →</a></p>
-        </aside>
+            <p style="margin-top: 2rem;"><strong>🎮 Looking for examples?</strong><br><a href="https://ai.unturf.com/demo.html">Visit our demo page →</a></p>
+        </div>
+    </aside>
+
+    <!-- Main content -->
+    <main>
+        <header>
+        <hgroup>
+            <a href="https://uncloseai.com"><h1 class="unturf" style="font-family: 'ChunkFiveRegular';">russell@unturf. presents, uncloseai</h1></a>
+            <p>Welcome to uncloseai.com - Free LLM & Text To Speech Artificial Intelligence Service</p>
+        </hgroup>
+        <nav>
+            <ul>
+                <li><a href="#" onclick="switchTheme('auto')">Auto</a></li>
+                <li><a href="#" onclick="switchTheme('light')">Light</a></li>
+                <li><a href="#" onclick="switchTheme('dark')">Dark</a></li>
+            </ul>
+        </nav>
+        </header>
+        <h2 id="introduction">Introducing uncloseai & Hermes & TTS Speech Endpoints</h2>
+        <p>At <strong>uncloseai.</strong>, we offer free AI services powered by the <a href="https://nousresearch.com/hermes3/" target="_blank">NousResearch/Hermes-3-Llama-3.1-8B</a> model and a TTS (Text-to-Speech) endpoint. Our mission is to provide accessible AI tools for everyone, embodying the principles of both free as in beer & free as in freedom. You can interact with our models without any cost, and you are encouraged to contribute and build upon the open-source code & models that we use.</p>
+          
+	<p>We intend to be a drop in replacement, you can use the existing open source OpenAI client to communicate with us.</p>
 
         <h2 id="client-side">Web Client-Only Solution: Interact with AI Services Directly from Static Sites or CDNs</h2>
 
@@ -460,13 +436,44 @@ speech.ai.unturf.com {
         </script>
 
         <script>hljs.highlightAll();</script>
-    </main>
 
-    <footer>
+        <footer>
         <small>Stylesheets by <a href="https://picocss.com" target="_blank">PicoCSS</a></small>
         <small>& <a href="https://highlightjs.org/" target="_blank">highlight.js</a></small>
-    </footer>
+        </footer>
 
+        <script>
+            // Simple active link highlighting
+            document.querySelectorAll('.table-of-contents a').forEach(link => {
+                link.addEventListener('click', function() {
+                    document.querySelectorAll('.table-of-contents a').forEach(a => a.classList.remove('active'));
+                    this.classList.add('active');
+                });
+            });
+
+            // Highlight current section on scroll
+            const sections = document.querySelectorAll('h2[id], h3[id]');
+            const navLinks = document.querySelectorAll('.table-of-contents a');
+
+            window.addEventListener('scroll', () => {
+                let current = '';
+                sections.forEach(section => {
+                    const sectionTop = section.offsetTop;
+                    const sectionHeight = section.clientHeight;
+                    if (window.scrollY >= sectionTop - 100) {
+                        current = section.getAttribute('id');
+                    }
+                });
+
+                navLinks.forEach(link => {
+                    link.classList.remove('active');
+                    if (link.getAttribute('href') === '#' + current) {
+                        link.classList.add('active');
+                    }
+                });
+            });
+        </script>
+    </main>
 </body>
 
 </html>