Justin Pinkney

Side notes and a Gallery

A man tending his garden of crt

Sidenotes #

I just added side notes to my blog, thanks to my move to 11ty (from the bloated mess that was Gatsby) and the wonderful sites and articles people have shared on the small web (as well as the power of view source) it's been easy and a pleasure!

I always want to add margin/side/foot notes to my posts, it's probably a sign of a bad excessively detail oriented writing style. Because scrolling up and down is bad, as is hovering, side notes are probably the best solution, the main tricky bit is figuring out what to do on mobile.

Here's some nice sites I looked at for inspiration.

In the end I went for a tap to hide/show the side notes on mobile/narrow screens. And a little visual wiggle on hover on desktop to make clear what the side note number corresponds to.

Gallery page #

I also added a little Gallery page of all the images on my site, given this is a pretty image focussed blog it's nice to have them all in one place.

A helpful comment in a GitHub issue pointed me in the right direction to find all the relevant images in my site and then iterate over them to display in a single page (which you can see here).

I still have a few outstanding things I'd like to improve:

  • Better layout of the images (hopefully still sticking to plain old css and html if possible)
  • Links back from the images to the blog post where they appear (this is a bit tricky as sometimes I organise the images in subdirectories)

UPDATE: With a little help from GitHub copilot it was actually pretty easy to add a link back to the original blog posts from the images. I find them by looking up the file tree for an index.md file that indicates a post, and from that making a templated page I can link to.

A screenshot of the gallery item page

Now the css is a bit messy and funky in various cases, but that's the fun of of having a website of your own to play with!

gallery page