nhcarrigan/docs
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 2 Pull Requests 6 Actions Releases 1 Activity

fix(readable-background): add a translucent background to main content #23

Merged
naomi merged 5 commits from :fix/issue-22-readable-background into main 2026-02-06 16:46:52 -08:00
Conversation 2 Commits 5 Files Changed 1
+25 -11
1 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/style.css
+24 -10
View File
@@ -1,13 +1,14 @@
:root { :root {
/* Witch color palette */ /* Witch color palette */
--witch-purple: #2B1B3D; --witch-purple: #2b1b3d;
--witch-plum: #44275A; --witch-purple-translucent: hsla(267, 40%, 17%, 0.597);
--witch-rose: #A8577E; --witch-plum: #44275a;
--witch-mauve: #D4A5C7; --witch-rose: #a8577e;
--witch-lavender: #E8D5E8; --witch-mauve: #d4a5c7;
--witch-black: #0A0009; --witch-lavender: #e8d5e8;
--witch-silver: #C0C0C0; --witch-black: #0a0009;
--witch-moon: #F5F5F5; --witch-silver: #c0c0c0;
--witch-moon: #f5f5f5;
--witch-shadow: rgba(10, 0, 9, 0.7); --witch-shadow: rgba(10, 0, 9, 0.7);
/* Light theme uses lighter colors for background, darker for text */ /* Light theme uses lighter colors for background, darker for text */
@@ -22,12 +23,19 @@
--sl-color-gray-4: var(--witch-rose); --sl-color-gray-4: var(--witch-rose);
--sl-color-gray-5: var(--witch-plum); --sl-color-gray-5: var(--witch-plum);
--sl-color-gray-6: var(--witch-purple); --sl-color-gray-6: var(--witch-purple);
/* Translucent background */
--content-bg: rgba(181, 185, 187, 0.543);
--content-blur: 8px;
} }
html[data-theme="dark"] { html[data-theme="dark"] {
/* Dark theme uses darker colors for background, lighter for text */ /* Dark theme uses darker colors for background, lighter for text */
.page {
--background-color: var(--witch-purple-translucent);
}
--primary-color: var(--witch-lavender); --primary-color: var(--witch-lavender);
--background-color: var(--witch-purple)ee;
--sl-color-text-accent: var(--witch-lavender); --sl-color-text-accent: var(--witch-lavender);
/* Additional Starlight overrides for dark theme */ /* Additional Starlight overrides for dark theme */
@@ -77,6 +85,11 @@ a {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
.page {
background: var(--content-bg);
backdrop-filter: var(--content-blur);
}
a[aria-current="page"] { a[aria-current="page"] {
color: var(--background-color) !important; color: var(--background-color) !important;
background-color: var(--witch-rose) !important; background-color: var(--witch-rose) !important;
@@ -106,7 +119,8 @@ footer > div > p {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }
starlight-theme-select, starlight-theme-select > label { starlight-theme-select,
starlight-theme-select > label {
color: var(--primary-color) !important; color: var(--primary-color) !important;
} }