1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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."
|
