diff options
| -rw-r--r-- | content/posts/2024-05-27-site-updates-dark-mode-and-about-pics.md | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/content/posts/2024-05-27-site-updates-dark-mode-and-about-pics.md b/content/posts/2024-05-27-site-updates-dark-mode-and-about-pics.md new file mode 100644 index 0000000..616c523 --- /dev/null +++ b/content/posts/2024-05-27-site-updates-dark-mode-and-about-pics.md @@ -0,0 +1,101 @@ +--- +slug: site-updates-dark-mode-and-about-pics +title: "Site Updates: Dark Mode and About Page Pictures" +date: "2024-05-27T18:39:00-04:00" + +pics: + dark-mode: + css: "image" + tip: "New dark theme active and \"Switch Theme\" menu icon highlighted." + sources: + - "/files/posts/site-updates-dark-mode-and-about-pics/dark-mode-1024.webp" + - src: "/files/posts/site-updates-dark-mode-and-about-pics/dark-mode-1024.png" + width: 1024 + height: 464 + image-carousel: + css: "image" + tip: "Image carousel at bottom of About page." + sources: + - "/files/posts/site-updates-dark-mode-and-about-pics/image-carousel-1024.webp" + - src: "/files/posts/site-updates-dark-mode-and-about-pics/image-carousel-1024.png" + width: 1024 + height: 403 +--- + +A couple of site updates: + +- Added [dark mode][] support and a dark theme. +- Added pictures on the [About page][]. + +### Dark Mode + +[Dark mode][] uses a [`prefers-color-scheme` media +query][prefers-color-scheme] to determine the default theme, so it +should do the right thing™ for people who have their system +configured to prefer a dark color scheme. The theme can also be set +explicitly using the "Switch Theme" icon on the right side of the menu +bar. + +There is a minor refresh bug and probably a few rough edges with older +content, but I will get them sorted as time permits. + +Screenshot: + +[{{< pe-figure "dark-mode" >}}][shot] + +I strongly prefer dark mode and have wanted to add it here for years, so +this change is a big victory for me. + +### About Page Pictures + +There's not much to say here; the [About page][] now has a couple of +pictures. + +Adding the images in a way that I was satisfied with turned out to be a +lot more effort than you might expect... This site is statically +generated with [Hugo][], the theme is a heavily-customized version of +[Bulma][], and blog posts and articles are written in [Markdown][]. + +The features that I wanted were: + +- A [responsive layout][] containing a horizontal row of images on + desktop which gracefully falls back to a vertical list of scaled + thumbnmails on mobile. +- Multiple image format support (in other words, [the `<picture>` + element][picture-element]). +- Accessibility (`title`, `alt`, `aria-label`, `<figcaption>`, etc). +- Ability to specifily all of the above in the article [front + matter][front-matter]. + +In order to support everything above, I ended up copying my existing +`pe-figure` [shortcode][] and modifying it to support image "carousels" +in articles. + +In any case, it's done now. Here is the result: + +[{{< pe-figure "image-carousel" >}}][image-carousel-shot] + +[dark mode]: https://en.wikipedia.org/wiki/Light-on-dark_color_scheme + "Dark mode" +[prefers-color-scheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme + "prefers-color-scheme media query" +[about page]: {{< relref "/articles/about.md" >}} + "about page" +[shot]: /files/posts/site-updates-dark-mode-and-about-pics/dark-mode.png + "New dark theme active and \"Switch Theme\" menu icon highlighted." +[hugo]: https://gohugo.io/ + "Hugo static site generator" +[markdown]: https://en.wikipedia.org/wiki/Markdown + "Markdown markup language" +[responsive layout]: https://en.wikipedia.org/wiki/Responsive_web_design + "Responsive web site layout" +[bulma]: https://bulma.io/ + "Bulma CSS framework" +[front-matter]: https://gohugo.io/content-management/front-matter/ + "YAML-formatted article metadata." +[picture-element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture + "The <picture> element" +[image-carousel-shot]: /files/posts/site-updates-dark-mode-and-about-pics/image-carousel.png + "Image carousel at bottom of About page." +[shortcode]: https://gohugo.io/content-management/shortcodes/ + "Snippets in Hugo content files which call custom templates." |