From 1d731cc8295f66a405f17aa98202613d477555bc Mon Sep 17 00:00:00 2001 From: The-Best-Codes Date: Wed, 9 Jul 2025 10:48:12 -0500 Subject: [PATCH 1/6] fix: (temporary) testing standard docasauras breakpoint --- documentation/src/css/custom.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index e60a49280cfc..340596bd18f3 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -337,8 +337,8 @@ html[data-theme="light"] .hide-in-light { margin-left: 8px !important; } -/* Force hamburger menu to appear earlier to prevent navbar overlap with smooth transitions */ -@media (max-width: 1450px) { +/* Force hamburger menu to appear at standard mobile breakpoint */ +@media (max-width: 996px) { .navbar__item { opacity: 0; transform: translateX(-10px); @@ -359,7 +359,7 @@ html[data-theme="light"] .hide-in-light { } /* Ensure navbar items are visible above the breakpoint */ -@media (min-width: 1451px) { +@media (min-width: 997px) { .navbar__item { opacity: 1; transform: translateX(0); From cf71d49f4432221c94d63302ff8b9b0eb28047d5 Mon Sep 17 00:00:00 2001 From: The-Best-Codes Date: Wed, 9 Jul 2025 10:59:58 -0500 Subject: [PATCH 2/6] revert... --- documentation/src/css/custom.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index 340596bd18f3..4729f2a46d2d 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -337,8 +337,8 @@ html[data-theme="light"] .hide-in-light { margin-left: 8px !important; } -/* Force hamburger menu to appear at standard mobile breakpoint */ -@media (max-width: 996px) { +/* Force hamburger menu to appear earlier to prevent navbar overlap with smooth transitions */ +@media (max-width: 1450px) { .navbar__item { opacity: 0; transform: translateX(-10px); @@ -346,27 +346,27 @@ html[data-theme="light"] .hide-in-light { /* Use visibility instead of display for smoother transitions */ visibility: hidden; } - + .navbar__toggle { opacity: 1 !important; transform: scale(1) !important; display: inherit !important; } - + .navbar-sidebar { display: block; } } /* Ensure navbar items are visible above the breakpoint */ -@media (min-width: 997px) { +@media (min-width: 1451px) { .navbar__item { opacity: 1; transform: translateX(0); pointer-events: auto; visibility: visible; } - + .navbar__toggle { opacity: 0; transform: scale(0.8); @@ -378,4 +378,3 @@ html[data-theme="light"] .hide-in-light { object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */ border-radius: 8px; /* Optional: rounded corners */ } - From d5cbe65893bba1eea154bf6c395fce2e42049f05 Mon Sep 17 00:00:00 2001 From: The-Best-Codes Date: Wed, 9 Jul 2025 11:12:15 -0500 Subject: [PATCH 3/6] reduce padding --- documentation/src/css/custom.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index 4729f2a46d2d..f8a05af1324a 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -362,6 +362,8 @@ html[data-theme="light"] .hide-in-light { @media (min-width: 1451px) { .navbar__item { opacity: 1; + padding-left: 16px; + padding-right: 16px; transform: translateX(0); pointer-events: auto; visibility: visible; From cd7b77c0b688fb2c9b38d280f308e93b5b9e317b Mon Sep 17 00:00:00 2001 From: The-Best-Codes Date: Wed, 9 Jul 2025 16:10:02 -0500 Subject: [PATCH 4/6] adjust breakpoints --- documentation/src/css/custom.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index f8a05af1324a..51d233b4c3bb 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -338,7 +338,7 @@ html[data-theme="light"] .hide-in-light { } /* Force hamburger menu to appear earlier to prevent navbar overlap with smooth transitions */ -@media (max-width: 1450px) { +@media (max-width: 996px) { .navbar__item { opacity: 0; transform: translateX(-10px); @@ -358,8 +358,15 @@ html[data-theme="light"] .hide-in-light { } } +/* Shrink inkeep search box some on smaller screens */ +@media (max-width: 1450px) { + #inkeep { + max-width: 180px; + } +} + /* Ensure navbar items are visible above the breakpoint */ -@media (min-width: 1451px) { +@media (min-width: 997px) { .navbar__item { opacity: 1; padding-left: 16px; From e630ea86e519583cba8b4349465d5ee749a8e253 Mon Sep 17 00:00:00 2001 From: The-Best-Codes Date: Wed, 9 Jul 2025 16:23:48 -0500 Subject: [PATCH 5/6] fix: remove margins from logo and brand text (which doesnt exist) --- documentation/src/css/custom.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index 51d233b4c3bb..44eb966aa8af 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -314,6 +314,19 @@ html[data-theme="light"] .hide-in-light { transform: scale(0.8); } +/* + * No margin is needed for the branding right now, + * since there is padding on the items and no brand text. + * If those things change, you may want to revert this. +*/ +.navbar__brand { + margin-right: 0px; +} + +.navbar__logo { + margin-right: 0px; +} + /* Dropdown styles */ .navbar__link--active { color: var(--text-prominent); From 009473402b18a1cbcd71cb4ac8c95b263093b27e Mon Sep 17 00:00:00 2001 From: The-Best-Codes Date: Wed, 9 Jul 2025 17:23:55 -0500 Subject: [PATCH 6/6] fix padding --- documentation/src/css/custom.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/src/css/custom.css b/documentation/src/css/custom.css index 44eb966aa8af..b43a493eccb1 100644 --- a/documentation/src/css/custom.css +++ b/documentation/src/css/custom.css @@ -306,6 +306,8 @@ html[data-theme="light"] .hide-in-light { display: flex; align-items: center; transition: opacity 0.3s ease, transform 0.3s ease; + padding-left: 0.75rem; + padding-right: 0.75rem; } .navbar__toggle { @@ -382,8 +384,6 @@ html[data-theme="light"] .hide-in-light { @media (min-width: 997px) { .navbar__item { opacity: 1; - padding-left: 16px; - padding-right: 16px; transform: translateX(0); pointer-events: auto; visibility: visible;