add content/posts/2024-05-27-site-updates-dark-mode-and-about-pics.md

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."