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

making image-set work in webkit is a bad experience

Browse source
This commit is contained in:
Rhiannon Morris 2021-06-08 02:05:14 +02:00
parent d1a5e30059
commit cabe24377a
1 changed files with 47 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

54
style.css
View file

@ -11,15 +11,33 @@ body {
hsl(195deg, 100%, 67%), hsl(195deg, 100%, 67%),
hsl(155deg, 70%, 62%) hsl(155deg, 70%, 62%)
); );
--bg-image:
image-set(url(media/bg.png) 1x,
url(media/bg_2x.png) 2x);
--size: 1.75rem; --size: 1.75rem;
--weight: 600; --weight: 600;
background: background:
var(--bg-image) top center fixed, -webkit-image-set(url(media/bg.png) 1x,
var(--gradient) fixed; 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;
background-blend-mode: overlay; background-blend-mode: overlay;
font-family: 'Muller'; font-family: 'Muller';
@ -241,9 +259,31 @@ h1, h2 { --around-image: url(media/sparkles.svg); }
hsl(195deg, 60%, 44%), hsl(195deg, 60%, 44%),
hsl(155deg, 60%, 55%) hsl(155deg, 60%, 55%)
); );
--bg-image:
background:
-webkit-image-set(url(media/bg_dim.png) 1x,
url(media/bg_2x_dim.png) 2x)
top center fixed,
linear-gradient(135deg,
hsl(42deg, 56%, 55%),
hsl(348deg, 56%, 55%),
hsl(334deg, 60%, 43%),
hsl(234deg, 60%, 40%),
hsl(195deg, 60%, 44%),
hsl(155deg, 60%, 55%)
) fixed;
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,
linear-gradient(135deg,
hsl(42deg, 56%, 55%),
hsl(348deg, 56%, 55%),
hsl(334deg, 60%, 43%),
hsl(234deg, 60%, 40%),
hsl(195deg, 60%, 44%),
hsl(155deg, 60%, 55%)
) fixed;
} }
main { main {