From bc86066f7d2faadd389c55434ba19f8d88d625e5 Mon Sep 17 00:00:00 2001 From: Rain Date: Tue, 3 Feb 2026 12:00:34 +0800 Subject: [PATCH 1/5] fix(bg-content): add a translucent background to main content --- src/styles/style.css | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/src/styles/style.css b/src/styles/style.css index 0b277c9..ff82508 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,18 +1,18 @@ :root { /* Witch color palette */ - --witch-purple: #2B1B3D; - --witch-plum: #44275A; - --witch-rose: #A8577E; - --witch-mauve: #D4A5C7; - --witch-lavender: #E8D5E8; - --witch-black: #0A0009; - --witch-silver: #C0C0C0; - --witch-moon: #F5F5F5; + --witch-purple: #2b1b3d; + --witch-plum: #44275a; + --witch-rose: #a8577e; + --witch-mauve: #d4a5c7; + --witch-lavender: #e8d5e8; + --witch-black: #0a0009; + --witch-silver: #c0c0c0; + --witch-moon: #f5f5f5; --witch-shadow: rgba(10, 0, 9, 0.7); /* Light theme uses lighter colors for background, darker for text */ --primary-color: var(--witch-purple); - --background-color: var(--witch-lavender)DC; + --background-color: var(--witch-lavender) DC; --sl-color-text-accent: var(--witch-purple); /* Additional Starlight overrides */ @@ -22,12 +22,16 @@ --sl-color-gray-4: var(--witch-rose); --sl-color-gray-5: var(--witch-plum); --sl-color-gray-6: var(--witch-purple); + + /* Translucent background */ + --content-bg: rgba(181, 185, 187, 0.543); + --content-blur: 8px; } html[data-theme="dark"] { /* Dark theme uses darker colors for background, lighter for text */ --primary-color: var(--witch-lavender); - --background-color: var(--witch-purple)ee; + --background-color: var(--witch-purple) ee; --sl-color-text-accent: var(--witch-lavender); /* Additional Starlight overrides for dark theme */ @@ -67,6 +71,16 @@ html[data-theme="dark"] { color: var(--primary-color); } +.right-sidebar-panel { + background: var(--content-bg); + backdrop-filter: var(--content-blur); +} + +.content-panel { + background: var(--content-bg); + backdrop-filter: var(--content-blur); +} + h1, h2, h3, @@ -106,7 +120,8 @@ footer > div > p { color: var(--primary-color) !important; } -starlight-theme-select, starlight-theme-select > label { +starlight-theme-select, +starlight-theme-select > label { color: var(--primary-color) !important; } @@ -116,6 +131,8 @@ starlight-theme-select, starlight-theme-select > label { .sidebar-content { color: var(--primary-color) !important; + background: var(--content-bg); + backdrop-filter: var(--content-blur); } .link-title { -- 2.52.0 From d2972901bf3f6899b8a087e24647272e860e3860 Mon Sep 17 00:00:00 2001 From: Rain Date: Tue, 3 Feb 2026 12:45:20 +0800 Subject: [PATCH 2/5] feat(page-bg): set translucent background --- src/styles/style.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/styles/style.css b/src/styles/style.css index ff82508..8b10feb 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -71,15 +71,10 @@ html[data-theme="dark"] { color: var(--primary-color); } -.right-sidebar-panel { +/* .right-sidebar-panel { background: var(--content-bg); backdrop-filter: var(--content-blur); -} - -.content-panel { - background: var(--content-bg); - backdrop-filter: var(--content-blur); -} +} */ h1, h2, @@ -91,6 +86,11 @@ a { color: var(--primary-color) !important; } +.page { + background: var(--content-bg); + backdrop-filter: var(--content-blur); +} + a[aria-current="page"] { color: var(--background-color) !important; background-color: var(--witch-rose) !important; @@ -131,8 +131,6 @@ starlight-theme-select > label { .sidebar-content { color: var(--primary-color) !important; - background: var(--content-bg); - backdrop-filter: var(--content-blur); } .link-title { -- 2.52.0 From 9b8cf6d667132cfef0d77398ce3bac0bc5a69c34 Mon Sep 17 00:00:00 2001 From: Rain Date: Tue, 3 Feb 2026 12:46:08 +0800 Subject: [PATCH 3/5] chore: clean up comments --- src/styles/style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/styles/style.css b/src/styles/style.css index 8b10feb..8ee3a62 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -71,11 +71,6 @@ html[data-theme="dark"] { color: var(--primary-color); } -/* .right-sidebar-panel { - background: var(--content-bg); - backdrop-filter: var(--content-blur); -} */ - h1, h2, h3, -- 2.52.0 From 7ed077605831c295e13530780b185210e4b8b502 Mon Sep 17 00:00:00 2001 From: Rain Date: Tue, 3 Feb 2026 12:57:29 +0800 Subject: [PATCH 4/5] feat(dark-theme): set translucent background --- src/styles/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/style.css b/src/styles/style.css index 8ee3a62..c9bad85 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,6 +1,7 @@ :root { /* Witch color palette */ --witch-purple: #2b1b3d; + --witch-purple-translucent: hsla(267, 40%, 17%, 0.423); --witch-plum: #44275a; --witch-rose: #a8577e; --witch-mauve: #d4a5c7; @@ -31,7 +32,7 @@ html[data-theme="dark"] { /* Dark theme uses darker colors for background, lighter for text */ --primary-color: var(--witch-lavender); - --background-color: var(--witch-purple) ee; + --background-color: var(--witch-purple-translucent); --sl-color-text-accent: var(--witch-lavender); /* Additional Starlight overrides for dark theme */ -- 2.52.0 From da34c24d3c0173f512836d91806cc49d30626f95 Mon Sep 17 00:00:00 2001 From: Rain Date: Tue, 3 Feb 2026 13:06:45 +0800 Subject: [PATCH 5/5] feat(dark-theme): set transulent background to the entire page --- src/styles/style.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/style.css b/src/styles/style.css index c9bad85..b64939b 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,7 +1,7 @@ :root { /* Witch color palette */ --witch-purple: #2b1b3d; - --witch-purple-translucent: hsla(267, 40%, 17%, 0.423); + --witch-purple-translucent: hsla(267, 40%, 17%, 0.597); --witch-plum: #44275a; --witch-rose: #a8577e; --witch-mauve: #d4a5c7; @@ -31,8 +31,11 @@ html[data-theme="dark"] { /* Dark theme uses darker colors for background, lighter for text */ + + .page { + --background-color: var(--witch-purple-translucent); + } --primary-color: var(--witch-lavender); - --background-color: var(--witch-purple-translucent); --sl-color-text-accent: var(--witch-lavender); /* Additional Starlight overrides for dark theme */ -- 2.52.0