From 8a811b87c3600787ae20ac6327507125d4283f5b Mon Sep 17 00:00:00 2001 From: rain Date: Fri, 6 Feb 2026 16:46:52 -0800 Subject: [PATCH] fix(readable-background): add a translucent background to main content (#23) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Explanation This makes the main content area readable. ![Screenshot 2026-02-03 at 12.10.01 PM.png](/attachments/5103926c-17a1-49b5-8594-2f985b6bb23d) ### Issue 22 ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [x] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [x] My contribution adds new code, and I have added tests to cover it. - [x] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [x] All new and existing tests pass locally with my changes. - [x] Code coverage remains at or above the configured threshold. ### Documentation I have made the following PR to update the documentation site by adding a translucent background to main content sections to improve text readability against the background artwork. ### Versioning Minor - My pull request introduces a new non-breaking feature. Co-authored-by: Rain Reviewed-on: https://git.nhcarrigan.com/nhcarrigan/docs/pulls/23 Co-authored-by: rain Co-committed-by: rain --- src/styles/style.css | 36 +++++++++++++++++++++++++----------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/src/styles/style.css b/src/styles/style.css index 0b277c9..b64939b 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,18 +1,19 @@ :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-purple-translucent: hsla(267, 40%, 17%, 0.597); + --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 +23,19 @@ --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 */ + + .page { + --background-color: var(--witch-purple-translucent); + } --primary-color: var(--witch-lavender); - --background-color: var(--witch-purple)ee; --sl-color-text-accent: var(--witch-lavender); /* Additional Starlight overrides for dark theme */ @@ -77,6 +85,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; @@ -106,7 +119,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; }