Improve WIP banner functionality and styling

- Change banner positioning from relative to fixed for better visibility
- Add header spacing to accommodate fixed banner
- Enhance banner injection with dynamic HTML creation
- Add comments explaining banner implementation details

site/_static/custom.css

@@ -105,13 +105,26 @@ pre.mermaid.align-center {
     color: #000000;
     padding: 0.75rem 1rem;
     text-align: center;
-    position: relative;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
     box-shadow: 0 4px 12px rgba(255, 152, 0, 0.25);
-    z-index: 1000;
+    z-index: 9999;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     animation: attention-pulse 4s ease-in-out infinite;
 }
 
+/* Push down Jupyter Book header to make room for banner */
+header.bd-header {
+    margin-top: 4rem !important;
+}
+
+/* Add spacing to main content area */
+.bd-container {
+    padding-top: 1rem !important;
+}
+
 /* Add spacing after the banner */
 .wip-banner + * {
     margin-top: 2.5rem !important;
@@ -131,7 +144,7 @@ pre.mermaid.align-center {
     flex-direction: column;  /* Stack title and description vertically */
     flex-wrap: nowrap;
     gap: 0.25rem;
-    padding-right: 3.5rem;  /* Space for buttons */
+    padding-right: 2rem;  /* Space for toggle button */
 }
 
 .wip-banner-title {
@@ -173,7 +186,7 @@ pre.mermaid.align-center {
 
 .wip-banner-toggle {
     position: absolute;
-    right: 2.5rem;
+    right: 0.5rem;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.1);
@@ -273,7 +286,7 @@ pre.mermaid.align-center {
     .wip-banner-content {
         flex-direction: column;  /* Stack vertically on mobile */
         gap: 0.25rem;
-        padding-right: 3rem;
+        padding-right: 2rem;
     }
 
     .wip-banner-title {

site/_static/wip-banner.js

@@ -1,22 +1,36 @@
 /**
  * Work-in-Progress Banner JavaScript
- * Handles banner toggle, collapse, and dismiss functionality
+ * Handles banner injection and toggle/collapse functionality
  */
 
 document.addEventListener('DOMContentLoaded', function() {
-    const banner = document.getElementById('wip-banner');
+    // Banner injection: Create banner dynamically if not present in HTML
+    // This allows the banner to work even if not included in the page template
+    let banner = document.getElementById('wip-banner');
+    if (!banner) {
+        const bannerHTML = `
+            <div class="wip-banner" id="wip-banner">
+                <div class="wip-banner-content">
+                    <div class="wip-banner-title">
+                        <span class="icon">🚧</span>
+                        <span>Under Construction</span>
+                        <span class="icon">🚧</span>
+                    </div>
+                    <div class="wip-banner-description">
+                        TinyTorch is currently under active development. Public release planned for December 2025. Expect changes and improvements!
+                    </div>
+                </div>
+                <button class="wip-banner-toggle" id="wip-banner-toggle" title="Collapse banner" aria-label="Toggle banner">▲</button>
+            </div>
+        `;
+        document.body.insertAdjacentHTML('afterbegin', bannerHTML);
+        banner = document.getElementById('wip-banner');
+    }
+
     const toggleBtn = document.getElementById('wip-banner-toggle');
-    const closeBtn = document.getElementById('wip-banner-close');
 
     if (!banner) return;
 
-    // Check if banner was previously dismissed
-    const dismissed = localStorage.getItem('wip-banner-dismissed');
-    if (dismissed === 'true') {
-        banner.style.display = 'none';
-        return;
-    }
-
     // Check if banner was previously collapsed
     const collapsed = localStorage.getItem('wip-banner-collapsed');
     if (collapsed === 'true') {
@@ -46,14 +60,6 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    // Dismiss banner completely
-    if (closeBtn) {
-        closeBtn.addEventListener('click', function() {
-            banner.style.display = 'none';
-            localStorage.setItem('wip-banner-dismissed', 'true');
-        });
-    }
-
     // Add smooth transitions
     banner.style.transition = 'all 0.3s ease';
 });