Side notes and a Gallery
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.
- every layout was useful for making a sidebar
- useful review of methods
- a nice implemention
- a nice example of side notes
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.
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.
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!