~seirdy/seirdy.one

d24cdfb42393a08a2cc4c46f6739d3358bee838e — rohan kumar 10 months ago a1f517c
Link to MDN docs on CSS @media queries
2 files changed, 10 insertions(+), 3 deletions(-)

M content/posts/website-best-practices.gmi
M content/posts/website-best-practices.md
M content/posts/website-best-practices.gmi => content/posts/website-best-practices.gmi +5 -1
@@ 15,7 15,7 @@ I realize not everybody's going to ditch the Web and switch to Gemini or Gopher 
* No lazy loading (more on this below)
* No custom colors OR explicitly set the both foreground and background colors. More on this below.
* Server configured to support compression (gzip, optionally zstd as well) and HTTP/2. It's a free speed boost.
* Supports dark mode and/or works with most "dark mode" browser addons
* Supports dark mode via a CSS media feature and/or works with most "dark mode" browser addons. More on this below.
* A good score on Mozilla's HTTP Observatory
* Optimized images. More on this below.



@@ 85,6 85,10 @@ If you do explicitly set colors, please also include a dark theme using a media 
@media (prefers-color-scheme: dark)
```

For more info, read the relevant docs:

=> https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme prefers-color-scheme docs on MDN

## Image optimization

Some image optimization tools I use:

M content/posts/website-best-practices.md => content/posts/website-best-practices.md +5 -2
@@ 38,7 38,8 @@ primarily on text:
  on this below.
- Server configured to support compression (gzip, optionally zstd as well) and
  HTTP/2. It's a free speed boost.
- Supports dark mode and/or works with most "dark mode" browser addons
- Supports dark mode via a CSS media feature and/or works with most "dark mode"
  browser addons. More on this below.
- A good score on Mozilla's [HTTP Observatory](https://observatory.mozilla.org/)
- Optimized images.



@@ 161,7 162,9 @@ an example:
</picture>

If you do explicitly set colors, please also include a dark theme using a media
query: `@media (prefers-color-scheme: dark)`.
query: `@media (prefers-color-scheme: dark)`. For more info, read the relevant docs
[on
MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)

Image optimization
------------------