bajsicki.com/content/blog/a-new-look.md

+++
title = "A new look: ox-tufte"
publishDate = 2023-10-23T00:00:00+02:00
lastmod = 2024-11-18T18:02:07+01:00
tags = ["orgmode", "web", "css", "tufte"]
categories = ["emacs", "tech"]
draft = false
meta = true
type = "list"
[menu]
  [menu.posts]
    weight = 3010
    identifier = "a-new-look-ox-tufte"
+++

Struck by insomnia and dissatisfaction with the way my website has looked so far, I have opted for something less garish, and lighter, than before.

<!--more-->

I was lucky enough to have stumpled onto [this wonderful stylesheet based on Edward Tufte's work](https://edwardtufte.github.io/tufte-css/), and couldn't help but look for an implementation that would be compatible with [org-mode.](https://orgmode.org)

Fortunately, I found one that seems to do _exactly_ what I wanted it to.

[ox-tufte](https://github.com/ox-tufte/ox-tufte) is an HTML export backend for org-mode which makes the output HTML compatible with the stylesheet.

I _did_ make a few adjustments, namely:

-   Removed left margin, instead I'm padding by 20px.
-   Added some additional CSS for source blocks, since those didn't seem to be getting styled correctly in my exports (and I don't want to have to hunt around to find the culprits.)
-   Removed a bit of padding on top.
-   Made the numerals generated by org-mode hidden, because otherwise foodnotes and footnote references had two of their number, instead of just the one they need.

I think it looks rather good, and it'll let me go over my existing articles and add the side/margin notes {{< sidenote >}} Yay! This is how every footnote should be. None of that scrolling for miles to find what you're interested in stuff.] that I wanted, but couldn't before {{</ sidenote >}}.

Overall, I am quite happy with this {{<sidenote>}}I know there is some js in the HTML that's generated. I aim to remove it at some point. No big deal for now.{{</sidenote>}}. And it only took... 3-4 hours of work, research included. Pretty cool!

Very happy indeed.

<span class="underline">[Join the FSF!](https://www.fsf.org/)</span>
Update... 2024-09-27 21:05:48 +02:00			`+++`
			`title = "A new look: ox-tufte"`
			`publishDate = 2023-10-23T00:00:00+02:00`
Update 2024-11-18 18:02:10 +01:00			`lastmod = 2024-11-18T18:02:07+01:00`
Update... 2024-09-27 21:05:48 +02:00			`tags = ["orgmode", "web", "css", "tufte"]`
			`categories = ["emacs", "tech"]`
			`draft = false`
			`meta = true`
			`type = "list"`
			`[menu]`
			`[menu.posts]`
			`weight = 3010`
			`identifier = "a-new-look-ox-tufte"`
			`+++`

			`Struck by insomnia and dissatisfaction with the way my website has looked so far, I have opted for something less garish, and lighter, than before.`

			`<!--more-->`

			`I was lucky enough to have stumpled onto [this wonderful stylesheet based on Edward Tufte's work](https://edwardtufte.github.io/tufte-css/), and couldn't help but look for an implementation that would be compatible with [org-mode.](https://orgmode.org)`

			`Fortunately, I found one that seems to do _exactly_ what I wanted it to.`

			`[ox-tufte](https://github.com/ox-tufte/ox-tufte) is an HTML export backend for org-mode which makes the output HTML compatible with the stylesheet.`

			`I _did_ make a few adjustments, namely:`

			`- Removed left margin, instead I'm padding by 20px.`
			`- Added some additional CSS for source blocks, since those didn't seem to be getting styled correctly in my exports (and I don't want to have to hunt around to find the culprits.)`
			`- Removed a bit of padding on top.`
			`- Made the numerals generated by org-mode hidden, because otherwise foodnotes and footnote references had two of their number, instead of just the one they need.`

			`I think it looks rather good, and it'll let me go over my existing articles and add the side/margin notes {{< sidenote >}} Yay! This is how every footnote should be. None of that scrolling for miles to find what you're interested in stuff.] that I wanted, but couldn't before {{</ sidenote >}}.`

			`Overall, I am quite happy with this {{<sidenote>}}I know there is some js in the HTML that's generated. I aim to remove it at some point. No big deal for now.{{</sidenote>}}. And it only took... 3-4 hours of work, research included. Pretty cool!`

			`Very happy indeed.`

			`<span class="underline">[Join the FSF!](https://www.fsf.org/)</span>`