Sidenotes / Marginnotes in Kirby

I recently stumbled upon the new design of iA Writers Blog. I really like the idea of using the extra space of today’s screens with sidenotes for additional explanations, references, links, and even for headlines:

As it seems the idea is based on a design concept by Edward Tufte who uses sidenotes (and even side-graphics) heavily in his scientific books and papers. There is a CSS who shows this in action for websites:

I also found a Jekyll Theme which implements the Tufte CSS. Creating the sidenotes seems to be much easier for a static site generator than for a dynamic site. I think it’s not possible without javascript to determine the correct positions.

Has anyone already tried to implement a plugin that creates sidenotes (e.g. by using a new kirbytag)?

2 Likes

I’ve come a step further. Using jQuery.sidenotes and adapting it to jQuery 3 already works in converting markdown footnotes into fully responsive Sidenotes:

Sidenotes with a big resolution:

Sidenotes with a medium resolution

Sidenotes with a small resolution

Looks great! Do you think you’ll share the updated script?

I used this some time ago to keep Markdown footnotes inline on small screens too, like the Tufte CSS implementation:

Also of interest, the sidenotes of gwern.net:
https://www.reddit.com/r/gwern/comments/b13p93/sidenotesjs_new_gwernnet_feature_for_turning

Sure, here you go:

If you need additional instructions on how I made this work with Kirby, just drop me a note.

Thanks for your recommendation.

1 Like

Have you checked out CSS Grid to create marginalias? We are storing annotations in a structure field and position them with grid to get a similar effect:

It took a bit of time to get the markup right in order to arrange the annotations across breakpoints but it really works nicely without any additional scripts.

1 Like