Skip to content

Fixes navbar overflow on mobile. #421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
johnnymatthews wants to merge 1 commit into
base: main
Choose a base branch
from
+25 −13
Open

Fixes navbar overflow on mobile. #421

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 25 additions & 13 deletions sass/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
// Shinzo Developer Portal - ported theme (light mode only).
// Ported from docs/src/css/custom.scss + docs/src/theme/Footer/styles.module.css.
// Infima is not present in Zola, so layout primitives that Docusaurus relied on
// (navbar bar, sidebar grid, content column, breadcrumbs, admonitions, code
// blocks) are reimplemented here using the original brand variables.

@import "fonts";

/* Theme variables
Light defaults live on :root; the `[data-theme="dark"]` block below
overrides them. A tiny inline script in <head> sets data-theme before
paint (no FOUC), and the toggle button lets the user override the
system preference (persisted in localStorage). */
Light defaults live on :root; the `[data-theme="dark"]` block below overrides them. A tiny inline script in <head> sets data-theme before paint (no FOUC), and the toggle button lets the user override the system preference (persisted in localStorage). */

:root {
--background: #fff;
--foreground: #353535;
Expand Down Expand Up @@ -322,9 +314,7 @@ p {
display: block;
}

// Theme-aware logo: show the matching variant. The dark (-w.svg) mark is
// hidden by default and revealed only when [data-theme="dark"] is on :root.
// Uses img.logo-* selectors (specificity 0,1,1) to override .navbar__logo img.
// Theme-aware logo: show the matching variant. The dark (-w.svg) mark is hidden by default and revealed only when [data-theme="dark"] is on :root. Uses img.logo-* selectors (specificity 0,1,1) to override .navbar__logo img.
img.logo-dark {
display: none;
}
Expand Down Expand Up @@ -1504,6 +1494,28 @@ body.mobile-menu-open {
.navbar__hamburger {
display: flex;
}
// Allow the right-hand cluster to shrink so the row never overflows;
// desktop sets flex:0 0 auto which would otherwise force overflow.
.navbar__items--right {
flex: 1 1 auto;
min-width: 0;
}
.search-box {
flex: 1 1 auto;
min-width: 0;
}
// Fluid input: fill whatever space is available instead of forcing 12rem.
.search-input {
width: 100%;
max-width: 12rem;
}
}

// Trim the logo on phones so the topbar row breathes more easily.
@media (max-width: 480px) {
.navbar__logo img {
max-width: 100px;
}
}

// The drawer is only ever shown on mobile; keep it out of the way on desktop
Expand Down
Loading