github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-03-11 17:49:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

style(site): improve navbar responsiveness and version badge layout

Browse Source 
- 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
This commit is contained in:
Vijay Janapa Reddi
2026-02-17 13:53:26 -05:00
parent 2b27429892
commit e0f910ae5b
2 changed files with 94 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
tinytorch/site/_static/custom.css
View File

@@ -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,

8
tinytorch/site/_static/wip-banner.js
View File

@@ -32,8 +32,8 @@ document.addEventListener('DOMContentLoaded', function() {
<a href="${siteRoot}intro.html" class="tinytorch-bar-brand">
Tiny<span class="brand-fire">🔥</span>Torch
</a>
<a href="https://github.com/harvard-edge/cs249r_book/releases" target="_blank" rel="noopener noreferrer" class="tinytorch-bar-version" title="View releases on GitHub"><span class="version-number">v${TINYTORCH_VERSION}</span><span class="version-date"> · ${TINYTORCH_RELEASE_DATE}</span></a>
<span class="tinytorch-bar-badge">Under Construction</span>
<a href="https://github.com/harvard-edge/cs249r_book/releases" target="_blank" rel="noopener noreferrer" class="tinytorch-bar-version" title="View releases on GitHub">v${TINYTORCH_VERSION} · ${TINYTORCH_RELEASE_DATE}</a>
</div>
<div class="tinytorch-bar-links">
<a href="${siteRoot}_static/downloads/TinyTorch-Guide.pdf" class="download-link" title="Download Course Guide (PDF)">
@@ -44,11 +44,11 @@ document.addEventListener('DOMContentLoaded', function() {
<span class="link-icon">↗</span>
<span class="link-text">Paper</span>
</a>
<a href="https://mlsysbook.ai" target="_blank">
<a href="https://mlsysbook.ai" target="_blank" class="link-secondary">
<span class="link-icon">📖</span>
<span class="link-text">MLSysBook</span>
</a>
<a href="#" class="subscribe-trigger" onclick="event.preventDefault(); if(window.openSubscribeModal) openSubscribeModal();">
<a href="#" class="subscribe-trigger link-secondary" onclick="event.preventDefault(); if(window.openSubscribeModal) openSubscribeModal();">
<span class="link-icon">✉️</span>
<span class="link-text">Subscribe</span>
</a>
@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', function() {
<span class="link-icon">⭐</span>
<span class="link-text">Star</span>
</a>
<a href="${siteRoot}community.html" target="_blank">
<a href="${siteRoot}community.html" target="_blank" class="link-secondary">
<span class="link-icon">🌍</span>
<span class="link-text">Community</span>
</a>