I’ve tried looking through the Hugo themes for one that implements a Tufte-like side-note. The best I’ve found is hugo-tufte leveraging tufte-css, which I’ve made into a dark theme hugo-tufte-dark for my own site. However, there are a few problems I’m currently hacking on. Specifically:
Mobile compatibility allowing for optional reveal of side-notes and linky foot-notes, as shown in this blog.
Centering figures better, given they currently are hugging the left-margin.
Various style fixes, such as bulleted lists margins and how to add side-notes to bulleted lists, without them immigrating to another plane of existence.
In the interest of not duplicating work and creating a document for other looking to accomplish the same thing, I thought I would post here and log my own investigations.
Wow, good stuff. I did not even know this existed (despite having all Tufte’s books) when I cobbled together some half-baked css to get this effect on my site:
After spending 6 hours investigating, I’ve determined:
RMarkdown is nice, but the overhead it adds to setting up an environment, at least in this case, seems impractical for my purposes.
The key to nice sidenotes adapting based on screen size is @media CSS rule, which I’m going to try to integrate into my Hugo theme and indeed may have accidentally deleted while trying to clean up the CSS.
Seanny, I see you’re familiar with RMarkdown, I’m curious if you’re aware of the tufte R package for use with R Markdown. It lets one author a post (or whatever) with side-notes and margin figures, etc., like Tufte does. It’s a wonderful package. However, I found it frustrating tying to use it within an existing Hugo theme. The existing or “parent” Hugo theme always takes over and over-rides the tufte::tufte_html: default specification that I set as my yaml output:
If you know of a solution to make a Hugo theme obey a different yaml output specification such as the above, please share.
Otherwise, one way to put side-notes on nearly any Hugo page is to specify the following just after the yaml section:
Henceforth, entering text such as, ^[This is a sidenote that was entered using a footnote.] in one’s markdown or Rmarkdown document then renders as a side-note.