fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00
Code Issues Projects Releases Wiki Activity

Another typo, formatting

Browse source
This commit is contained in:
Rohan Kumar 2022-03-20 16:25:46 -07:00
parent 7d3ca83479
commit 6b402b6ec1
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 10 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
content/posts/website-best-practices.gmi
View file

@ -283,16 +283,14 @@ If you really want to go overboard with PNG optimization, you can try a tool lik
A "<picture>" element allows selection of sources based on any CSS media query. When images have light backgrounds, I like to include dark variants too. A "<picture>" element allows selection of sources based on any CSS media query. When images have light backgrounds, I like to include dark variants too.
This is a minimal example a `picture` with a dark variant: This is a minimal example of a <picture> with a dark variant:
``` ```
<source <source type=image/png
srcset=/p/dark.png srcset=/p/dark.png
type=image/png media="screen and (prefers-color-scheme: dark)">
media="screen and (prefers-color-scheme: dark)"> <source type=image/png
<source srcset=/p/light.png>
srcset=/p/light.png
type=image/png>
``` ```
Requiring the "screen" media type prevents selection of dark variants when printing. Printer paper is almost always white, so dark images could waste ink. Ink waste is a sensitive issue among many students: school printers sometimes charge students who exceed a given ink quota. Ask me how I know! Requiring the "screen" media type prevents selection of dark variants when printing. Printer paper is almost always white, so dark images could waste ink. Ink waste is a sensitive issue among many students: school printers sometimes charge students who exceed a given ink quota. Ask me how I know!

12
content/posts/website-best-practices.md
View file

@ -253,17 +253,15 @@ A `<picture>` element allows selection of sources based on any CSS media query.
<figure> <figure>
<figcaption> <figcaption>
A minimal example a <code>picture</code> with a dark variant: A minimal example of a <code>picture</code> with a dark variant:
</figcaption> </figcaption>
``` ```
<source <source type=image/png
srcset=/p/dark.png srcset=/p/dark.png
type=image/png media="screen and (prefers-color-scheme: dark)">
media="screen and (prefers-color-scheme: dark)"> <source type=image/png
<source srcset=/p/light.png>
srcset=/p/light.png
type=image/png>
``` ```
</figure> </figure>