3.9 KiB
| date | title | description | tags | |||
|---|---|---|---|---|---|---|
| 2024-04-29T09:16-08:00 | Some site updates |
|
I updated some things on my site and then I started to lose track of all of said updates.
Menu
I added a proper mobile menu: it's all written in CSS and leverages a hidden checkbox input to maintain the menu state.
The CSS is a bit verbose and flips my preferred min-width media query targeting to max-width.
I typically avoid using ids for styling, but I'm wrapping the click targets in a label associated with the input to allow the :checked and :not(:checked) styles to be applied on click. I've also added styling to display a handful of the menu items on desktop as icons while swapping them for links/labels in the mobile menu.
Books
I'm self-hosting my reading data — I've found I don't use many of the features by the popular book-tracking services. Instead, I'm using Katy Decorah's read-action GitHub action.
I built out a books page to display what I'm reading currently and a running list of books I want to read.
I'm using the ISBN to link out to Open Library rather than Google Books (where the data is fetched from).
Home page
I updated my home page to include a list of featured posts. This is populated from my posts collection by filtering for any posts where I've added featured: true to the frontmatter and selecting the newest three posts.
The recent posts section below contains my five newest posts. The full list of posts starts on a "new" posts page.
I removed the repetitive Read more links as the title of each post already linked to the post.
Links page
I tweaked the design of my links page. Instead of a list, each link is rendered in a box placed in a grid — each box has a share button and the tags I've applied to the link. These tags link to pages that intermingle posts I've written alongside links on the same topic.
Now page
I added a timestamp to the very bottom of my now page indicating when it was last updated (typially at least once an hour).
Design
I changed the typeface I'm using to MonoLisa, which I also use in Sublime Text and Terminal.app, with the letter and word spacing tightened up slightly from the default. Links within paragraphs are underlined to stand out and the base spacing value I use for — well, most things – has been increased. I dropped rounded corners for (most) of my images, form inputs and scrollbar styles.
Image loading
I moved my site images to a B2 bucket and have started leveraging Netlify's image CDN for cropping, sizing and setting formats (so that I don't need to duplicate images in different formats). I have the B2 bucket mounted as a network share using Mountain Duck — when I add a new album cover or artist image for my Plex music display, Hazel watches the folder where I store them, normalizes the file name and copies them to the appropriate directory.
Music data
In the interest of being somewhat lazy, I wrote node scripts to traverse the music folders I have stored with Plex and use the name of each folder to prepopulate artist and album metadata objects. These objects store the image, genre and MusicBrainz ID associated with each artist and the image and genre for each album. The MusicBrainz ID allows me to link out to the artist or release.
I think that covers everything but I'm likely wrong.