Sidenotes

I annoy the shit out of my friends and family with referential humor. It’s nonstop.

Like this one? Look at all the room over here in the margins! There’s so much space! For activities!

When I’m writing, it’s best practice to keep things concise, but sometimes my brain and love of aforementioned referential humor makes this hard. When this happens, I like to use sidenotes!

The Markdown library I’m using does offer native support for footnotes. However, those automatically get appended to the end of the page. We can do better than that! I want to put that sweet, sweet space you see on the left and right of the page to good use.

I also want to dig in a bit more to using calc() once Claude Code comes back from whatever screwball comedy vacation it decided to go on tonight. I hear Tahiti is lovely this time of year.

As a first pass, I’m going with an absolutely positioned sidenote element, which seems to get the job done. I’m using calc() to position the sidenotes exactly halfway across the page and then tacking on half of the max width of the main content plus some buffer space.

I’ve added in a media query as well to hide the sidenotes once your browser viewport gets too small. There’s still a bit of trial-and-error I’ll need to do to get it perfect, but them’s the breaks.

When I’m writing Markdown, I just prepend raw HTML to whatever paragraph I’m referencing with the sidenote. So, for the one above, it looks something like this:

<div class="sidenote"> I also want to dig in a bit more to using `calc()` once Claude Code comes back from whatever screwball comedy vacation it decided to go on tonight. I hear Tahiti is lovely this time of year.</div>
As a first pass, I'm going with an absolutely positioned sidenote element, which seems to get the job done. I'm using <code>[calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)</code> to position the sidenotes exactly halfway across the page and then tacking on half of the max width of the main content plus some buffer space.

Downsides of this approach:

Right now, I have to be careful not to have multiple sidenotes too close to each other, since there’s precisely zero styling rules in place to handle a case where they overlap vertically. This is probably a good thing though due to the “annoying the shit out of my friends and family clause” above.
I can do sidenotes within lists, though! How you like them apples? Except, wait, what the hell is wrong with the margin on the top here? Oh, shit.
You don’t really get true linkage to the content the way you do with an honest-to-goodness footnote. That’s kind of a bummer, but none of my posts are going to be that long enough to require the reader to zip back and forth between the footnotes and the actual post.
The quick-and-dirty way to handle smaller screen sizes is to just hide the sidenotes for now. That’s kind of a bummer, because the really good writing is going to be in the sidenotes. There’ll be a way to reposition them relatively with media queries, or using calc() to place them vertically as well, but that’s going to be a shit ton of back-and-forth.

Be sure to write this on my headstone when I die.

I’m sure there’s probably a slightly better way to do all of this, but for now, it’ll do.