Update index.html

index.html

@@ -21,23 +21,12 @@
         }
         
         /* Layout container */
-        .container {
+        .layout {
             display: flex;
             min-height: 100vh;
-            justify-content: flex-start;
-        }
-      
-        /* When TOC is collapsed, center the content globally */
-        .container.toc-collapsed {
-            justify-content: center;
         }
         
-        .container.toc-collapsed .main-content {
-            margin-left: 0;
-            margin-right: 0;
-        }
-      
-        /* Fixed TOC Sidebar */
+        /* TOC Sidebar */
         .toc-sidebar {
             position: fixed;
             left: 0;
@@ -52,35 +41,27 @@
             transition: transform 0.3s ease;
         }
         
-        /* Collapsible sidebar */
         .toc-sidebar.collapsed {
             transform: translateX(-240px);
         }
         
-        .toc-sidebar .collapse-btn {
-            position: fixed;
+        .toc-toggle {
+            position: absolute;
             top: 20px;
-            left: 248px;
+            right: -20px;
+            width: 40px;
+            height: 40px;
             background: #3b82f6;
             color: white;
             border: none;
-            border-radius: 4px;
-            width: 32px;
-            height: 32px;
+            border-radius: 0 6px 6px 0;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 14px;
+            font-size: 16px;
+            z-index: 101;
             transition: all 0.3s ease;
-            z-index: 102;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        
-        .toc-sidebar.collapsed .collapse-btn {
-            right: -16px;
-            background: #3b82f6;
-            color: white;
         }
         
         .toc-sidebar h3 {
@@ -133,22 +114,23 @@
             padding-left: 32px;
         }
         
-        /* Main content area */
+        /* Main content area - always centered */
         .main-content {
-            margin-left: 280px;
             max-width: 896px;
-            padding: 32px 48px 32px 32px;
-            transition: all 0.3s ease;
+            margin: 0 auto;
+            padding: 32px 48px;
             width: 100%;
         }
         
-        .main-content.expanded {
-            margin-left: 40px;  /* Just account for the collapsed sidebar width */
-            max-width: 896px;
-            padding: 32px;
+        /* Content wrapper */
+        .content-wrapper {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            min-height: 100vh;
         }
         
-        /* Original content styles */
+        /* Typography - Hugging Face style */
         h1 {
             font-size: 2.25rem;
             font-weight: 700;
@@ -310,6 +292,7 @@
             transform: scale(1.1);
         }
         
+        /* Custom styled boxes */
         div[style*="border: 2px solid black"] {
             border: 1px solid #e5e7eb !important;
             border-radius: 0.75rem !important;
@@ -329,24 +312,13 @@
         @media (max-width: 1024px) {
             .toc-sidebar {
                 transform: translateX(-100%);
-                transition: transform 0.3s ease;
             }
             
             .toc-sidebar.open {
                 transform: translateX(0);
             }
             
-            .toc-sidebar .collapse-btn {
-                display: none;
-            }
-            
             .main-content {
-                margin-left: 0;
-                padding: 16px;
-            }
-            
-            .main-content.expanded {
-                margin-left: 0;
                 padding: 16px;
             }
             
@@ -355,7 +327,7 @@
                 position: fixed;
                 top: 16px;
                 left: 16px;
-                z-index: 101;
+                z-index: 102;
                 background: #3b82f6;
                 color: white;
                 border: none;
@@ -371,24 +343,26 @@
     </style>
 </head>
 <body>
-    <div class="container">
+    <div class="layout">
         <!-- TOC Sidebar -->
-        <nav class="toc-sidebar" id="toc-sidebar">
-          <button class="collapse-btn" onclick="toggleSidebar()" id="collapse-btn">◀</button>
-          <h3>Table of Contents</h3>
-          <div id="toc-content">
-              <!-- TOC will be generated here -->
-          </div>
-      </nav>
+        <aside class="toc-sidebar" id="toc-sidebar">
+            <button class="toc-toggle" onclick="toggleTOC()" id="toc-toggle">◀</button>
+            <h3>Table of Contents</h3>
+            <div id="toc-content">
+                <!-- TOC will be generated here -->
+            </div>
+        </aside>
         
         <!-- Mobile TOC Toggle -->
-        <button class="mobile-toc-toggle" onclick="toggleTOC()">☰ TOC</button>
-        
-        <!-- Main Content -->
-        <main class="main-content" id="main-content">
-            <div id="loading">Loading...</div>
-            <div id="content"></div>
-        </main>
+        <button class="mobile-toc-toggle" onclick="toggleMobileTOC()">☰ TOC</button>
+        
+        <!-- Main Content Wrapper -->
+        <div class="content-wrapper">
+            <main class="main-content">
+                <div id="loading">Loading...</div>
+                <div id="content"></div>
+            </main>
+        </div>
     </div>
 
     <script>
@@ -407,7 +381,6 @@
                     .replace(/-+/g, '-')
                     .replace(/^-|-$/g, '');
                 
-                // Add ID to heading for linking
                 heading.id = id;
                 
                 const tocClass = `toc-level-${level}`;
@@ -419,42 +392,24 @@
         }
         
         function setActiveLink(clickedLink) {
-            // Remove active class from all links
             document.querySelectorAll('.toc-sidebar a').forEach(link => {
                 link.classList.remove('active');
             });
-            // Add active class to clicked link
             clickedLink.classList.add('active');
         }
         
         function toggleTOC() {
-            document.getElementById('toc-sidebar').classList.toggle('open');
-        }
-        
-        function toggleSidebar() {
             const sidebar = document.getElementById('toc-sidebar');
-            const mainContent = document.getElementById('main-content');
-            const container = document.querySelector('.container');
-            const btn = document.getElementById('collapse-btn');
+            const btn = document.getElementById('toc-toggle');
             
-            const isCollapsed = sidebar.classList.contains('collapsed');
-            
-            if (isCollapsed) {
-                // Expanding
-                sidebar.classList.remove('collapsed');
-                mainContent.classList.remove('expanded');
-                container.classList.remove('toc-collapsed');
-                btn.innerHTML = '◀';
-            } else {
-                // Collapsing
-                sidebar.classList.add('collapsed');
-                mainContent.classList.add('expanded');
-                container.classList.add('toc-collapsed');
-                btn.innerHTML = '▶';
-            }
+            sidebar.classList.toggle('collapsed');
+            btn.innerHTML = sidebar.classList.contains('collapsed') ? '▶' : '◀';
+        }
+        
+        function toggleMobileTOC() {
+            document.getElementById('toc-sidebar').classList.toggle('open');
         }
         
-        // Highlight current section while scrolling
         function highlightCurrentSection() {
             const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
             const tocLinks = document.querySelectorAll('.toc-sidebar a');
@@ -489,12 +444,8 @@
                 const contentDiv = document.getElementById('content');
                 contentDiv.innerHTML = html;
                 
-                // Generate TOC after content is loaded
                 generateTOC(contentDiv);
-                
                 document.getElementById('loading').style.display = 'none';
-                
-                // Add scroll listener for highlighting current section
                 window.addEventListener('scroll', highlightCurrentSection);
                 
             } catch (error) {