Tufte-like sidenotes Hugo theme

#1

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.

#2

Currently, the best match I’ve found is ath-tufte-hugo. I’m testing it out now and will report back.

#3

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:

https://rick.cogley.info/post/run-a-tftp-server-on-mac-osx/

Will definitely incorporate when I upgrade the site (so overdue).

#4

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.
#5

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:

<style type="text/css"> .sidenote, .marginnote { float: right; clear: right; margin-right: -60%; margin-left: 0%; width: 50%; margin-top: 0; margin-bottom: 0; font-size: 1.0rem; line-height: 1.3; vertical-align: baseline; position: relative; } </style>

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.

#6

I was not aware of that package and I think the problem you’re facing is why ath-tufte-hugo uses the super elaborate build process involving Pandoc.

#7

@Logit, I would like to see also a solution that allows tufte_html render tufte code within another theme. Have you solved it?