git.iko.soy/webring
on master help sign in
index: noelle-dev: Use <picture> and media queries

Pick different buttons depending on the user's preferences

commitbe95c9aeb04c195e572edfb561014bb7dc3e7e56 authorNoelle Leigh <noelle_leigh@fastmail.com> dateFri 17 Jan 2025, 16:59 (2 years ago) parent11b8a0b
1 file changed+5−1
compare with master
unifiedsplit
index.html+5−1
index.html+5−1
@@ -509,7 +509,11 @@
509509 </li>
510510 <li data-lang="en" id="noelle-dev">
511511 <a href="https://noelle.dev">noelle.dev</a>
512− <img loading="lazy" src="https://noelle.dev/assets/images/button.gif" style="image-rendering: pixelated;" width="88" height="31">
512+ <picture>
513+ <source media="(prefers-reduced-motion: reduce) and (prefers-color-scheme: light)" srcset="https://noelle.dev/assets/images/buttons/static-light.png">
514+ <source media="(prefers-reduced-motion: reduce) and (prefers-color-scheme: dark)" srcset="https://noelle.dev/assets/images/buttons/static-dark.png">
515+ <img src="https://noelle.dev/assets/images/buttons/animated-wipe.gif" width="88" height="31" alt="Noelle.dev" loading="lazy" style="image-rendering: pixelated;">
516+ </picture>
513517 </li>
514518 <li data-lang="en" id="giacinto-carlucci">
515519 <a href="https://www.giacintocarlucci.it">giacintocarlucci.it</a>