content="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. ">
<h1class="content-title">A new look: ox-tufte</h1><spanclass="content-meta"><pclass="author">[Phil Bajsicki]</p><pclass="date">2023-10-23</p><span>2 min read </span><ahref="http://localhost:1313/tags/orgmode">orgmode</a> <ahref="http://localhost:1313/tags/web">web</a> <ahref="http://localhost:1313/tags/css">css</a> <ahref="http://localhost:1313/tags/tufte">tufte</a> <ahref="http://localhost:1313/categories/emacs">@emacs</a> <ahref="http://localhost:1313/categories/tech">@tech</a> </span></section>
<section><p>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.</p>
<p>I was lucky enough to have stumpled onto <ahref="https://edwardtufte.github.io/tufte-css/">this wonderful stylesheet based on Edward Tufte’s work</a>, and couldn’t help but look for an implementation that would be compatible with <ahref="https://orgmode.org">org-mode.</a></p>
<p>Fortunately, I found one that seems to do <em>exactly</em> what I wanted it to.</p>
<p><ahref="https://github.com/ox-tufte/ox-tufte">ox-tufte</a> is an HTML export backend for org-mode which makes the output HTML compatible with the stylesheet.</p>
<p>I <em>did</em> make a few adjustments, namely:</p>
<ul>
<li>Removed left margin, instead I’m padding by 20px.</li>
<li>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.)</li>
<li>Removed a bit of padding on top.</li>
<li>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.</li>
</ul>
<p>I think it looks rather good, and it’ll let me go over my existing articles and add the side/margin notes <labelfor="sidenote-1"class="margin-toggle sidenote-number">(1)</label>
<spanclass="sidenote-number">(1)</span>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
</span>
.</p>
<p>Overall, I am quite happy with this <labelfor="sidenote-2"class="margin-toggle sidenote-number">(2)</label>
<spanclass="sidenote-number">(2)</span>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.
</span>
. And it only took… 3-4 hours of work, research included. Pretty cool!</p>
<p>Very happy indeed.</p>
<p><!-- raw HTML omitted --><ahref="https://www.fsf.org/">Join the FSF!</a><!-- raw HTML omitted --></p></section>
