diff --git a/site/_static/custom.css b/site/_static/custom.css index d6ab110c..7ef40114 100644 --- a/site/_static/custom.css +++ b/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 { diff --git a/site/_static/wip-banner.js b/site/_static/wip-banner.js index 526dd8f5..90001e56 100644 --- a/site/_static/wip-banner.js +++ b/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 = ` +
+
+
+ 🚧 + Under Construction + 🚧 +
+
+ TinyTorch is currently under active development. Public release planned for December 2025. Expect changes and improvements! +
+
+ +
+ `; + 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'; }); \ No newline at end of file