# Tufte-like sidenotes Hugo theme

**URL:** <https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200>\
**Category:** support\
**Created:** [March 25, 2018, 5:01pm UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200 "2018-03-25T17:01:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Seanny123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/seanny123/32/4755_2.png) [@Seanny123](https://discourse.gohugo.io/u/Seanny123)\
**Post date:** [March 25, 2018, 5:01pm UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200/1 "2018-03-25T17:01:55Z")

</div>

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](https://github.com/shawnohare/hugo-tufte) leveraging [tufte-css](https://github.com/edwardtufte/tufte-css/), which I’ve made into a dark theme [hugo-tufte-dark](https://github.com/Seanny123/hugo-tufte-dark) for [my own site](https://seanny123.github.io/). 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](https://johndmart.in/human/2017/10/11/national-coming-out-day/).
- 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.

---

<div class="post-metadata">

**Author:** ![Seanny123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/seanny123/32/4755_2.png) [@Seanny123](https://discourse.gohugo.io/u/Seanny123)\
**Post date:** [March 25, 2018, 6:05pm UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200/2 "2018-03-25T18:05:38Z")

</div>

Currently, the best match I’ve found is [ath-tufte-hugo](https://github.com/andrewheiss/ath-tufte-hugo). I’m testing it out now and will report back.

---

<div class="post-metadata">

**Author:** ![RickCogley](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rickcogley/32/10269_2.png) [@RickCogley](https://discourse.gohugo.io/u/RickCogley)\
**Post date:** [March 26, 2018, 8:29am UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200/3 "2018-03-26T08:29:19Z")

</div>

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/](https://rick.cogley.info/post/run-a-tftp-server-on-mac-osx/)

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

---

<div class="post-metadata">

**Author:** ![Seanny123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/seanny123/32/4755_2.png) [@Seanny123](https://discourse.gohugo.io/u/Seanny123)\
**Post date:** [March 26, 2018, 1:06pm UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200/4 "2018-03-26T13:06:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Logit](https://avatars.discourse-cdn.com/v4/letter/l/edb3f5/32.png) [@Logit](https://discourse.gohugo.io/u/Logit)\
**Post date:** [March 27, 2018, 2:45am UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200/5 "2018-03-27T02:45:47Z")

</div>

Seanny, I see you’re familiar with RMarkdown, I’m curious if you’re aware of the [tufte R package](https://github.com/rstudio/tufte) 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.

---

<div class="post-metadata">

**Author:** ![Seanny123](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/seanny123/32/4755_2.png) [@Seanny123](https://discourse.gohugo.io/u/Seanny123)\
**Post date:** [March 27, 2018, 1:46pm UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200/6 "2018-03-27T13:46:55Z")

</div>

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](https://github.com/andrewheiss/econw18.classes.andrewheiss.com/issues/1) involving Pandoc.

---

<div class="post-metadata">

**Author:** ![xfim](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xfim/32/7003_2.png) [@xfim](https://discourse.gohugo.io/u/xfim)\
**Post date:** [January 11, 2019, 2:03pm UTC](https://discourse.gohugo.io/t/tufte-like-sidenotes-hugo-theme/11200/7 "2019-01-11T14:03:22Z")

</div>

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