bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Touch up considering BG in dark mode

Browse Source
This commit is contained in:
Andy Smith
2025-09-18 13:10:58 -05:00
parent 4484ca29b7
commit d8bdbc9a65
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+2
View File
@@ -325,6 +325,8 @@
--color-terminal-bg: var(--color-canvas);
--color-terminal-text-light: oklch(var(--lch-green-dark));
--color-golden: oklch(var(--lch-blue-light));
--color-golden: oklch(50% 0.178 95.7);
--color-golden: oklch(var(--lch-yellow-light));
--shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
app/assets/stylesheets/card-columns.css
+15 -4
View File
@@ -178,11 +178,13 @@
/* ------------------------------------------------------------------------ */
.cards--considering {
--gradient-opacity: 25%;
background-color: var(--color-canvas);
background-image: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--color-considering) 25%, transparent) 33%,
color-mix(in srgb, var(--color-considering) 25%, transparent) 66%,
color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 33%,
color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 66%,
transparent 100%);
padding-block-start: 2em;
@@ -206,12 +208,17 @@
padding-inline: var(--cards-gap);
}
@media (prefers-color-scheme: dark) {
--gradient-opacity: 15%;
}
.cards__decoration {
--gradient-opacity: 30%;
--size: 4.25em;
background-color: var(--color-canvas);
background-image: radial-gradient(ellipse at bottom,
color-mix(in srgb, var(--color-considering) 30%, transparent) 0%,
color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 0%,
transparent 70%);
block-size: var(--size);
inline-size: 100%;
@@ -219,10 +226,14 @@
position: absolute;
z-index: -1;
@media (prefers-color-scheme: dark) {
--gradient-opacity: 20%;
}
@supports(mask: radial-gradient(black)) {
&:before {
background: radial-gradient(ellipse at bottom,
color-mix(in srgb, var(--color-considering) 30%, transparent) 0%,
color-mix(in srgb, var(--color-considering) var(--gradient-opacity), transparent) 0%,
transparent 70%);
content: "";
inset: 0;