From aedb9399ddbe0df2b4d1430def34104507d00a9c Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Thu, 7 May 2026 23:52:38 -0400 Subject: [PATCH 1/5] Fix navbar overflow and remove light-mode card hover border * Logo: 41x297 / 46x334 was overflowing the 37px navbar height, pushing the page heading into the secondary nav row. Reduced to 32x232 so the wordmark fits comfortably with breathing room. Native 7.25:1 ratio preserved for crisp rendering. * DocCard hover (light mode only): drop the border so only the white fill + shadow remain. Dark mode keeps the brand blue outline since the dark background needs more contrast to read the affordance. Co-Authored-By: Claude Opus 4.7 --- src/theme/DocCard/styles.module.css | 2 +- src/theme/Navbar/Logo/styles.module.css | 11 ++--------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css index 4127a24a93..88c2b27297 100644 --- a/src/theme/DocCard/styles.module.css +++ b/src/theme/DocCard/styles.module.css @@ -19,7 +19,7 @@ .cardContainer:hover { background-color: var(--neo-surfaces-white); - border-color: var(--brand-digital-blue); + border-color: transparent; box-shadow: var(--neo-shadow-card); } diff --git a/src/theme/Navbar/Logo/styles.module.css b/src/theme/Navbar/Logo/styles.module.css index a6f39cd7bb..b4ac8559ce 100644 --- a/src/theme/Navbar/Logo/styles.module.css +++ b/src/theme/Navbar/Logo/styles.module.css @@ -72,20 +72,13 @@ keeps the edges crisp until the new asset lands. */ .wordmarkImage { display: block; - height: 41px; - width: 297px; + height: 32px; + width: 232px; flex-shrink: 0; color: var(--ifm-navbar-link-color); shape-rendering: geometricPrecision; } -@media (min-width: 1280px) { - .wordmarkImage { - height: 46px; - width: 334px; - } -} - /* Dark mode logo colors */ :global(html[data-theme='dark']) .symbolImage { color: var(--neo-surfaces-white); From ec3d243c524b50a79233f0b82e523cf6fa91cd5d Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Fri, 8 May 2026 12:18:23 -0400 Subject: [PATCH 2/5] Responsive footer + narrow-width spacing fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Removed the desktop --ifm-navbar-height redefinition that was double-counting the secondary nav (=85px) and then formulas added another 48px on top, pushing content too far down on category pages and creating sidebar/header overlap. * At <=996px: zero out --ifm-secondary-nav-height (no secondary nav rendered on narrow), and pin --ifm-navbar-padding-horizontal and --ifm-spacing-horizontal both to 20px so the hamburger menu, breadcrumbs, and article column share a single 20px left edge. * Footer no longer sticky to viewport bottom on top-level category pages — flows as the last block element so it never sits on top of article content. * Footer at <=1060px: stacks left-aligned in this order — links (copyright + Terms/Privacy/Contact us/Licensing) → Give feedback button → social icons. Container is full width with a 20px left padding to match the article column above. Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 17 ++++++++--- src/theme/Footer/styles.module.css | 49 ++++++++++++++++++++++++------ 2 files changed, 51 insertions(+), 15 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 8ad12c49aa..2b9fdff3c4 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -373,6 +373,18 @@ html { min-height: calc(100vh - var(--ifm-navbar-height) - var(--ifm-secondary-nav-height) - var(--ifm-announcement-bar-height)); } +/* On narrow widths the secondary nav is replaced by the hamburger + menu, so its 48px shouldn't be reserved as empty space above the + breadcrumbs. Zero it out under 997px. Also align hamburger and + article column to a shared 20px left edge. */ +@media (max-width: 996px) { + :root { + --ifm-secondary-nav-height: 0px; + --ifm-navbar-padding-horizontal: 20px; + --ifm-spacing-horizontal: 20px; + } +} + /* Ensure sidebar container has correct height calculation */ .theme-doc-sidebar-container { position: sticky; @@ -519,11 +531,6 @@ html[data-theme='dark'] [class^=docMainContainer_] .card { } @media(min-width: 997px) { - /* On desktop, account for secondary nav in total navbar height */ - :root { - --ifm-navbar-height: calc(37px + var(--ifm-secondary-nav-height)); - } - .theme-doc-sidebar-container { --ifm-toc-border-color: var(--ifm-section-divider-color); } diff --git a/src/theme/Footer/styles.module.css b/src/theme/Footer/styles.module.css index 9934e7c63e..b5b5c35e0e 100644 --- a/src/theme/Footer/styles.module.css +++ b/src/theme/Footer/styles.module.css @@ -8,12 +8,8 @@ -webkit-backdrop-filter: blur(12px); } -/* Sticky to viewport bottom only on top-level category index pages */ -:global(body:has([class*='topLevelCategory'])) .footer { - position: sticky; - bottom: 0; - z-index: 50; -} +/* Footer flows as the last element in the page — no sticky/overlay + behavior so it never sits on top of article content. */ /* On desktop docs pages, scope the footer to the main content column only */ @media (min-width: 997px) { @@ -133,14 +129,47 @@ pointer-events: none; } -@media (max-width: 768px) { +/* Below 1060px the wide single-row layout starts wrapping on individual + links ("Contact us" → 2 lines). Stack instead: Give feedback → social + icons → links. */ +@media (max-width: 1060px) { + .footer { + --ifm-footer-padding-horizontal: 0px; + } + .container { flex-direction: column; - gap: 1.5rem; + align-items: flex-start; + gap: 1rem; + transform: none; + width: 100%; + margin: 0; + padding: 0 20px; } .links { - flex-wrap: wrap; - justify-content: center; + order: 1; + flex-direction: column; + align-items: flex-start; + flex-wrap: nowrap; + gap: 0.5rem; + } + + .actions { + order: 2; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + .social { + /* Social row aligns with the Give feedback button above it */ + margin: 0; + } +} + +@media (max-width: 768px) { + .container { + gap: 1.5rem; } } From d13595c82f5be1f179fb0d4af11c201dba8481fb Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Fri, 8 May 2026 15:44:05 -0400 Subject: [PATCH 3/5] Footer responsive cleanup + navbar search/toggle spacing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Footer: removed docs-page-only scoping (margin-left: 307px under html.docs-wrapper) so the home and docs footer share one ruleset. Container is full-width, stacks vertically below 1060px (links → Give feedback → social icons, left-aligned with 20px viewport padding). * Navbar: search and color-mode toggle were touching at narrow widths because NavbarSearch renders a div with the CSS-module class .navbarSearchContainer (not .navbar__search). Added .navbarCenter gap: 20px and an explicit margin-right: 24px on [class*='navbarSearchContainer'] inside .mobileControls so spacing applies in both layouts. Co-Authored-By: Claude Opus 4.7 --- src/theme/Footer/styles.module.css | 50 +++------------------- src/theme/Navbar/Content/styles.module.css | 11 ++++- 2 files changed, 16 insertions(+), 45 deletions(-) diff --git a/src/theme/Footer/styles.module.css b/src/theme/Footer/styles.module.css index b5b5c35e0e..8e3d72f85a 100644 --- a/src/theme/Footer/styles.module.css +++ b/src/theme/Footer/styles.module.css @@ -8,24 +8,6 @@ -webkit-backdrop-filter: blur(12px); } -/* Footer flows as the last element in the page — no sticky/overlay - behavior so it never sits on top of article content. */ - -/* On desktop docs pages, scope the footer to the main content column only */ -@media (min-width: 997px) { - :global(html.docs-wrapper) .footer { - margin-left: 307px; - } -} - -.actions { - display: flex; - align-items: center; - gap: 1.5rem; -} - - - /* Blurred gradient image, faded from top (transparent) to bottom (visible) */ .footer::before { content: ''; @@ -47,16 +29,14 @@ align-items: center; justify-content: space-between; gap: 2rem; - width: 83%; - margin: 0 auto; + width: 100%; padding: 0 var(--neo-spacing_3_1_4); - transform: translateX(-120px); } -@media (max-width: 996px) { - .container { - transform: none; - } +.actions { + display: flex; + align-items: center; + gap: 1.5rem; } .social { @@ -85,7 +65,7 @@ display: flex; align-items: center; gap: 2rem; - font-size: 1rem; + font-size: 15px; font-family: var(--ifm-font-family-base); } @@ -129,9 +109,7 @@ pointer-events: none; } -/* Below 1060px the wide single-row layout starts wrapping on individual - links ("Contact us" → 2 lines). Stack instead: Give feedback → social - icons → links. */ +/* Below 1060px stack vertically: links → Give feedback → social icons */ @media (max-width: 1060px) { .footer { --ifm-footer-padding-horizontal: 0px; @@ -141,9 +119,6 @@ flex-direction: column; align-items: flex-start; gap: 1rem; - transform: none; - width: 100%; - margin: 0; padding: 0 20px; } @@ -159,17 +134,6 @@ order: 2; flex-direction: column; align-items: flex-start; - gap: 0.75rem; - } - - .social { - /* Social row aligns with the Give feedback button above it */ - margin: 0; - } -} - -@media (max-width: 768px) { - .container { gap: 1.5rem; } } diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css index 74071e4635..87f29dc1eb 100644 --- a/src/theme/Navbar/Content/styles.module.css +++ b/src/theme/Navbar/Content/styles.module.css @@ -60,7 +60,7 @@ display: flex; align-items: center; justify-content: center; - gap: 0; + gap: 20px; } /* Desktop: Center search bar absolutely */ @@ -88,7 +88,14 @@ .mobileControls { display: flex; align-items: center; - gap: var(--neo-spacing_2); + gap: 24px; + } + + /* NavbarSearch renders a div with [class*='navbarSearchContainer'] — + give it explicit right margin so the search icon never collides + with the color-mode toggle next to it. */ + .mobileControls :global([class*='navbarSearchContainer']) { + margin-right: 24px; } } From dc6f9616023c4f86cacd313259bee765d72bb38c Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Fri, 8 May 2026 16:37:02 -0400 Subject: [PATCH 4/5] Restore desktop --ifm-navbar-height redefinition for header breathing room @mike-solomon flagged that the announcement banner and primary navbar looked smashed together on this branch vs production. I had removed the desktop @media rule that redefined --ifm-navbar-height as calc(37px + secondary-nav-height), thinking the +secondary-nav in the explicit formulas was a double-count bug. Turns out the extra ~48px is intentional breathing room between the navbar stack and the article column. Restored the redefinition with a comment explaining why the duplication is on purpose. Mobile (<997px) still gets --ifm-secondary-nav-height: 0px so the hamburger / breadcrumbs sit close together. Co-Authored-By: Claude Opus 4.7 --- src/css/custom.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/css/custom.css b/src/css/custom.css index 2b9fdff3c4..9309ca6b2c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -531,6 +531,15 @@ html[data-theme='dark'] [class^=docMainContainer_] .card { } @media(min-width: 997px) { + /* On desktop, redefine --ifm-navbar-height to include the secondary + nav. This is what Docusaurus's internal layout (e.g. TOC top + offset) uses to clear the visible navbar stack. The explicit + formulas below intentionally add secondary-nav-height again to + reserve breathing room between the navbar and content. */ + :root { + --ifm-navbar-height: calc(37px + var(--ifm-secondary-nav-height)); + } + .theme-doc-sidebar-container { --ifm-toc-border-color: var(--ifm-section-divider-color); } From 0667139049b75df193e7a8c797f6e3c040140de2 Mon Sep 17 00:00:00 2001 From: Lindsay Auchinachie Date: Fri, 8 May 2026 16:40:59 -0400 Subject: [PATCH 5/5] Revert "Restore desktop --ifm-navbar-height redefinition for header breathing room" This reverts commit dc6f9616023c4f86cacd313259bee765d72bb38c. --- src/css/custom.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 9309ca6b2c..2b9fdff3c4 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -531,15 +531,6 @@ html[data-theme='dark'] [class^=docMainContainer_] .card { } @media(min-width: 997px) { - /* On desktop, redefine --ifm-navbar-height to include the secondary - nav. This is what Docusaurus's internal layout (e.g. TOC top - offset) uses to clear the visible navbar stack. The explicit - formulas below intentionally add secondary-nav-height again to - reserve breathing room between the navbar and content. */ - :root { - --ifm-navbar-height: calc(37px + var(--ifm-secondary-nav-height)); - } - .theme-doc-sidebar-container { --ifm-toc-border-color: var(--ifm-section-divider-color); }