From e9cb852bcfcccdec948b85e1ac556e3c4d70098c Mon Sep 17 00:00:00 2001 From: Mark Story Date: Fri, 3 Oct 2025 23:07:05 -0400 Subject: [PATCH 1/4] Fix alignment of logo in sidebar Align the icon with the sidebar text. --- .vitepress/theme/custom.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css index c0e1b3552c..7f09be9838 100644 --- a/.vitepress/theme/custom.css +++ b/.vitepress/theme/custom.css @@ -50,6 +50,9 @@ .VPHero .VPImage { filter: drop-shadow(-2px 4px 15px rgba(64, 64, 64, 0.3)); } +.VPNavBar .VPImage { + margin-left: 8px; +} .dark .VPHero .VPImage { filter: drop-shadow(-2px 4px 15px rgba(211, 60, 67, 0.2)); From db85566a5b815ec21939fb445fb0a9b6ffc5fac7 Mon Sep 17 00:00:00 2001 From: Mark Story Date: Fri, 3 Oct 2025 23:15:50 -0400 Subject: [PATCH 2/4] Use css vars for red colors --- .vitepress/theme/custom.css | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css index 7f09be9838..e2d9185ce2 100644 --- a/.vitepress/theme/custom.css +++ b/.vitepress/theme/custom.css @@ -14,17 +14,21 @@ /* Theme Variables */ :root { + --cake-red-500: #d33c43; + --cake-red-700: #c8363d; + --cake-red-900: #b02e34; + --cake-color-link: #2d7ea4; - --cake-color-progress: #d33c43; + --cake-color-progress: var(--cake-red-500); --vp-font-family-base: "IBM Plex Sans", Helvetica, Arial, sans-serif; --vp-font-family-body: "IBM Plex Sans", Helvetica, Arial, sans-serif; - --vp-c-brand-1: #d33c43; - --vp-c-brand-2: #c8363d; - --vp-c-brand-3: #b02e34; + --vp-c-brand-1: var(--cake-red-500); + --vp-c-brand-2: var(--cake-red-700); + --vp-c-brand-3: var(--cake-red-900); --vp-c-brand-soft: rgba(211, 60, 67, 0.14); - --vp-c-red-1: #d33c43; - --vp-c-red-2: #c8363d; - --vp-c-red-3: #b02e34; + --vp-c-red-1: var(--cake-red-500); + --vp-c-red-2: var(--cake-red-700); + --vp-c-red-3: var(--cake-red-900); --vp-custom-block-tip-bg: #d9edf7; --vp-custom-block-note-bg: #fcf8e3; --vp-custom-block-warning-bg: #f2dede; @@ -35,8 +39,8 @@ /* Dark Theme */ .dark { --vp-c-brand-1: #ff6b6b; - --vp-c-brand-2: #d33c43; - --vp-c-brand-3: #c8363d; + --vp-c-brand-2: var(--cake-red-500); + --vp-c-brand-3: var(--cake-red-700); --vp-c-brand-soft: rgba(255, 107, 107, 0.16); --vp-c-bg: #1a1a1a; --vp-sidebar-bg-color: #0f0f0f; @@ -100,17 +104,14 @@ color: #e2c99c; } -.custom-block.warning .custom-block-title:before, -.custom-block.deprecated .custom-block-title:before { - color: #e0b9b9; -} - .custom-block.warning .custom-block-title:before { content: "W"; + color: #e0b9b9; } .custom-block.deprecated .custom-block-title:before { content: "H"; + color: #e0b9b9; } .custom-block.info .custom-block-title:before { From 43b3ab94ff7ae2a601e6c20c1024aa2c6ba0ba82 Mon Sep 17 00:00:00 2001 From: Mark Story Date: Fri, 3 Oct 2025 23:33:47 -0400 Subject: [PATCH 3/4] Make the header stretch across the layout. I think this looks better as there is a fixed bar at the top instead of columns. --- .vitepress/theme/custom.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css index e2d9185ce2..fe649f19c4 100644 --- a/.vitepress/theme/custom.css +++ b/.vitepress/theme/custom.css @@ -57,6 +57,17 @@ .VPNavBar .VPImage { margin-left: 8px; } +.VPNavBar .wrapper { + background: var(--vp-c-bg); + border-bottom: 2px solid var(--vp-c-border); +} +.VPNavBar .title { + border: 0; +} +/* Hide the divider line underneath the navbar on the right side */ +.VPNavBar .divider-line { + display: none; +} .dark .VPHero .VPImage { filter: drop-shadow(-2px 4px 15px rgba(211, 60, 67, 0.2)); From 2659cf35d57d7d718d1d87f2bb7f08f97c258ad8 Mon Sep 17 00:00:00 2001 From: Mark Story Date: Fri, 3 Oct 2025 23:47:16 -0400 Subject: [PATCH 4/4] Reduce border thickness --- .vitepress/theme/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css index fe649f19c4..33c2ef9d88 100644 --- a/.vitepress/theme/custom.css +++ b/.vitepress/theme/custom.css @@ -59,7 +59,7 @@ } .VPNavBar .wrapper { background: var(--vp-c-bg); - border-bottom: 2px solid var(--vp-c-border); + border-bottom: 1px solid var(--vp-c-border); } .VPNavBar .title { border: 0;