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);
:root {
/*
--gradient:
linear-gradient(135deg,
hsl(42deg, 92%, 70%),
@ -11,47 +12,26 @@
hsl(195deg, 100%, 67%),
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;
--weight: 600;
--link-color: hsl(196deg, 100%, 85%);
--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:
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;
var(--gradient) fixed;
background-blend-mode: overlay;
font-family: 'Muller';
@ -69,7 +49,8 @@
}
main {
background: hsla(316deg, 100%, 95%, 45%);
--default-bg: hsla(316deg, 100%, 95%, 45%);
background: var(--default-bg);
border-radius: 2em;
--glow-col: hsla(318deg, 100%, 98%, 100%);
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) {
:root {
/*
--gradient:
linear-gradient(135deg,
hsl(42deg, 56%, 55%),
@ -192,21 +173,27 @@ rt::after { margin-right: -1.25em; }
hsl(195deg, 60%, 44%),
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:
image-set(url(media/bg_dim.png) 1x,
url(media/bg_2x_dim.png) 2x)
top center fixed,
var(--gradient) fixed;
background-blend-mode: multiply;
}
main {
background: hsla(0, 0%, 0%, 60%);
--default-bg: hsla(0, 0%, 0%, 60%);
--glow-col: hsla(0, 0%, 0%, 60%);
}