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/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/Footer/styles.module.css b/src/theme/Footer/styles.module.css index 9934e7c63e..8e3d72f85a 100644 --- a/src/theme/Footer/styles.module.css +++ b/src/theme/Footer/styles.module.css @@ -8,28 +8,6 @@ -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; -} - -/* 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: ''; @@ -51,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 { @@ -89,7 +65,7 @@ display: flex; align-items: center; gap: 2rem; - font-size: 1rem; + font-size: 15px; font-family: var(--ifm-font-family-base); } @@ -133,14 +109,31 @@ pointer-events: none; } -@media (max-width: 768px) { +/* Below 1060px stack vertically: links → Give feedback → social icons */ +@media (max-width: 1060px) { + .footer { + --ifm-footer-padding-horizontal: 0px; + } + .container { flex-direction: column; - gap: 1.5rem; + align-items: flex-start; + gap: 1rem; + 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: 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; } } 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);