mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-07 18:18:42 -05:00
450 lines
11 KiB
SCSS
450 lines
11 KiB
SCSS
// =============================================================================
|
||
// MOBILE & RESPONSIVE — All responsive breakpoints
|
||
// =============================================================================
|
||
|
||
// Mobile responsive sections
|
||
@media (max-width: 768px) {
|
||
|
||
// UX: Hide ALL sidebar elements - we'll rely on hamburger menu for everything
|
||
.sidebar-toggle,
|
||
.sidebar-tools,
|
||
.quarto-navigation-tool:not(.quarto-color-scheme-toggle),
|
||
.quarto-navigation .quarto-navigation-tool:not(.quarto-color-scheme-toggle) {
|
||
display: none !important;
|
||
}
|
||
|
||
// Improve header spacing and touch targets - minimal right padding
|
||
.navbar {
|
||
padding: 0.75rem 0 0.75rem 1rem !important;
|
||
min-height: 60px !important;
|
||
position: relative !important;
|
||
}
|
||
|
||
// Better logo and title sizing for mobile readability
|
||
.navbar-brand {
|
||
font-size: 1rem !important;
|
||
font-weight: 500 !important;
|
||
|
||
img {
|
||
height: 32px !important;
|
||
width: auto !important;
|
||
margin-right: 0.5rem !important;
|
||
}
|
||
}
|
||
|
||
// Larger hamburger for better touch targets (44px minimum)
|
||
.navbar-toggler {
|
||
padding: 0.5rem !important;
|
||
border: none !important;
|
||
min-width: 44px !important;
|
||
min-height: 44px !important;
|
||
|
||
.navbar-toggler-icon {
|
||
width: 1.5em !important;
|
||
height: 1.5em !important;
|
||
}
|
||
}
|
||
|
||
// Navbar nav items - make them more touch-friendly
|
||
.navbar-nav .nav-link {
|
||
padding: 0.75rem 1rem !important;
|
||
font-size: 1rem !important;
|
||
}
|
||
|
||
// Improve navbar collapse behavior
|
||
.navbar-collapse {
|
||
border-top: 1px solid #dee2e6;
|
||
margin-top: 0.5rem;
|
||
padding-top: 0.5rem;
|
||
}
|
||
|
||
// Minimize breadcrumb on mobile - less visual clutter
|
||
.breadcrumb {
|
||
background: transparent;
|
||
padding: 0.25rem 0;
|
||
margin-bottom: 0.25rem;
|
||
font-size: 0.75rem;
|
||
color: #6c757d;
|
||
|
||
.breadcrumb-item {
|
||
&:before {
|
||
content: "›" !important;
|
||
padding: 0 0.2rem;
|
||
color: #adb5bd;
|
||
}
|
||
|
||
a {
|
||
color: #6c757d;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Optimize navbar spacing for cleaner look
|
||
.navbar {
|
||
padding: 0.5rem 0.75rem !important;
|
||
|
||
.navbar-toggler {
|
||
border: none !important;
|
||
padding: 0.25rem 0.5rem !important;
|
||
}
|
||
|
||
.navbar-nav .nav-link {
|
||
margin: 0 0.25rem !important;
|
||
}
|
||
}
|
||
|
||
// Style the hamburger menu items nicely
|
||
.navbar-collapse {
|
||
.nav-link {
|
||
padding: 0.75rem 1rem !important;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// UX: Remove duplicate search from hamburger menu
|
||
.navbar-collapse .aa-Form,
|
||
.navbar-collapse .navbar-nav .aa-Form,
|
||
.navbar-collapse input[type="search"],
|
||
.navbar-collapse .search-input,
|
||
.navbar-collapse .nav-item:has(.aa-Form) {
|
||
display: none !important;
|
||
}
|
||
|
||
// Target Quarto's specific page layout classes that add spacing
|
||
body.page-navbar #quarto-header.headroom.fixed-top {
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
// Remove spacing from Quarto container structure
|
||
.quarto-container.page-columns {
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
// Target the navbar within Quarto's structure
|
||
.page-navbar .navbar {
|
||
padding-left: 1rem !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
// Position search bar flush to edge
|
||
.navbar .aa-Form {
|
||
position: absolute !important;
|
||
right: 0.5rem !important;
|
||
top: 50% !important;
|
||
transform: translateY(-50%) !important;
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
min-width: 44px !important;
|
||
}
|
||
|
||
// Ensure navbar content doesn't overflow
|
||
.navbar .container-fluid {
|
||
max-width: 100% !important;
|
||
padding-right: 60px !important; // Space for search
|
||
}
|
||
|
||
// Improve main search bar on mobile (outside hamburger)
|
||
.navbar .aa-Form:not(.navbar-collapse .aa-Form) {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
// Make sidebar more mobile-friendly when it appears
|
||
.sidebar {
|
||
font-size: 0.9rem;
|
||
|
||
.sidebar-item a {
|
||
padding: 0.5rem 0.75rem !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Ensure proper responsive collapse behavior - everything goes into hamburger when needed
|
||
@media (max-width: 767px) {
|
||
|
||
// Make hamburger menu items look great
|
||
.navbar-collapse {
|
||
margin-top: 0.5rem;
|
||
border-top: 1px solid #dee2e6;
|
||
padding-top: 0.5rem;
|
||
|
||
.nav-link {
|
||
padding: 0.75rem 1rem !important;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
display: flex !important;
|
||
align-items: center;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
// Make icons and text align nicely
|
||
i {
|
||
margin-right: 0.5rem;
|
||
width: 1.2rem;
|
||
}
|
||
|
||
// Style secondary tools (star, heart, github, pdf) with subdued grey, crimson hover
|
||
&[href*="github.com"],
|
||
&[href*="opencollective.com"],
|
||
&[href*="mlsysbook.ai/pdf"] {
|
||
color: #6c757d !important;
|
||
font-size: 0.9rem !important;
|
||
|
||
&:hover {
|
||
color: $accent !important;
|
||
background-color: rgba($accent, 0.1) !important;
|
||
}
|
||
|
||
// Override visited link accent color
|
||
&:visited {
|
||
color: #6c757d !important;
|
||
}
|
||
}
|
||
|
||
// Catch any secondary tools by position (after Labs/Kits/PDF)
|
||
&:nth-child(n+4) {
|
||
color: #6c757d !important;
|
||
font-size: 0.9rem !important;
|
||
|
||
&:hover {
|
||
color: $accent !important;
|
||
background-color: rgba($accent, 0.1) !important;
|
||
}
|
||
|
||
&:visited {
|
||
color: #6c757d !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Style dropdown toggles in hamburger menu — gray default, crimson hover
|
||
.dropdown-toggle,
|
||
.nav-link.dropdown-toggle,
|
||
.nav-item .dropdown-toggle,
|
||
a.dropdown-toggle {
|
||
color: #6c757d !important;
|
||
font-size: 0.9rem !important;
|
||
|
||
&:hover {
|
||
color: $accent !important;
|
||
background-color: rgba($accent, 0.1) !important;
|
||
}
|
||
|
||
// Override any accent link styling
|
||
&:visited,
|
||
&:focus,
|
||
&:active {
|
||
color: #6c757d !important;
|
||
}
|
||
|
||
// Ensure no other color classes override this
|
||
&.nav-link {
|
||
color: #6c757d !important;
|
||
}
|
||
}
|
||
|
||
// Broad rule to override any accent styling on secondary nav items
|
||
.nav-item:nth-child(n+4) .nav-link,
|
||
.nav-item:nth-child(n+4) a {
|
||
color: #6c757d !important;
|
||
font-size: 0.9rem !important;
|
||
|
||
&:hover {
|
||
color: $accent !important;
|
||
}
|
||
|
||
&:visited,
|
||
&:focus,
|
||
&:active {
|
||
color: #6c757d !important;
|
||
}
|
||
}
|
||
|
||
// Style dropdowns in hamburger menu
|
||
.dropdown-menu {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
background: rgba(248, 249, 250, 0.5) !important;
|
||
margin-left: 1rem !important;
|
||
|
||
.dropdown-item {
|
||
padding: 0.5rem 1rem !important;
|
||
font-size: 0.9rem !important;
|
||
color: #6c757d !important;
|
||
|
||
&:hover {
|
||
background: rgba($accent, 0.1) !important;
|
||
color: $accent !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Navbar collapses to hamburger at xl (1200px) via navbar-common.yml.
|
||
// With 6 left-side dropdowns (Read, Build, Teach, Prepare, Connect, About)
|
||
// plus 4 right-side tools, the full navbar needs ~1100px of horizontal space.
|
||
// Below xl we ship the hamburger; this block polishes that hamburger view on
|
||
// tablets and 13-inch laptops.
|
||
|
||
@media (min-width: 769px) and (max-width: 1199px) {
|
||
.navbar-brand {
|
||
font-size: 1.1rem !important;
|
||
|
||
img {
|
||
height: 30px !important;
|
||
width: auto !important;
|
||
}
|
||
}
|
||
|
||
// Tablets in landscape get the hamburger — ensure it looks polished
|
||
.navbar-collapse {
|
||
border-top: 1px solid #dee2e6;
|
||
margin-top: 0.5rem;
|
||
padding-top: 0.5rem;
|
||
|
||
.dropdown-menu {
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
background: rgba(248, 249, 250, 0.5) !important;
|
||
margin-left: 1rem !important;
|
||
|
||
.dropdown-item {
|
||
padding: 0.5rem 1rem !important;
|
||
font-size: 0.95rem !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Large screens - ensure proper desktop layout
|
||
@media (min-width: 768px) {
|
||
|
||
// On desktop, hide text for icon-only display (optional)
|
||
.navbar-nav .nav-link .nav-text {
|
||
display: none;
|
||
}
|
||
|
||
// Make sure icons are properly spaced
|
||
.navbar-nav .nav-link {
|
||
padding: 0.5rem 0.75rem !important;
|
||
}
|
||
}
|
||
|
||
// Switch to the abbreviated title at the hamburger breakpoint (1199px, matching
|
||
// collapse-below: xl in navbar-common.yml) so the shield + title never compete
|
||
// for the same pixels on instructors/slides pages, where a floating sidebar
|
||
// steals horizontal space. If you change collapse-below in navbar-common.yml,
|
||
// update this max-width in lockstep.
|
||
@media (max-width: 1199px) {
|
||
|
||
.navbar-brand .navbar-title {
|
||
font-size: 0 !important; // Hide original text
|
||
|
||
&::after {
|
||
content: "ML Systems" !important;
|
||
font-size: 0.95rem !important;
|
||
font-weight: 500 !important;
|
||
color: inherit !important; // Inherits from .navbar-brand (light or dark mode)
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.navbar-brand .navbar-title::after {
|
||
content: "ML Systems" !important;
|
||
font-size: 0.9rem !important;
|
||
}
|
||
}
|
||
|
||
// Extra small screens (phones in portrait)
|
||
@media (max-width: 576px) {
|
||
|
||
// Stack navbar tools vertically if needed
|
||
.navbar-nav {
|
||
text-align: center;
|
||
|
||
.nav-link {
|
||
border-bottom: 1px solid #f8f9fa;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Adjust announcement bar for very small screens
|
||
.alert-primary,
|
||
.announcement {
|
||
font-size: 0.85rem !important;
|
||
padding: 0.75rem !important;
|
||
margin: 0.5rem !important;
|
||
|
||
br {
|
||
display: none; // Remove line breaks on very small screens
|
||
}
|
||
}
|
||
|
||
// Reduce navbar padding even more
|
||
.navbar {
|
||
padding: 0.25rem 0.5rem !important;
|
||
}
|
||
|
||
// Improve content padding
|
||
.content {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
// Enable horizontal scroll for wide tables on mobile
|
||
table,
|
||
.table-responsive,
|
||
.cell-output-display {
|
||
overflow-x: auto !important;
|
||
display: block !important;
|
||
white-space: nowrap !important;
|
||
|
||
// Make tables scrollable with visible scrollbars
|
||
&::-webkit-scrollbar {
|
||
height: 8px;
|
||
background-color: #f1f1f1;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background-color: #888;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb:hover {
|
||
background-color: #555;
|
||
}
|
||
}
|
||
|
||
// Ensure table cells don't wrap text on small screens
|
||
table td,
|
||
table th {
|
||
white-space: nowrap !important;
|
||
padding: 0.3rem 0.5rem !important;
|
||
font-size: 0.85rem !important;
|
||
}
|
||
|
||
// Ensure main search stays accessible and well-positioned on very small screens
|
||
.navbar .aa-DetachedFormContainer {
|
||
margin: 0.5rem 0;
|
||
}
|
||
}
|
||
|
||
// Hide breadcrumbs only on extremely small screens (350px and below)
|
||
// This keeps them visible on iPhone SE (375px) and similar devices
|
||
@media (max-width: 350px) {
|
||
.breadcrumb {
|
||
display: none !important;
|
||
}
|
||
}
|