mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-03-11 17:49:25 -05:00
feat(ui): improve mobile navbar responsiveness and cleanup
- Fix mobile navbar collapse behavior and layout - Resolve GitHub dropdown highlighting issue in hamburger menu - Position search bar properly on mobile without white space - Clean up TOC by disabling duplicate repo-actions - Ensure all navigation items collapse into hamburger menu appropriately - Style secondary tools (Star, Support, GitHub, PDF) in subdued grey - Improve overall mobile user experience and visual consistency
This commit is contained in:
@@ -26,17 +26,37 @@ a {
|
||||
|
||||
// Navigation link styles - also subtle for consistency
|
||||
.navbar-nav .nav-link {
|
||||
color: #6c757d;
|
||||
color: #6c757d !important;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: $crimson;
|
||||
color: $crimson !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $crimson;
|
||||
color: $crimson !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Override global link visited state for navbar
|
||||
&:visited {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
// Ensure dropdown toggles don't get crimson 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar link styles - readable but secondary to main content
|
||||
@@ -748,24 +768,39 @@ figcaption.quarto-float-caption-top {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// UX: Aggressive search positioning to eliminate all white space
|
||||
.navbar .navbar-nav .search-input,
|
||||
.navbar .aa-Form,
|
||||
.navbar-nav .aa-Form {
|
||||
margin: 0 !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;
|
||||
min-width: 44px !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;
|
||||
}
|
||||
|
||||
// Remove any container margins that create white space
|
||||
.navbar-nav:has(.aa-Form),
|
||||
.navbar .navbar-nav:last-child {
|
||||
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)
|
||||
@@ -1105,33 +1140,6 @@ figcaption.quarto-float-caption-top {
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar active states for Labs, Kits, PDF
|
||||
.navbar-nav .nav-link {
|
||||
color: #6c757d !important;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $crimson !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.active, &[aria-current="page"] {
|
||||
color: $crimson !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure navbar right side (Labs, Kits, PDF) get active states
|
||||
.navbar .navbar-nav .nav-item .nav-link {
|
||||
&:hover {
|
||||
color: $crimson !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $crimson !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
// Removed duplicate navbar rules - already handled earlier in file
|
||||
|
||||
|
||||
|
||||
@@ -101,7 +101,7 @@ website:
|
||||
href: https://github.com/harvard-edge/cs249r_book
|
||||
|
||||
favicon: assets/images/icons/favicon.png
|
||||
|
||||
|
||||
sidebar:
|
||||
- id: main-content
|
||||
title: "Main Content"
|
||||
@@ -307,7 +307,6 @@ website:
|
||||
|
||||
repo-url: https://github.com/harvard-edge/cs249r_book
|
||||
repo-branch: widget_quiz
|
||||
repo-actions: [edit, issue, source]
|
||||
|
||||
page-footer:
|
||||
left: |
|
||||
|
||||
Reference in New Issue
Block a user