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:
@@ -106,7 +106,7 @@ import Constellation from "./Constellation.astro";
|
||||
rgba(9, 12, 20, 0.9) 100%
|
||||
);
|
||||
}
|
||||
[data-theme="light"] .hero__scrim--x {
|
||||
:global([data-theme="light"]) .hero__scrim--x {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(246, 248, 251, 0.96) 0%,
|
||||
@@ -115,7 +115,7 @@ import Constellation from "./Constellation.astro";
|
||||
rgba(246, 248, 251, 0.5) 100%
|
||||
);
|
||||
}
|
||||
[data-theme="light"] .hero__scrim--y {
|
||||
:global([data-theme="light"]) .hero__scrim--y {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(246, 248, 251, 0.55) 0%,
|
||||
|
||||
@@ -65,7 +65,7 @@ const dossierNo = String(index).padStart(3, "0");
|
||||
position: relative;
|
||||
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);
|
||||
border-bottom-color: var(--border-accent);
|
||||
}
|
||||
|
||||
@@ -193,7 +193,7 @@ const featuredSeries = series[featured.id];
|
||||
z-index: 1;
|
||||
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%);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user