diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 44af65c..9fae1a1 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -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: diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index e78b24b..e7dc327 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -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: 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 ------------------