commit d6878e9061a7dc42858545f5e40fab5893e4716f
parent 7b594bc421eabc47bd8cf42918805cb00c3fff68
Author: Willem Van Zwol <willem@vanzwol.com>
Date: Thu, 21 May 2026 16:23:07 -0700
Added a second blog post and general updates
Testing out more markdown in the index.html
Added JS for copying code blocks
Added asside styling
Lots of other misc stuff, still in early stages of this website, a lot
is subject to change
Diffstat:
| A | blog.html | | | 66 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | blogs/on_the_blog.html | | | 157 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | blogs/website.html | | | 87 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | index.html | | | 45 | ++++++++++++++++++++++++++++++++++++++++----- |
| A | script.js | | | 12 | ++++++++++++ |
| M | styles.css | | | 200 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------- |
6 files changed, 540 insertions(+), 27 deletions(-)
diff --git a/blog.html b/blog.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Portfolio</title>
+ <link rel="icon" type="image/x-icon" href="./favicon.ico">
+ <link rel="stylesheet" type="text/css" href="./styles.css">
+ <script src="script.js"></script>
+</head>
+<body>
+ <nav>
+ <!-- LEFT -->
+ <div class="nav-left">
+ <a href="./index.html">index</a> ~
+ <a href="">blog</a> ~
+ <a href="">projects</a> ~
+ <a href="">contact</a>
+ </div>
+ <!-- CENTER -->
+ <div class="nav-center">
+ </div>
+ <!-- RIGHT -->
+ <div class="nav-right">
+ <a href="./git/website/log.html" title="Self hosted repo of this website">
+ <!-- giticon -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
+ style="width: 0.85em;position: relative;top: 0.06em;fill:var(--text)">
+ <path d="M15,5.6,10.4,1A3.4,3.4,0,0,0,5.78.86L7.66,2.74a1.25,1.25,0,0,
+ 1,1.67,1.2V4a1.23,1.23,0,0,1-.08.38l2.45,2.4a1.17,1.17,0,0,1,
+ .37-.08A1.3,1.3,0,1,1,10.77,8h0a1.17,1.17,0,0,1,.08-.37L8.6,
+ 5.38v5.23a1.28,1.28,0,0,1,.73,1.15,1.3,1.3,0,0,1-2.6,0,1.27,1.27,0,0,
+ 1,.67-1.11V5.07A1.27,1.27,0,0,1,6.73,4a1.17,1.17,0,0,1,
+ .08-.37l-1.9-1.9L1,5.6a3.38,3.38,0,0,0,0,4.79H1L5.6,15a3.38,3.38,0,0,
+ 0,4.79,0h0L15,10.4a3.38,3.38,0,0,0,0-4.79Z"/>
+ </svg>
+ </a>
+ <input type="checkbox" id="theme-toggle" class="toggle">
+ <label for="theme-toggle" class="btn"
+ title="Light/Dark mode (JS required)">
+ <!-- sun -->
+ <svg class="sun" viewBox="0 0 24 24" fill=none stroke=currentColor
+ stroke-linecap=round stroke-width="1.8"><circle cx=12 cy=12 r=4.4 />
+ <path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10l2 2M5
+ 19l2-2m10-10l2-2"/></svg>
+ <!-- moon -->
+ <svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 0 1 9
+ 3c0-.3 0-.7.1-1A10 10 0 1 0 23 12.4c-.3 0-.7.1-1 .1z"/></svg>
+ </label>
+ </div>
+ </nav>
+ <h1>Blog posts</h1>
+
+ <a class="div" style="margin: 0 0.5em 0 0;" href="./blogs/on_the_blog.html"><fieldset>
+ <legend>On the blog</legend>
+ 2026.05.21
+ Tags: website, blog, complexity, ux
+ </fieldset></a>
+
+ <a class="div" style="margin: 0 0.5em 0 0;" href="./blogs/website.html"><fieldset>
+ <legend>Website</legend>
+ 2026.05.19
+ Tags: website
+ </fieldset></a>
+</body>
+</html>
diff --git a/blogs/on_the_blog.html b/blogs/on_the_blog.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Portfolio</title>
+ <link rel="icon" type="image/x-icon" href="../favicon.ico">
+ <link rel="stylesheet" type="text/css" href="../styles.css">
+ <script src="../script.js"></script>
+</head>
+<body>
+ <nav>
+ <!-- LEFT -->
+ <div class="nav-left">
+ <a href="../index.html">index</a> ~
+ <a href="../blog.html">blog</a> ~
+ <a href="">projects</a> ~
+ <a href="">contact</a>
+ </div>
+ <!-- CENTER -->
+ <div class="nav-center">
+ </div>
+ <!-- RIGHT -->
+ <div class="nav-right">
+ <a href="./git/website/log.html" title="Self hosted repo of this website">
+ <!-- giticon -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
+ style="width: 0.85em;position: relative;top: 0.06em;fill:var(--text)">
+ <path d="M15,5.6,10.4,1A3.4,3.4,0,0,0,5.78.86L7.66,2.74a1.25,1.25,0,0,
+ 1,1.67,1.2V4a1.23,1.23,0,0,1-.08.38l2.45,2.4a1.17,1.17,0,0,1,
+ .37-.08A1.3,1.3,0,1,1,10.77,8h0a1.17,1.17,0,0,1,.08-.37L8.6,
+ 5.38v5.23a1.28,1.28,0,0,1,.73,1.15,1.3,1.3,0,0,1-2.6,0,1.27,1.27,0,0,
+ 1,.67-1.11V5.07A1.27,1.27,0,0,1,6.73,4a1.17,1.17,0,0,1,
+ .08-.37l-1.9-1.9L1,5.6a3.38,3.38,0,0,0,0,4.79H1L5.6,15a3.38,3.38,0,0,
+ 0,4.79,0h0L15,10.4a3.38,3.38,0,0,0,0-4.79Z"/>
+ </svg>
+ </a>
+ <input type="checkbox" id="theme-toggle" class="toggle">
+ <label for="theme-toggle" class="btn"
+ title="Light/Dark mode (JS required)">
+ <!-- sun -->
+ <svg class="sun" viewBox="0 0 24 24" fill=none stroke=currentColor
+ stroke-linecap=round stroke-width="1.8"><circle cx=12 cy=12 r=4.4 />
+ <path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10l2 2M5
+ 19l2-2m10-10l2-2"/></svg>
+ <!-- moon -->
+ <svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 0 1 9
+ 3c0-.3 0-.7.1-1A10 10 0 1 0 23 12.4c-.3 0-.7.1-1 .1z"/></svg>
+ </label>
+ </div>
+ </nav>
+
+ <h1>On the blog</h1>
+ <p>2026.05.21</p>
+ This thread is now dedicated to discussing the blog system
+ and further developments with the website.
+ <aside>
+ I wrote this at a time when this was displayed on the blog.html page,
+ so the previous post was displayed above this one.
+ </aside>
+ I have already stated above what I <em>want</em> from this blog
+ but I have not gone into detail on how I plan to do this.
+ I see a few options.<br><br>
+
+ <h2>Fzf and tags are dynamic...</h2>
+ The first feature that causes contention would be search.
+ I both want a tag system and <abbr title="Fuzzy Finder">fzf</abbr>.
+ Both of these require<abbr
+ title="PHP and Wasm are alternatives, neither worth it">*</abbr>
+ JavaScript.
+
+ But I believe <abbr
+ title="A web development approach where pages are pre-rendered as plain HTML at build time, rather than generated dynamically in the browser or on a server per request">
+ static-first</abbr> architecture helps at avoiding
+ <abbr
+ title="accumulated increase in systemic disorder and complexity over time caused by short-term engineering decisions that trade structure and clarity for immediate convenience">
+ entropic debt</abbr>
+ so I use <abbr title="JavaScript">JS</abbr>
+ only where interactivity genuinely benefits the
+ <abbr title="User experience">UX</abbr>.
+
+ This also follows for any dependencies.
+ The more you have, the more points of failure
+ and more importantly more places that stack complexity.<br><br>
+
+ This is partly why I also use so much <abbr
+ title="abbreviation, this is an example of one"><code>abbr</code></abbr>s
+ so much,
+ didn't require a single line of JS, the only thing I did was add underlining:
+ <br>
+
+ <!-- HTML generated using hilite.me (CSS one-dark) --><pre data-lang="CSS" style="background: #090909"><span></span><span style="color: #E06C75">abbr</span><span style="color: #56B6C2">[</span><span style="color: #E06C75">title</span><span style="color: #56B6C2">]</span><span style="color: #ABB2BF"> {</span>
+<span style="color: #ABB2BF"> </span><span style="color: #C678DD">text-decoration</span><span style="color: #ABB2BF">: </span><span style="color: #E5C07B">underline</span><span style="color: #ABB2BF"> </span><span style="color: #E5C07B">dotted</span><span style="color: #ABB2BF">;</span>
+<span style="color: #ABB2BF"> </span><span style="color: #C678DD">text-decoration-thickness</span><span style="color: #ABB2BF">: </span><span style="color: #D19A66">2</span><span style="color: #E5C07B">px</span><span style="color: #ABB2BF">;</span>
+<span style="color: #ABB2BF"> </span><span style="color: #C678DD">text-decoration-color</span><span style="color: #ABB2BF">: </span>
+<span style="color: #ABB2BF"> </span><span style="color: #61AFEF; font-weight: bold">color-mix</span><span style="color: #ABB2BF">(</span><span style="color: #E06C75">in</span><span style="color: #ABB2BF"> </span><span style="color: #E06C75">srgb</span><span style="color: #ABB2BF">, </span><span style="color: #E5C07B">currentColor</span><span style="color: #ABB2BF"> </span><span style="color: #D19A66">50</span><span style="color: #E5C07B">%</span><span style="color: #ABB2BF">, </span><span style="color: #E5C07B">transparent</span><span style="color: #ABB2BF">);</span>
+<span style="color: #ABB2BF"> </span><span style="color: #C678DD">cursor</span><span style="color: #ABB2BF">: </span><span style="color: #E5C07B">help</span><span style="color: #ABB2BF">;</span>
+<span style="color: #ABB2BF">}</span></pre>
+
+ <div class="callout note">
+ Even this ^^^ code block right here requires JS for copying to clipboard.
+ The reality is that JS just cannot be avoided without being really boring.
+ </div>
+
+ The other reason is just <abbr title="User experience">UX</abbr>.
+ It works just like parenthesis
+ but without having to bloat up the screen for those who already understand.
+ This is heavily inspired by <a
+ href="https://cs.brown.edu/memex/ACM_HypertextTestbed/papers/60.html">
+ Ted Nelson's take on linkage</a>.<br><br>
+ <aside class="left">
+ The Xanadu project by Ted Nelson,
+ is a topic that might be worth it's own blog post.
+ </aside>
+
+ Regardless, I have implemented fzf before,
+ specifically in the search bar of the
+ <a href="https://willemdoesit.github.io/ResourceCenter/">Resource Center</a>
+ of which that link is just one design I made for a local non-profit.
+ The solution I used was very inline with
+ <a href="https://jamstack.org/"
+ title="Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.">
+ Jamstack</a>
+ by just linking to a third party js file
+ <code>https://cdn.jsdelivr.net/npm/fuse.js@6.6.2</code>
+ The only real issue I have with this is that given it's not an <abbr
+ title="Aplication Program Interface">API</abbr>,
+ I should have just been able to downloaded the file myself
+ and mirror it instead of creating another dependency.
+ So I wont make that mistake this time.<br><br>
+
+ <h2>My plan</h2>
+
+ A question I still have to answer is how to store everything.
+ I think my conclusion is to have a <a href="https://en.wikipedia.org/wiki/RSS"
+ title="Really simple syndication: a standard xml format for feeds">RSS feed</a>
+ that links to all the different posts,
+ to have them as <em>separate files. </em><br><br>
+
+ The blog.html page will be generated to list out all the posts
+ and will have a way to narrow down which you want to view
+ by a bunch of tags you can toggle and a fzf search.
+ By the time I push the commit with this page
+ I will probably have already done that. <br><br>
+
+ I have been given a super cool opprotunity to code C for a project in the fall
+ and it's tempting to take every project and see if I can do it in C,
+ but in this case Imma play it safe with something quick and easy.
+ I am writing the static generator of the blog from RSS in rust.
+
+ afterall,
+ it's one of the main things I want to advertise myself as competent in
+ and it's been a while since I actually used it.
+ <br><br>
+ </p>
+</body>
+</html>
diff --git a/blogs/website.html b/blogs/website.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Portfolio</title>
+ <link rel="icon" type="image/x-icon" href="../favicon.ico">
+ <link rel="stylesheet" type="text/css" href="../styles.css">
+ <script src="../script.js"></script>
+</head>
+<body>
+ <nav>
+ <!-- LEFT -->
+ <div class="nav-left">
+ <a href="../index.html">index</a> ~
+ <a href="../blog.html">blog</a> ~
+ <a href="">projects</a> ~
+ <a href="">contact</a>
+ </div>
+ <!-- CENTER -->
+ <div class="nav-center">
+ </div>
+ <!-- RIGHT -->
+ <div class="nav-right">
+ <a href="./git/website/log.html" title="Self hosted repo of this website">
+ <!-- giticon -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
+ style="width: 0.85em;position: relative;top: 0.06em;fill:var(--text)">
+ <path d="M15,5.6,10.4,1A3.4,3.4,0,0,0,5.78.86L7.66,2.74a1.25,1.25,0,0,
+ 1,1.67,1.2V4a1.23,1.23,0,0,1-.08.38l2.45,2.4a1.17,1.17,0,0,1,
+ .37-.08A1.3,1.3,0,1,1,10.77,8h0a1.17,1.17,0,0,1,.08-.37L8.6,
+ 5.38v5.23a1.28,1.28,0,0,1,.73,1.15,1.3,1.3,0,0,1-2.6,0,1.27,1.27,0,0,
+ 1,.67-1.11V5.07A1.27,1.27,0,0,1,6.73,4a1.17,1.17,0,0,1,
+ .08-.37l-1.9-1.9L1,5.6a3.38,3.38,0,0,0,0,4.79H1L5.6,15a3.38,3.38,0,0,
+ 0,4.79,0h0L15,10.4a3.38,3.38,0,0,0,0-4.79Z"/>
+ </svg>
+ </a>
+ <input type="checkbox" id="theme-toggle" class="toggle">
+ <label for="theme-toggle" class="btn"
+ title="Light/Dark mode (JS required)">
+ <!-- sun -->
+ <svg class="sun" viewBox="0 0 24 24" fill=none stroke=currentColor
+ stroke-linecap=round stroke-width="1.8"><circle cx=12 cy=12 r=4.4 />
+ <path d="M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10l2 2M5
+ 19l2-2m10-10l2-2"/></svg>
+ <!-- moon -->
+ <svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 0 1 9
+ 3c0-.3 0-.7.1-1A10 10 0 1 0 23 12.4c-.3 0-.7.1-1 .1z"/></svg>
+ </label>
+ </div>
+ </nav>
+ <h1>Website</h1>
+ <p>2026.05.19</p>
+ <p>
+ This website for now is an <em>experiment</em>.
+ I may switch to use a proper
+ <abbr title="Static Site generator">SSG</abbr>
+ like
+ <a href="https://www.getzola.org/" title="Official zola website">
+ Zola</a>,
+ but I'm making progress so quickly with this
+ that I don't feel like a
+ <abbr title="An SSG or more complex tool (eg. React) for making websites">
+ framework</abbr>
+ would actually help.
+
+ Once I actually get to setting up that
+ <abbr title="check nav bar above">blog page</abbr>
+ and want
+ <abbr title="Really simple syndication">RSS</abbr>
+ integration and
+ <abbr
+ title="Posts should be organized under multiple categories at once. This helps improves the search UX">
+ tags</abbr>
+ then I may wish to use something else to generate static pages
+ like how I use
+ <a href="https://git.2f30.org/stagit/">
+ stagit</a>
+ for my
+ <a href="./git/website/log.html">
+ self hosted git</a>.<br><br>
+
+ For now this blog post is on the index.html page
+ as it hopefully helps explain what the website is for in it's primitive state.
+ It probably will not be forever.
+ </body>
+</html>
diff --git a/index.html b/index.html
@@ -6,13 +6,14 @@
<title>Portfolio</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="stylesheet" type="text/css" href="./styles.css">
+ <script src="script.js"></script>
</head>
<body>
<nav>
<!-- LEFT -->
<div class="nav-left">
<a href="./index.html">index</a> ~
- <a href="">blog</a> ~
+ <a href="./blog.html">blog</a> ~
<a href="">projects</a> ~
<a href="">contact</a>
</div>
@@ -64,7 +65,7 @@
<tr><td>Frontend</td>
<td>HTML/CSS/JS</td> </tr>
<tr><td>Backend</td>
- <td>Rust, Golang, C/C++ Python, Java</td> </tr>
+ <td>Rust, Golang, C/C++, Python, Java</td> </tr>
<tr><td>Data management</td>
<td>PostgreSQL, SQLite, Redis, CSV, JSON</td> </tr>
<tr><td>Misc</td>
@@ -107,8 +108,8 @@
checkout the markdown emulated syntax!<br>
<em>italics</em>, <b>bold</b>, <del>strickthrough</del>
<blockquote cite="https://example.com">
- "Software is like sex, it's better when it's free"<br>
- Linus Torvalds
+ Software is like sex, it's better when it's free<br>
+ - Linus Torvalds
<a class="quote-source"
href="https://example.com"
aria-label="Source"
@@ -127,7 +128,41 @@
This is important.
</div>
- </p>
+ <fieldset>
+ <legend>Form</legend>
+ <form>
+ <fieldset>
+ <legend>Tags</legend>
+
+ <input type="checkbox" id="nix">
+ <label for="nix">Nix</label>
+
+ <input type="checkbox" id="web">
+ <label for="web">Web</label>
+
+ <input type="checkbox" id="linux">
+ <label for="linux">Linux</label>
+ </fieldset>
+
+ <fieldset>
+ <legend>Sort</legend>
+
+ <input type="radio" id="newest" name="sort" checked>
+ <label for="newest">Newest</label>
+
+ <input type="radio" id="oldest" name="sort">
+ <label for="oldest">Oldest</label>
+ </fieldset>
+
+ <button type="reset">
+ Reset
+ </button>
+ <button type="submit">
+ Submit
+ </button>
+ </form>
+ </fieldset>
+
<h1>Projects</h1>
<p>
This will contain a
diff --git a/script.js b/script.js
@@ -0,0 +1,12 @@
+document.addEventListener("click", async (e) => {
+ const pre = e.target.closest("pre");
+ if (!pre) return;
+
+ await navigator.clipboard.writeText(pre.innerText);
+
+ pre.dataset.copied = "true";
+
+ setTimeout(() => {
+ delete pre.dataset.copied;
+ }, 1200);
+});
diff --git a/styles.css b/styles.css
@@ -15,6 +15,7 @@ body:has(#theme-toggle:checked) {
--text: #eaeaea;
--border: #262626;
--link: #6aa7ff;
+ --accent: #6aa7ff;
a[href^="http://"]::after,
a[href^="https://"]::after {
@@ -59,7 +60,7 @@ del::before, del::after {
hr {
border: none;
- border-top: 1px solid var(--border);
+ border-top: 0.0625rem solid var(--border);
}
a {
@@ -71,22 +72,6 @@ a:hover {
text-decoration: underline;
}
-
-abbr[title] {
- text-decoration: underline dotted;
- text-decoration-thickness: 2px;
- text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
- cursor: help;
-}
-
-code {
- font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
- background: var(--bg-secondary);
- padding: 0.2em;
- border: 1px solid var(--border);
- font-size: 0.9em;
-}
-
table {
width: fit;
border-collapse: collapse;
@@ -95,7 +80,7 @@ table {
th,
td {
padding: 0.3em 0.8em;
- border: 1px solid var(--border);
+ border: 0.0625rem solid var(--border);
text-align: left;
}
@@ -137,6 +122,170 @@ li::marker {
color: color-mix(in srgb, var(--text) 50%, transparent);
}
+legend {
+ padding: 0 1ch;
+ border-left: 0.0625rem solid var(--border);
+ border-right: 0.0625rem solid var(--border);
+ font-size: 0.75em;
+}
+
+fieldset {
+ border: 0.0625rem solid var(--border);
+ margin: 0;
+ margin-bottom: 0.5em;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ appearance: none;
+ position: relative;
+ bottom: 0.18em;
+
+}
+
+label {
+ padding: 1ch;
+}
+
+input[type="checkbox"]::before {
+ position: relative;
+ left: 1ch;
+ content: "[ ]";
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ color: var(--border);
+ font-weight: 600;
+}
+
+input[type="radio"]::before {
+ position: relative;
+ left: 1ch;
+ content: "( )";
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ color: var(--border);
+ font-weight: 600;
+}
+
+input[type="checkbox"]:hover::before {
+ content: "[×]";
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+input[type="radio"]:hover::before {
+ content: "(•)";
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+input[type="checkbox"]:checked::before {
+ content: "[×]";
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ color: var(--text);
+}
+
+input[type="radio"]:checked::before {
+ content: "(•)";
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ color: var(--text);
+}
+
+button {
+ padding: 0.4rem 0.8rem;
+ border: 0.0625rem solid var(--border);
+ background: var(--bg);
+ color: var(--text);
+ cursor: pointer;
+}
+
+button:hover {
+ background: var(--border);
+}
+
+button:active {
+ transform: translateY(0.125rem);
+}
+
+button:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+}
+
+code {
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ background: var(--bg-secondary);
+ padding: 0.2em;
+ border: 0.0625rem solid var(--border);
+ font-size: 0.9em;
+}
+
+pre {
+ position: relative;
+ margin: 1em 0em;
+
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ border: 0.0625rem solid var(--border);
+ padding: 1rem;
+
+ overflow-x: auto;
+ white-space: pre;
+ word-break: break-word;
+
+ font-size: 0.9em;
+
+ background: var(--bg);
+ border: 0.0625rem solid var(--border);
+
+ cursor: pointer;
+}
+
+pre::before {
+ content: attr(data-lang);
+ position: absolute;
+ top: 0.3em;
+ right: 0.6em;
+
+ font-family: "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 0.85em;
+
+ padding: 0.1em 0.4em;
+
+ background: var(--bg);
+ border: 0.0625rem solid var(--border);
+}
+
+pre:hover::before {
+ content: "COPY";
+}
+
+pre[data-copied="true"]::before {
+ content: "COPIED";
+}
+
+abbr[title] {
+ text-decoration: underline dotted;
+ text-decoration-thickness: 2px;
+ text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
+ cursor: help;
+}
+
+aside {
+ position: absolute;
+ left: calc(50% - 60ch - 2.5em - 2ch);
+ padding-right: 2ch;
+ transform: translateY(calc(-50% - 0.9em));
+ width: 20ch;
+ border-right: 0.0625rem solid var(--border);
+}
+
+
+aside::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 100%;
+ width: 4.5ch;
+ height: 0.0625rem;
+ background: var(--border);
+}
+
.callout {
position: relative;
@@ -144,7 +293,7 @@ li::marker {
padding: 1em 0.8em;
background: var(--callout-bg);
- border: 1px solid var(--callout-accent);
+ border: 0.0625rem solid var(--callout-accent);
}
.callout::before {
@@ -160,7 +309,7 @@ li::marker {
background: var(--bg);
color: var(--callout-accent);
- border: 1px solid var(--callout-accent);
+ border: 0.0625rem solid var(--callout-accent);
}
.callout.note {
@@ -176,15 +325,17 @@ li::marker {
}
body {
+ position: relative;
background: var(--bg);
color: var(--text);
font-family: "FreeSans", "Liberation Sans", Arial, sans-serif;
font-size: 12pt;
line-height: 1.5;
margin: 1rem auto 0;
- width: clamp(30rem, 50%, 50rem);
+ width: clamp(40ch, 100%, 80ch);
+ box-sizing: border-box;
padding: 2.5rem;
- border: 1px solid var(--border);
+ border: 0.0625rem solid var(--border);
transition:
background var(--transition-fast),
@@ -192,11 +343,16 @@ body {
border-color var(--transition-fast);
}
+
a {
color: var(--link);
text-decoration: none;
}
+a.div {
+ all: unset;
+ cursor: pointer;
+}
nav {
display: grid;
