bajsicki.com/public/posts/a-new-look/index.html
2024-09-26 14:32:13 +02:00

182 lines
5.4 KiB
HTML

<!DOCTYPE html>
<html lang="en-us"><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;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&nbsp;</span><a href="http://localhost:1313/tags/orgmode">orgmode</a>&nbsp;<a href="http://localhost:1313/tags/web">web</a>&nbsp;<a href="http://localhost:1313/tags/css">css</a>&nbsp;<a href="http://localhost:1313/tags/tufte">tufte</a>&nbsp;</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&rsquo;s work</a>, and couldn&rsquo;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&rsquo;m padding by 20px.</li>
<li>Added some additional CSS for source blocks, since those didn&rsquo;t seem to be getting styled correctly in my exports (and I don&rsquo;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&rsquo;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&rsquo;re interested in stuff.] that I wanted, but couldn&rsquo;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&rsquo;s generated. I aim to remove it at some point. No big deal for now.
</span>
. And it only took&hellip; 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>