facelift: fix light-theme scrims/thumbs - :global() the data-theme overrides

Astro scopes compound selectors, so [data-theme=light] .hero__scrim inside a component style
block could never match html[data-theme] - the light theme rendered dark scrims (embossed
low-contrast copy). Wrap the theme prefix in :global() in Hero, ProjectCard and the blog index.
Light 'blueprint' hero now reads clean.
This commit is contained in:
2026-07-03 19:50:18 +10:00
parent 8a7ca88c40
commit 4e13bf596c
3 changed files with 4 additions and 4 deletions
+2 -2
View File
@@ -106,7 +106,7 @@ import Constellation from "./Constellation.astro";
rgba(9, 12, 20, 0.9) 100% rgba(9, 12, 20, 0.9) 100%
); );
} }
[data-theme="light"] .hero__scrim--x { :global([data-theme="light"]) .hero__scrim--x {
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(246, 248, 251, 0.96) 0%, rgba(246, 248, 251, 0.96) 0%,
@@ -115,7 +115,7 @@ import Constellation from "./Constellation.astro";
rgba(246, 248, 251, 0.5) 100% rgba(246, 248, 251, 0.5) 100%
); );
} }
[data-theme="light"] .hero__scrim--y { :global([data-theme="light"]) .hero__scrim--y {
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(246, 248, 251, 0.55) 0%, rgba(246, 248, 251, 0.55) 0%,
+1 -1
View File
@@ -65,7 +65,7 @@ const dossierNo = String(index).padStart(3, "0");
position: relative; position: relative;
border-bottom: 1px solid rgba(63, 186, 245, 0.12); border-bottom: 1px solid rgba(63, 186, 245, 0.12);
} }
[data-theme="light"] .dossier__thumb { :global([data-theme="light"]) .dossier__thumb {
background: var(--surface-2); background: var(--surface-2);
border-bottom-color: var(--border-accent); border-bottom-color: var(--border-accent);
} }
+1 -1
View File
@@ -193,7 +193,7 @@ const featuredSeries = series[featured.id];
z-index: 1; z-index: 1;
background: linear-gradient(90deg, var(--panel-solid) 0%, transparent 45%); background: linear-gradient(90deg, var(--panel-solid) 0%, transparent 45%);
} }
[data-theme="light"] .featured__art::before { :global([data-theme="light"]) .featured__art::before {
background: linear-gradient(90deg, var(--panel-solid) 0%, transparent 45%); background: linear-gradient(90deg, var(--panel-solid) 0%, transparent 45%);
opacity: 0.85; opacity: 0.85;
} }