<!DOCTYPE html> <html lang="en-us"><head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> <title>A new look: ox-tufte - phil@bajsicki:~$</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="description" 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. "> <link rel="canonical" href="http://localhost:1313/posts/a-new-look/" /> <link rel="icon" href="http://localhost:1313/images/logo_w.png" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Noto+Emoji&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Noto+Emoji&display=swap" media="print" onload="this.media='all'" /> <noscript> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap" /> </noscript> <link rel="stylesheet" href="/css/hugo-tufte.min.css"> <link rel="stylesheet" href="/css/hugo-tufte-options.min.css"> <link rel="stylesheet" href="/css/hugo-tufte-override.css"> </head> <body> <article id="main"> <header class="brand"> <h1>phil@bajsicki:~$</h1> <p class="subtitle"></p> <nav class="menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/posts/">Posts</a></li> </ul> </nav> <hr /> </header> <section> <h1 class="content-title">A new look: ox-tufte</h1><span class="content-meta"><p class="author">[Phil Bajsicki]</p><p class="date">2023-10-23</p><span>2 min read </span><a href="http://localhost:1313/tags/orgmode">orgmode</a> <a href="http://localhost:1313/tags/web">web</a> <a href="http://localhost:1313/tags/css">css</a> <a href="http://localhost:1313/tags/tufte">tufte</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 <a href="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 <a href="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><a href="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 <label for="sidenote-1" class="margin-toggle sidenote-number">(1)</label> <input type="checkbox" id="sidenote-1" class="margin-toggle"/> <span class="sidenote"> <span class="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 <label for="sidenote-2" class="margin-toggle sidenote-number">(2)</label> <input type="checkbox" id="sidenote-2" class="margin-toggle"/> <span class="sidenote"> <span class="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 --><a href="https://www.fsf.org/">Join the FSF!</a><!-- raw HTML omitted --></p></section> <section><footer class="page-footer"> <hr /> <div class="previous-post" style="display:inline-block;"> <a class="link-reverse" href="http://localhost:1313/posts/misskey-resetting-admin-password/?ref=footer">« MissKey: Resetting Admin Password</a> </div> <div class="next-post", style="display:inline-block;float:right;"> <a class="link-reverse" href="http://localhost:1313/posts/a-kind-view-of-business/?ref=footer">A kind view of business »</a> </div> <ul class="page-footer-menu"> </ul> <div class="copyright"> <p> ©2024 Phil Bajsicki </p> </div> </footer> </section> <section><nav class="menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/posts/">Posts</a></li> </ul> </nav> </section> </article> </body> </html>