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
+28 -11
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bc86066f7d - Show all commits
src/styles/style.css
+28 -11
View File
@@ -1,18 +1,18 @@
:root { :root {
/* Witch color palette */ /* Witch color palette */
--witch-purple: #2B1B3D; --witch-purple: #2b1b3d;
--witch-plum: #44275A; --witch-plum: #44275a;
--witch-rose: #A8577E; --witch-rose: #a8577e;
--witch-mauve: #D4A5C7; --witch-mauve: #d4a5c7;
--witch-lavender: #E8D5E8; --witch-lavender: #e8d5e8;
--witch-black: #0A0009; --witch-black: #0a0009;
--witch-silver: #C0C0C0; --witch-silver: #c0c0c0;
--witch-moon: #F5F5F5; --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 */
--primary-color: var(--witch-purple); --primary-color: var(--witch-purple);
--background-color: var(--witch-lavender)DC; --background-color: var(--witch-lavender) DC;
--sl-color-text-accent: var(--witch-purple); --sl-color-text-accent: var(--witch-purple);
/* Additional Starlight overrides */ /* Additional Starlight overrides */
@@ -22,12 +22,16 @@
--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 */
--primary-color: var(--witch-lavender); --primary-color: var(--witch-lavender);
--background-color: var(--witch-purple)ee; --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 */
@@ -67,6 +71,16 @@ html[data-theme="dark"] {
color: var(--primary-color); 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, h1,
h2, h2,
h3, h3,
@@ -106,7 +120,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;
} }
@@ -116,6 +131,8 @@ starlight-theme-select, starlight-theme-select > label {
.sidebar-content { .sidebar-content {
color: var(--primary-color) !important; color: var(--primary-color) !important;
background: var(--content-bg);
backdrop-filter: var(--content-blur);
} }
.link-title { .link-title {