From e0f910ae5b82e86374775e971b9a3c8139fd5374 Mon Sep 17 00:00:00 2001 From: Vijay Janapa Reddi Date: Tue, 17 Feb 2026 13:53:26 -0500 Subject: [PATCH] style(site): improve navbar responsiveness and version badge layout - Responsive progressive disclosure: hide date at 1024px, icons-only at 768px - Add 44px touch targets for mobile nav links - Restyle version badge with separate number/date spans - Add link-secondary class for visual hierarchy in navbar --- tinytorch/site/_static/custom.css | 112 +++++++++++++++++++++------ tinytorch/site/_static/wip-banner.js | 8 +- 2 files changed, 94 insertions(+), 26 deletions(-) diff --git a/tinytorch/site/_static/custom.css b/tinytorch/site/_static/custom.css index a11446911..87885f3c8 100644 --- a/tinytorch/site/_static/custom.css +++ b/tinytorch/site/_static/custom.css @@ -384,14 +384,16 @@ pre.mermaid { display: flex; align-items: center; font-size: 1.2rem; - font-weight: 600; - color: #f59e0b; - text-decoration: none; + font-weight: 700; + color: #fbbf24 !important; + text-decoration: none !important; letter-spacing: -0.01em; + text-shadow: 0 0 12px rgba(251, 191, 36, 0.3); } .tinytorch-bar-brand:hover { - color: #fbbf24; + color: #fde68a !important; + text-shadow: 0 0 16px rgba(251, 191, 36, 0.45); } .tinytorch-bar-brand .brand-fire { @@ -485,26 +487,41 @@ pre.mermaid { background: rgba(249, 115, 22, 0.15); } -/* Responsive: hide text on small screens, keep icons */ +/* ── Responsive: progressive disclosure across breakpoints ── */ + +/* Tablet landscape / small desktop — drop date from version, shrink link padding */ +@media (max-width: 1024px) { + .tinytorch-bar-version .version-date { + display: none; + } + + .tinytorch-bar-links a { + padding: 0.5rem 0.7rem; + } +} + +/* Tablet portrait — icons only, shrink badge, ensure 44px touch targets */ @media (max-width: 768px) { .tinytorch-bar-links .link-text { display: none; } .tinytorch-bar-links a { - padding: 0.5rem; + min-width: 44px; + min-height: 44px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; } .tinytorch-bar-links .link-icon { - font-size: 1.1rem; + font-size: 1.15rem; } .tinytorch-bar-badge { - display: none; - } - - .tinytorch-bar-version { - display: none; + font-size: 0.65rem; + padding: 0.2rem 0.5rem; } .tinytorch-bar-left { @@ -516,23 +533,42 @@ pre.mermaid { } .tinytorch-bar { - height: 44px; + height: 48px; } - /* Keep download link visible but compact on mobile */ - .tinytorch-bar-links a.download-link { - padding: 0.4rem 0.6rem; + .tinytorch-bar-links { + gap: 0; } } -/* Extra small screens - minimal spacing */ -@media (max-width: 480px) { - .tinytorch-bar-links { - gap: 0.1rem; +/* Phone — hide badge, hide secondary links, keep compact version */ +@media (max-width: 600px) { + .tinytorch-bar-badge { + display: none; } - .tinytorch-bar-links a { - padding: 0.4rem; + .tinytorch-bar-links a.link-secondary { + display: none; + } + + .tinytorch-bar-version { + font-size: 0.7rem; + padding: 0.2rem 0.5rem; + } + + .tinytorch-bar { + height: 44px; + } + + .tinytorch-bar-brand { + font-size: 1.05rem; + } +} + +/* Small phone — hide version too, brand + 3 primary icons */ +@media (max-width: 420px) { + .tinytorch-bar-version { + display: none; } .tinytorch-bar-brand { @@ -584,6 +620,18 @@ header.bd-header { margin-top: 3.5rem !important; } +@media (max-width: 768px) { + header.bd-header { + margin-top: 2.75rem !important; + } +} + +@media (max-width: 600px) { + header.bd-header { + margin-top: 2.5rem !important; + } +} + /* When announcement bar is present, add extra space */ body.has-announcement header.bd-header { margin-top: 6rem !important; @@ -593,6 +641,26 @@ body.has-announcement .tinytorch-bar { top: 2.5rem !important; } +@media (max-width: 768px) { + body.has-announcement header.bd-header { + margin-top: 5rem !important; + } + + body.has-announcement .tinytorch-bar { + top: 2.25rem !important; + } +} + +@media (max-width: 600px) { + body.has-announcement header.bd-header { + margin-top: 4.5rem !important; + } + + body.has-announcement .tinytorch-bar { + top: 2rem !important; + } +} + /* Hide icon links from sidebar completely - only show in top navbar */ .bd-sidebar .icon-links, .bd-sidebar .navbar-icon-links, diff --git a/tinytorch/site/_static/wip-banner.js b/tinytorch/site/_static/wip-banner.js index 8f62c363a..475657ab9 100644 --- a/tinytorch/site/_static/wip-banner.js +++ b/tinytorch/site/_static/wip-banner.js @@ -32,8 +32,8 @@ document.addEventListener('DOMContentLoaded', function() { Tiny🔥Torch + v${TINYTORCH_VERSION} · ${TINYTORCH_RELEASE_DATE} Under Construction - v${TINYTORCH_VERSION} · ${TINYTORCH_RELEASE_DATE}
@@ -44,11 +44,11 @@ document.addEventListener('DOMContentLoaded', function() { ↗ Paper - + 📖 MLSysBook - @@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', function() { ⭐ Star - + 🌍 Community