mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-07 18:18:42 -05:00
e1e2ba783f
Right-side actions (Support / Star / Subscribe / GitHub) were clipping past the viewport in two bands measured with Playwright on the dev landing: - 1200-1279 px: icon-only mode at default 0.75 rem padding overflowed by up to 12 px. - 1400-1479 px: Bootstrap's xxl breakpoint pulled labels back in but the row still needs ~1480 px to fit them, so right items clipped 4-64 px past the viewport edge. Extend the icon-only media query upper bound from 1399 to 1479 px and tighten right-nav nav-link horizontal padding to 0.45 rem inside that band. The row now stays single-line from the xl hamburger threshold (1200 px) all the way up.
186 lines
6.8 KiB
SCSS
186 lines
6.8 KiB
SCSS
// =============================================================================
|
||
// NAVBAR STYLES — Navigation links, theme toggle, subscribe button
|
||
// =============================================================================
|
||
|
||
// Navigation link styles - also subtle for consistency
|
||
.navbar-nav .nav-link {
|
||
color: #6c757d !important;
|
||
font-weight: 400;
|
||
|
||
&:hover {
|
||
color: $accent !important;
|
||
}
|
||
|
||
&.active {
|
||
color: $accent !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
// Ensure normal nav links stay highlighted when active (not dropdown toggles)
|
||
&.active:not(.dropdown-toggle) {
|
||
color: $accent !important;
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
// Override global link visited state for navbar
|
||
&:visited {
|
||
color: #6c757d !important;
|
||
}
|
||
|
||
// Ensure dropdown toggles don't get accent color - even when marked active
|
||
&.dropdown-toggle {
|
||
color: #6c757d !important;
|
||
|
||
&:visited,
|
||
&:focus {
|
||
color: #6c757d !important;
|
||
}
|
||
|
||
// Override active state for dropdown toggles specifically
|
||
&.active {
|
||
color: #6c757d !important;
|
||
font-weight: 400 !important;
|
||
}
|
||
}
|
||
|
||
// Subscribe button - match other nav items (gray, not accent)
|
||
&[href*="subscribe"],
|
||
&[href="#subscribe"] {
|
||
color: #6c757d !important;
|
||
|
||
&:visited,
|
||
&:focus,
|
||
&:active {
|
||
color: #6c757d !important;
|
||
}
|
||
|
||
&:hover {
|
||
color: $accent !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Right-side navbar items: hide text labels when space is tight, show only icons.
|
||
// The right-side actions (Support, Star, Subscribe, GitHub) should collapse to
|
||
// icon-only gracefully before the full hamburger breakpoint kicks in.
|
||
//
|
||
// Width budget (measured with Playwright on the live dev landing): brand+title
|
||
// ≈ 340 px, six left dropdowns ≈ 680 px, right tools with full text ≈ 445 px →
|
||
// ~1465 px needed to fit one row. Below that we must hide labels and use
|
||
// icon-only (≈ 152 px with tightened padding) so the row stays single-line all
|
||
// the way down to the xl collapse breakpoint (1200 px) from navbar-common.yml.
|
||
//
|
||
// Without the upper bound at 1479 px, labels reappear at 1400 px (Bootstrap's
|
||
// xxl) but the navbar still needs ~1480 px to fit them — right-side items get
|
||
// clipped 4–64 px past the viewport in the 1400–1479 px band.
|
||
@media (min-width: 1200px) and (max-width: 1479px) {
|
||
.navbar .navbar-nav:last-child {
|
||
.nav-link {
|
||
// Tighten horizontal padding so 4 icon-only items + the GitHub dropdown
|
||
// caret fit inside the ~180 px gap between the left dropdowns and the
|
||
// viewport edge at the 1200 px lower bound (default 0.75 rem padding
|
||
// overflows by ~12 px there).
|
||
padding-left: 0.45rem !important;
|
||
padding-right: 0.45rem !important;
|
||
}
|
||
.nav-link .menu-text {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Prevent right-side navbar items from wrapping — shrink to icons instead
|
||
.navbar .navbar-nav:last-child {
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// Constrain logo size in navbar, and prevent the shield from being
|
||
// squeezed when the brand title pushes against the hamburger at
|
||
// intermediate widths (instructors/slides pages with sidebar).
|
||
.navbar-brand img {
|
||
height: 28px;
|
||
width: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// Dark mode: gently dim the SEAS shield so the white "VE RI TAS"
|
||
// books at the top of the crest do not pop out as a bright square
|
||
// against the dark navbar. The shield itself is transparent-bg —
|
||
// the visible white is the design's books area, not a missing
|
||
// background — so we soften it via filter rather than swap assets.
|
||
body.quarto-dark .navbar-brand img,
|
||
[data-bs-theme="dark"] .navbar-brand img {
|
||
filter: brightness(0.85) contrast(1.05);
|
||
}
|
||
|
||
// Navbar title text: neutral in both modes (consistent across all sites).
|
||
// Do NOT let the brand shrink below its content width. Quarto wraps the
|
||
// logo + title in a `.navbar-brand-container` that has `min-width: 0`
|
||
// and so gets collapsed to 0 px when the nav dropdowns demand every
|
||
// pixel (observed on tinytorch at 992-1199 px). Freezing the container's
|
||
// shrink factor + widening its max-width keeps the shield and title
|
||
// visible; the title inside truncates with ellipsis only when space is
|
||
// genuinely gone.
|
||
.navbar-brand-container {
|
||
flex-shrink: 0;
|
||
// Quarto reserves 115 px for the hamburger/search on the right; widen
|
||
// the allowance so the full "Machine Learning Systems" title has room
|
||
// on laptops (≥1200 px) before ellipsis kicks in.
|
||
max-width: calc(100% - 60px) !important;
|
||
min-width: auto !important;
|
||
}
|
||
|
||
.navbar-brand {
|
||
color: #333 !important;
|
||
font-weight: 500;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
|
||
.navbar-title {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
// Dark mode: light title text for readability on dark navbar
|
||
body.quarto-dark .navbar-brand {
|
||
color: #e6e6e6 !important;
|
||
}
|
||
|
||
// Light mode theme toggle - clear moon icon for better UX (clicking switches TO dark)
|
||
.quarto-color-scheme-toggle {
|
||
color: #6c757d !important;
|
||
|
||
&:hover {
|
||
color: $accent !important;
|
||
}
|
||
}
|
||
|
||
// When Quarto floats the toggle outside the navbar (collapsed viewport),
|
||
// position it cleanly inside the navbar bar area, aligned right.
|
||
.quarto-color-scheme-toggle.top-right {
|
||
position: fixed !important;
|
||
top: 10px !important;
|
||
right: 50px !important; // Leave room for the search icon
|
||
z-index: 1030 !important;
|
||
padding: 0.4rem !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
// Moon icon in light mode (indicates "switch to dark mode")
|
||
.quarto-color-scheme-toggle:not(.alternate) .bi::before {
|
||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234a5568" class="bi bi-moon-stars-fill" viewBox="0 0 16 16"><path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/></svg>') !important;
|
||
background-size: contain !important;
|
||
background-repeat: no-repeat !important;
|
||
background-position: center !important;
|
||
content: "" !important;
|
||
display: inline-block !important;
|
||
width: 1em !important;
|
||
height: 1em !important;
|
||
}
|