rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

gradients

Browse source
This commit is contained in:
Rhiannon Morris 2023-12-28 13:10:33 +01:00
parent 2d5b9aa618
commit 45bc1a60b6
1 changed files with 27 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
base.css
View file

@ -2,6 +2,7 @@
@import url(fonts/noto/noto.css); @import url(fonts/noto/noto.css);
:root { :root {
/*
--gradient: --gradient:
linear-gradient(135deg, linear-gradient(135deg,
hsl(42deg, 92%, 70%), hsl(42deg, 92%, 70%),
@ -11,47 +12,26 @@
hsl(195deg, 100%, 67%), hsl(195deg, 100%, 67%),
hsl(155deg, 70%, 62%) hsl(155deg, 70%, 62%)
); );
*/
--gradient:
linear-gradient(135deg,
oklch(93% 0.16 86),
oklch(84% 0.17 15),
oklch(78% 0.18 304),
oklch(78% 0.18 233),
oklch(78% 0.18 162)
);
--size: 15pt; --size: 15pt;
--weight: 600; --weight: 600;
--link-color: hsl(196deg, 100%, 85%); --link-color: hsl(196deg, 100%, 85%);
--hover-color: hsl(50deg, 100%, 82%); --hover-color: hsl(50deg, 100%, 82%);
/* for seamonkey ☺ */
background:
url(media/bg.png)
top center fixed,
linear-gradient(135deg,
hsl(42deg, 92%, 70%),
hsl(348deg, 92%, 70%),
hsl(334deg, 100%, 80%),
hsl(234deg, 100%, 76%),
hsl(195deg, 100%, 67%),
hsl(155deg, 70%, 62%)
) fixed;
background:
-webkit-image-set(url(media/bg.png) 1x,
url(media/bg_2x.png) 2x)
top center fixed,
linear-gradient(135deg,
hsl(42deg, 92%, 70%),
hsl(348deg, 92%, 70%),
hsl(334deg, 100%, 80%),
hsl(234deg, 100%, 76%),
hsl(195deg, 100%, 67%),
hsl(155deg, 70%, 62%)
) fixed;
background: background:
image-set(url(media/bg.png) 1x, image-set(url(media/bg.png) 1x,
url(media/bg_2x.png) 2x) url(media/bg_2x.png) 2x)
top center fixed, top center fixed,
linear-gradient(135deg, var(--gradient) fixed;
hsl(42deg, 92%, 70%),
hsl(348deg, 92%, 70%),
hsl(334deg, 100%, 80%),
hsl(234deg, 100%, 76%),
hsl(195deg, 100%, 67%),
hsl(155deg, 70%, 62%)
) fixed;
background-blend-mode: overlay; background-blend-mode: overlay;
font-family: 'Muller'; font-family: 'Muller';
@ -69,7 +49,8 @@
} }
main { main {
background: hsla(316deg, 100%, 95%, 45%); --default-bg: hsla(316deg, 100%, 95%, 45%);
background: var(--default-bg);
border-radius: 2em; border-radius: 2em;
--glow-col: hsla(318deg, 100%, 98%, 100%); --glow-col: hsla(318deg, 100%, 98%, 100%);
border: 1px solid var(--glow-col); border: 1px solid var(--glow-col);
@ -180,9 +161,9 @@ rt::after { margin-right: -1.25em; }
} }
/* ~the "not actually supported by browsers yet" zone~ */
@media (prefers-contrast: high), (prefers-color-scheme: dark) { @media (prefers-contrast: high), (prefers-color-scheme: dark) {
:root { :root {
/*
--gradient: --gradient:
linear-gradient(135deg, linear-gradient(135deg,
hsl(42deg, 56%, 55%), hsl(42deg, 56%, 55%),
@ -192,21 +173,27 @@ rt::after { margin-right: -1.25em; }
hsl(195deg, 60%, 44%), hsl(195deg, 60%, 44%),
hsl(155deg, 60%, 55%) hsl(155deg, 60%, 55%)
); );
*/
--gradient:
linear-gradient(135deg,
/* oklch(33% 0.16 86), */
oklch(30% 0.17 15),
oklch(30% 0.18 304),
oklch(30% 0.18 233),
oklch(30% 0.18 162)
);
background:
-webkit-image-set(url(media/bg_dim.png) 1x,
url(media/bg_2x_dim.png) 2x)
top center fixed,
var(--gradient) fixed;
background: background:
image-set(url(media/bg_dim.png) 1x, image-set(url(media/bg_dim.png) 1x,
url(media/bg_2x_dim.png) 2x) url(media/bg_2x_dim.png) 2x)
top center fixed, top center fixed,
var(--gradient) fixed; var(--gradient) fixed;
background-blend-mode: multiply;
} }
main { main {
background: hsla(0, 0%, 0%, 60%); --default-bg: hsla(0, 0%, 0%, 60%);
--glow-col: hsla(0, 0%, 0%, 60%); --glow-col: hsla(0, 0%, 0%, 60%);
} }