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

optimise images

Browse source
This commit is contained in:
Rhiannon Morris 2024-12-09 22:58:14 +01:00
parent e14bc51fff
commit f69277f67f
71 changed files with 167 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

40
style/base.css
View file

@ -206,20 +206,20 @@ strong { font-weight: 700; }
/* extra #cube selector for specificity */
#cube #hello {
--bg-image: url(../media/wave.png);
--bg-image: url(../media/wave.webp);
background:
var(--bg-image) bottom right / auto 60% no-repeat,
var(--base-background);
}
@media (prefers-color-scheme: dark) {
#cube #hello { --bg-image: url(../media/wave-neon.png); }
#cube #hello { --bg-image: url(../media/wave-neon.webp); }
}
@media (prefers-reduced-data: reduce) {
#cube #hello { --bg-image: url(../media/wave.webp); }
#cube #hello { --bg-image: url(../media/wave.l.webp); }
}
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
#cube #hello { --bg-image: url(../media/wave-neon.webp); }
#cube #hello { --bg-image: url(../media/wave-neon.l.webp); }
}
#id, #id ::selection, #flags img {
@ -256,13 +256,13 @@ strong { font-weight: 700; }
#activities, #activities ::selection {
--hue: 60deg;
--hue: 90deg;
--bg-angle: -60deg;
}
#cube #activities {
/* height of quobl.png is 58% of width */
--bg-image: url(../media/quobl.png);
/* height of quobl.webp is 58% of width */
--bg-image: url(../media/quobl.webp);
background:
var(--bg-image) bottom left 2ex / 50% auto no-repeat local,
var(--base-background);
@ -270,13 +270,13 @@ strong { font-weight: 700; }
}
@media (prefers-color-scheme: dark) {
#cube #activities { --bg-image: url(../media/quobl-neon.png); }
#cube #activities { --bg-image: url(../media/quobl-neon.webp); }
}
@media (prefers-reduced-data: reduce) {
#cube #activities { --bg-image: url(../media/quobl.webp); }
#cube #activities { --bg-image: url(../media/quobl.l.webp); }
}
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
#cube #activities { --bg-image: url(../media/quobl-neon.png); }
#cube #activities { --bg-image: url(../media/quobl-neon.webp); }
}
#links, #links ::selection {
@ -316,7 +316,7 @@ strong { font-weight: 700; }
#links a:hover { text-decoration: none; }
#links #gallery {
--icon: url(../media/favicon.png);
--icon: url(../media/favicon.webp);
--fg: hsl(280deg 38% 43%);
--bg: hsl(100deg 99% 81%);
image-rendering: pixelated;
@ -330,7 +330,7 @@ strong { font-weight: 700; }
}
#links #blog {
--icon: url(../media/icons/blog.png);
--icon: url(../media/icons/blog.webp);
--fg: #ffeebb;
--bg: #332255;
/* image-rendering: pixelated; */
@ -353,14 +353,14 @@ strong { font-weight: 700; }
}
#links #fa {
--icon: url(../media/icons/furaffinity.png);
--icon: url(../media/icons/furaffinity.webp);
--icon-bg: #20242a;
--bg: #353b45;
--fg: white;
}
#links #da {
--icon: url(../media/icons/deviantart.png);
--icon: url(../media/icons/deviantart.webp);
--icon-bg: #000608;
--bg: #314537;
--fg: #e7ede4;
@ -374,14 +374,14 @@ strong { font-weight: 700; }
}
#links #artfight {
--icon: url(../media/icons/artfight.png);
--icon: url(../media/icons/artfight.webp);
--icon-bg: #222222;
--bg: #a65178;
--fg: white;
}
#links #chitter {
--icon: url(../media/icons/chitter.png);
--icon: url(../media/icons/chitter.webp);
--bg: #582c58;
--icon-bg: #2c162c;
--fg: white;
@ -514,7 +514,7 @@ strong { font-weight: 700; }
}
#cube #six {
--bg-image: url(../media/kesi.png);
--bg-image: url(../media/kesi.webp);
background:
var(--bg-image) bottom right / 100% auto no-repeat,
var(--base-background);
@ -531,11 +531,11 @@ strong { font-weight: 700; }
}
@media (prefers-color-scheme: dark) {
#cube #six { --bg-image: url(../media/kesi-neon.png); }
#cube #six { --bg-image: url(../media/kesi-neon.webp); }
}
@media (prefers-reduced-data: reduce) {
#cube #activities { --bg-image: url(../media/kesi.webp); }
#cube #activities { --bg-image: url(../media/kesi.l.webp); }
}
@media (prefers-color-scheme: dark) and (prefers-reduced-data: reduce) {
#cube #activities { --bg-image: url(../media/kesi-neon.webp); }
#cube #activities { --bg-image: url(../media/kesi-neon.l.webp); }
}