183 lines
5.4 KiB
HTML
183 lines
5.4 KiB
HTML
|
<!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>
|