[feat] Yet more tweaks

7 files changed, 283 insertions, 30 deletions

diff --git a/.eleventy.js b/.eleventy.js
index 6cb78a0..e7794ce 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -55,8 +55,17 @@ module.exports = (cfg) => {
   const md = require("markdown-it")({
     typographer: true, html: true,
     highlight: (str, lang) => {
+      let starting = 1;
+      let numLength;
+      if (lang.includes(":")) {
+        lang = lang.split(":");
+        starting = lang[1];
+        numLength = lang[2];
+        lang = lang[0];
+      }
       if (lang && hljs.getLanguage(lang)) { try {
-        return '<pre class="hljs"><code>' +
+        return '<pre class="hljs"><code'+(starting?
+          ' data-starting="'+starting+'"'+(numLength? ' data-num-length="'+numLength+'"' : '') : '')+'>' +
           hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
         '</code></pre>';
       } catch (__) {} }
@@ -66,6 +75,7 @@ module.exports = (cfg) => {
   }).use(require("markdown-it-anchor"), {
       permalink: true, permalinkBefore: true, permalinkSymbol: "#"})
     .use(require("markdown-it-emoji"), {shortcuts: {}})
+    .use(require("markdown-it-footnote"))
     .use(require("markdown-it-mark"));
 
   md.renderer.rules.emoji = (token, i) =>
@@ -74,6 +84,10 @@ module.exports = (cfg) => {
   md.renderer.rules.code_block = (tokens, i, options, env, slf) =>
     `<pre${slf.renderAttrs(tokens[i])}><code>` +
       utils.escapeHtml(tokens[i].content.replace(/ /g, "\xA0"))+'</code></pre>\n';
+  md.renderer.rules.footnote_block_open = () => (
+    '<section class="footnotes">\n' +
+    '<ol class="footnotes-list">\n'
+  );
 
   cfg.setLibrary("md", md);
 
diff --git a/package-lock.json b/package-lock.json
index b2029ee..55e3f4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "highlight.js": "^11.6.0",
+        "markdown-it-footnote": "^4.0.0",
         "twemoji": "^14.0.2"
       },
       "devDependencies": {
@@ -1988,6 +1989,11 @@
       "integrity": "sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==",
       "dev": true
     },
+    "node_modules/markdown-it-footnote": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",
+      "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ=="
+    },
     "node_modules/markdown-it-mark": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz",
@@ -5095,6 +5101,11 @@
       "integrity": "sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==",
       "dev": true
     },
+    "markdown-it-footnote": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",
+      "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ=="
+    },
     "markdown-it-mark": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/markdown-it-mark/-/markdown-it-mark-3.0.1.tgz",
diff --git a/package.json b/package.json
index e74b89a..56f676d 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@11ty/eleventy": "^1.0.0",
     "@11ty/eleventy-plugin-rss": "^1.1.0",
     "markdown-it": "^12.3.2",
+    "markdown-it-footnote": "^4.0.0",
     "markdown-it-anchor": "^7.1.0",
     "markdown-it-emoji": "^2.0.0",
     "markdown-it-mark": "^3.0.1"
diff --git a/posts/history.njk b/posts/history.njk
index c3cdc50..cb18cbc 100644
--- a/posts/history.njk
+++ b/posts/history.njk
@@ -14,7 +14,7 @@
       <h1>{{ metadata.title }} &mdash; Page {{ pagination.pageNumber + 1 }}</h1>
 {% for post in posts %}
       <hr>
-      <section>
+      <section class="post-list">
       <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
       {%- set postDate = post.date.toISOString().slice(0,10) %}
       <p class="post-date"><time datetime="{{ postDate }}">{{ postDate }}</time></p>
diff --git a/posts/tags.njk b/posts/tags.njk
index f984630..8f3f8b6 100644
--- a/posts/tags.njk
+++ b/posts/tags.njk
@@ -19,7 +19,7 @@ eleventyComputed:
       <hr>
 {% set taglist = collections[ tag ] -%}
 {% for post in taglist | reverse %}
-      <section>
+      <section class="post-list">
       <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
       {%- set postDate = post.date.toISOString().slice(0,10) %}
       <p class="post-date"><time datetime="{{ postDate }}">{{ postDate }}</time></p>
diff --git a/static/main.js b/static/main.js
index 0858183..258e260 100644
--- a/static/main.js
+++ b/static/main.js
@@ -17,7 +17,7 @@ document.addEventListener("DOMContentLoaded", () => {
   [...d[q]("pre.hljs code")].forEach(e => e.innerHTML =
     e.innerHTML.split("\n").slice(0,-1).map((l,i,a) =>
       `<div class="code-line" data-line-number="${
-        (i+1).toString().padStart(Math.ceil(Math.log10(a.length)), 0)
+        (i+(+(e.dataset.starting||1))).toString().padStart(+e.dataset.numLength||Math.ceil(Math.log10(a.length)), 0)
       }">${l}</div>`).join("\n"));
 
   // Disable Android Chrome "tap to search" when revealing spoiler text
diff --git a/static/style.css b/static/style.css
index a5c57d1..4c00c3a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -6,20 +6,159 @@
   line-height: 1.5rem;
 }
 
-:root { --filter: invert(0) }
+/*:root { --filter: invert(0) }
 html.invert { --filter: invert(1) }
-/*@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
   :root { --filter: invert(1) }
   html.invert { --filter: invert(0) }
-}*/
+}
 
 html, pre.hljs, img:not(.emoji):not([alt^=Diagram]),
 #like-post.liked, #like-post:hover,
 #end, .emoji-container { filter: var(--filter) }
+*/
+
+html {
+  --page-bg: #fff;
+  --text-color: #000d;
+  --link-color: #1d73c9;
+  --icon-color: #bbb;
+  --icon-hover-color: var(--link-color);
+  --text-subtle-color: #999;
+  --redacted-bg: #444;
+  --code-bg: #f4f4f4;
+  --code-inline-bg: #eee;
+  --code-line-num: #0006;
+  --kbd-bg: #eee;
+  --kbd-border: #ccc;
+  --kbd-shadow: #ddd;
+  --divider-color: rgba(0,0,0,.2);
+  --end-marker-color: #ab4642;
+}
+html.invert {
+  --page-bg: #000;
+  --text-color: #fffd;
+  --link-color: #7ea2ce;
+  --icon-color: #444;
+  --text-subtle-color: #888;
+  --redacted-bg: #333;
+  --code-bg: #111;
+  --code-inline-bg: #282828;
+  --code-line-num: #585858;
+  --kbd-bg: #111;
+  --kbd-border: #444;
+  --kbd-shadow: #333;
+  --divider-color: rgba(255,255,255,.2);
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    --page-bg: #000;
+    --text-color: #fffd;
+    --link-color: #7ea2ce;
+    --icon-color: #444;
+    --text-subtle-color: #888;
+    --redacted-bg: #333;
+    --code-bg: #111;
+    --code-inline-bg: #282828;
+    --code-line-num: #585858;
+    --kbd-bg: #111;
+    --kbd-border: #444;
+    --kbd-shadow: #333;
+    --divider-color: rgba(255,255,255,.2);
+  }
+  html.invert {
+    --page-bg: #fff;
+    --text-color: #000d;
+    --link-color: #1d73c9;
+    --icon-color: #bbb;
+    --text-subtle-color: #999;
+    --redacted-bg: #444;
+    --code-bg: #f4f4f4;
+    --code-inline-bg: #eee;
+    --code-line-num: #0006;
+    --kbd-bg: #eee;
+    --kbd-border: #ccc;
+    --kbd-shadow: #ddd;
+    --divider-color: rgba(0,0,0,.2);
+  }
+}
+
+.hljs-emphasis{font-style:italic}
+
+html:not(.invert) {
+  /* Highlight.js - A11y Light */
+  & .hljs{background:#f7f7f7;color:#545454}
+  & .hljs-comment,& .hljs-quote{color:#696969}
+  & .hljs-deletion,& .hljs-name,& .hljs-regexp,& .hljs-selector-class,& .hljs-selector-id,& .hljs-tag,& .hljs-template-variable,& .hljs-variable{color:#d91e18}
+  & .hljs-attribute,& .hljs-built_in,& .hljs-link,& .hljs-literal,& .hljs-meta,& .hljs-number,& .hljs-params,& .hljs-type{color:#aa5d00}
+  & .hljs-addition,& .hljs-bullet,& .hljs-string,& .hljs-symbol{color:green}
+  & .hljs-section,& .hljs-title{color:#007faa}
+  & .hljs-keyword,& .hljs-selector-tag{color:#7928a1}
+  & .hljs-strong{font-weight:700}
+}
+
+@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}
+
+html.invert {
+  /* Highlight.js - Base16 Default Dark */
+  & .hljs{color:#d8d8d8;background:#111}
+  & .hljs ::selection,& .hljs::selection{background-color:#383838;color:#d8d8d8}
+  & .hljs-comment{color:#585858}
+  & .hljs-tag{color:#b8b8b8}
+  & .hljs-operator,& .hljs-punctuation,& .hljs-subst{color:#d8d8d8}
+  & .hljs-operator{opacity:.7}
+  & .hljs-bullet,& .hljs-deletion,& .hljs-name,& .hljs-selector-tag,& .hljs-template-variable,& .hljs-variable{color:#ab4642}
+  & .hljs-attr,& .hljs-link,& .hljs-literal,& .hljs-number,& .hljs-symbol,& .hljs-variable.constant_{color:#dc9656}
+  & .hljs-class .hljs-title,& .hljs-title,& .hljs-title.class_{color:#f7ca88}
+  & .hljs-strong{font-weight:700;color:#f7ca88}
+  & .hljs-addition,& .hljs-code,& .hljs-string,& .hljs-title.class_.inherited__{color:#a1b56c}
+  & .hljs-built_in,& .hljs-doctag,& .hljs-keyword.hljs-atrule,& .hljs-quote,& .hljs-regexp{color:#86c1b9}
+  & .hljs-attribute,& .hljs-function .hljs-title,& .hljs-section,& .hljs-title.function_,& .ruby .hljs-property{color:#7cafc2}
+  & .diff .hljs-meta,& .hljs-keyword,& .hljs-template-tag,& .hljs-type{color:#ba8baf}
+  & .hljs-emphasis{color:#ba8baf}
+  & .hljs-meta,& .hljs-meta .hljs-keyword,& .hljs-meta .hljs-string{color:#a16946}
+  & .hljs-meta .hljs-keyword,& .hljs-meta-keyword{font-weight:700}
+}
+
+@media (prefers-color-scheme: dark) {
+  html:not(.invert) {
+    /* Highlight.js - Base16 Default Dark */
+    & .hljs{color:#d8d8d8;background:#111}
+    & .hljs ::selection,& .hljs::selection{background-color:#383838;color:#d8d8d8}
+    & .hljs-comment{color:#585858}
+    & .hljs-tag{color:#b8b8b8}
+    & .hljs-operator,& .hljs-punctuation,& .hljs-subst{color:#d8d8d8}
+    & .hljs-operator{opacity:.7}
+    & .hljs-bullet,& .hljs-deletion,& .hljs-name,& .hljs-selector-tag,& .hljs-template-variable,& .hljs-variable{color:#ab4642}
+    & .hljs-attr,& .hljs-link,& .hljs-literal,& .hljs-number,& .hljs-symbol,& .hljs-variable.constant_{color:#dc9656}
+    & .hljs-class .hljs-title,& .hljs-title,& .hljs-title.class_{color:#f7ca88}
+    & .hljs-strong{font-weight:700;color:#f7ca88}
+    & .hljs-addition,& .hljs-code,& .hljs-string,& .hljs-title.class_.inherited__{color:#a1b56c}
+    & .hljs-built_in,& .hljs-doctag,& .hljs-keyword.hljs-atrule,& .hljs-quote,& .hljs-regexp{color:#86c1b9}
+    & .hljs-attribute,& .hljs-function .hljs-title,& .hljs-section,& .hljs-title.function_,& .ruby .hljs-property{color:#7cafc2}
+    & .diff .hljs-meta,& .hljs-keyword,& .hljs-template-tag,& .hljs-type{color:#ba8baf}
+    & .hljs-emphasis{color:#ba8baf}
+    & .hljs-meta,& .hljs-meta .hljs-keyword,& .hljs-meta .hljs-string{color:#a16946}
+    & .hljs-meta .hljs-keyword,& .hljs-meta-keyword{font-weight:700}
+  }
+  html.invert {
+    /* Highlight.js - A11y Light */
+    & .hljs{background:#f7f7f7;color:#545454}
+    & .hljs-comment,& .hljs-quote{color:#696969}
+    & .hljs-deletion,& .hljs-name,& .hljs-regexp,& .hljs-selector-class,& .hljs-selector-id,& .hljs-tag,& .hljs-template-variable,& .hljs-variable{color:#d91e18}
+    & .hljs-attribute,& .hljs-built_in,& .hljs-link,& .hljs-literal,& .hljs-meta,& .hljs-number,& .hljs-params,& .hljs-type{color:#aa5d00}
+    & .hljs-addition,& .hljs-bullet,& .hljs-string,& .hljs-symbol{color:green}
+    & .hljs-section,& .hljs-title{color:#007faa}
+    & .hljs-keyword,& .hljs-selector-tag{color:#7928a1}
+    & .hljs-strong{font-weight:700}
+  }
+}
 
 html {
   background: #fff;
-  color: #000;
+  background: var(--page-bg);
+  color: #000d;
+  color: var(--text-color);
   height: 100%;
   overflow-x: hidden;
 }
@@ -40,10 +179,14 @@ html {
   height: 1rem;
   width: 1rem;
   background: #bbb;
+  background: var(--icon-color);
   border-radius: 1rem;
   cursor: pointer;
 }
-#invert:hover { background: #1d73c9 }
+#invert:hover {
+  background: #1d73c9;
+  background: var(--icon-hover-color);
+}
 #invert::before {
   content: "";
   display: block;
@@ -63,6 +206,7 @@ html {
     right: 1.6rem;
     padding-left: .6rem;
     background: #fff;
+    background: var(--page-bg);
   }
   h1 {
     margin: .9rem 0 1rem !important;
@@ -79,6 +223,7 @@ html {
   margin: -.6rem 0;
   vertical-align: -.05rem;
   background: #fff;
+  background: var(--page-bg);
   overflow: hidden;
   outline: 0;
   border: .6rem solid transparent;
@@ -110,14 +255,19 @@ html {
   transform: translate(-50%,50%);
   border-radius: 100%;
   background: #bbb;
+  background: var(--icon-color);
   box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #bbb;
+  box-shadow: 0 0 0 .3rem var(--page-bg), 0 0 0 .6rem var(--icon-color);
 }
 #feed:hover::before {
   background: #1d73c9;
+  background: var(--icon-hover-color);
   box-shadow: 0 0 0 .3rem #fff, 0 0 0 .6rem #1d73c9;
+  box-shadow: 0 0 0 .3rem var(--page-bg), 0 0 0 .6rem var(--icon-hover-color);
 }
 #message-me::before {
   background: #bbb;
+  background: var(--icon-color);
   height: .75rem;
   width: 1rem;
 }
@@ -125,11 +275,18 @@ html {
   height: 0;
   width: .1rem;
   border-top: .4rem solid #bbb;
+  border-top: .4rem solid var(--icon-color);
   border-right: .6rem solid transparent;
   bottom: 0;
 }
-#message-me:hover::before { background: #1d73c9 }
-#message-me:hover::after { border-top-color: #1d73c9 }
+#message-me:hover::before {
+  background: #1d73c9;
+  background: var(--icon-hover-color);
+}
+#message-me:hover::after {
+  border-top-color: #1d73c9;
+  border-top-color: var(--icon-hover-color);
+}
 
 body {
   position: relative;
@@ -155,6 +312,7 @@ p.post-date {
 p.post-date * {
   font-size: 15px;
   color: #999;
+  color: var(--text-subtle-color);
 }
 
 [lang=jbo], [lang=jbo] * {
@@ -187,25 +345,34 @@ summary::before {
   width: 0;
   border: .4rem solid transparent;
   border-left: .7rem solid #bbb;
+  border-left: .7rem solid var(--icon-color);
   border-right-width: 0;
   float: left;
   margin: .35rem 0 0 -1.2rem;
 }
 
-summary:hover::before { border-left-color: #1d73c9; }
+summary:hover::before {
+  border-left-color: #1d73c9;
+  border-left-color: var(--icon-hover-color);
+}
 
 details[open] > summary::before {
   border: .4rem solid transparent;
   border-top: .7rem solid #bbb;
+  border-top: .7rem solid var(--icon-color);
   border-bottom-width: 0;
   margin: .4rem 0 0 -1.3rem;
 }
 
-details[open] > summary:hover::before { border-top-color: #1d73c9; }
+details[open] > summary:hover::before {
+  border-top-color: #1d73c9;
+  border-top-color: var(--icon-hover-color);
+}
 
 blockquote {
   padding-left: 1.2rem;
   box-shadow: 2px 0 0 rgba(0,0,0,.2) inset;
+  box-shadow: 2px 0 0 var(--divider-color) inset;
 }
 
 ul ul, ul ol, ol ul, ol ol, li {
@@ -213,6 +380,14 @@ ul ul, ul ol, ol ul, ol ol, li {
   padding: revert;
 }
 
+li p:first-child {
+  margin-top: .4rem;
+}
+
+li p:last-child {
+  margin-bottom: .4rem;
+}
+
 ol > li:first-child:nth-last-child(n+10),
 ol > li:first-child:nth-last-child(n+10) ~ li {
   list-style-type: decimal-leading-zero;
@@ -221,6 +396,7 @@ ol > li:first-child:nth-last-child(n+10) ~ li {
 hr {
   border: 0;
   border-top: .5px solid rgba(0,0,0,.2);
+  border-top: .5px solid var(--divider-color);
 }
 
 img:not(.emoji) {
@@ -246,10 +422,11 @@ img.hero {
 a {
   text-decoration: none;
   color: #1d73c9;
+  color: var(--link-color);
 }
 a:hover, a:hover *, ins * { text-decoration: underline }
-a:visited { color: #955eba }
-a:active { color: #ab4642 }
+/*a:visited { color: #955eba }
+a:active { color: #ab4642 }*/
 
 .irc { padding-left: 1.8rem }
 .irc > p { text-indent: -1.8rem }
@@ -261,9 +438,11 @@ a:active { color: #ab4642 }
 mark {
   color: transparent;
   background: #444;
+  background: var(--redacted-bg);
 }
 mark:hover {
-  color: #000;
+  color: #000d;
+  color: var(--text-color);
   background: transparent;
 }
 
@@ -271,18 +450,25 @@ mark:not(:hover) code,
 mark:not(:hover) .emoji { opacity: 0 }
 
 code {
-  background: #e6e6e6;
   margin: 0 .2rem;
-  box-shadow:
-     .2rem  .08rem #e6e6e6,
-     .2rem -.08rem #e6e6e6,
-    -.2rem  .08rem #e6e6e6,
-    -.2rem -.08rem #e6e6e6;
   white-space: nowrap;
+  line-height: 1;
 }
 
-/* Highlight.js - Base16 Default Dark */
-.hljs{color:#d8d8d8;background:#181818}.hljs ::selection,.hljs::selection{background-color:#383838;color:#d8d8d8}.hljs-comment{color:#585858}.hljs-tag{color:#b8b8b8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#d8d8d8}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ab4642}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#dc9656}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#f7ca88}.hljs-strong{font-weight:700;color:#f7ca88}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#a1b56c}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#86c1b9}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#7cafc2}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#ba8baf}.hljs-emphasis{color:#ba8baf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#a16946}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}
+p code {
+  background: #f4f4f4;
+  background: var(--code-inline-bg);
+  box-shadow:
+     .2rem  .08rem #f4f4f4,
+     .2rem -.08rem #f4f4f4,
+    -.2rem  .08rem #f4f4f4,
+    -.2rem -.08rem #f4f4f4;
+  box-shadow:
+     .2rem  .08rem var(--code-inline-bg),
+     .2rem -.08rem var(--code-inline-bg),
+    -.2rem  .08rem var(--code-inline-bg),
+    -.2rem -.08rem var(--code-inline-bg);
+}
 
 p code, p code * {
   font-family: "Hack", monospace;
@@ -306,9 +492,9 @@ pre code {
   box-shadow: none;
 }
 
-pre.hljs:hover code {
+/*pre.hljs:hover code {
   box-shadow: -.5px 0 #fff6;
-}
+}*/
 
 pre .code-line {
   margin: 0;
@@ -326,7 +512,8 @@ pre .code-line::before {
 }
 
 pre:hover .code-line::before {
-  color: #fff8;
+  color: #0006;
+  color: var(--code-line-num);
 }
 
 pre .code-line::after {
@@ -336,7 +523,8 @@ pre .code-line::after {
 pre {
   margin: 1em -100%; /* old browsers fallback */
   margin: 1rem calc(50% - 50vw);
-  background: #e6e6e6;
+  background: #f4f4f4;
+  background: var(--code-bg);
   overflow-x: auto;
 }
 
@@ -346,17 +534,38 @@ pre.hljs {
 
 kbd {
   background: #eee;
+  background: var(--kbd-bg);
   margin: 0 .1rem;
   padding: .05rem .35rem;
   vertical-align: .07rem;
   font-family: "Hack", monospace;
   font-size: 15px;
   border: 1px solid #ccc;
+  border: 1px solid var(--kbd-border);
   border-radius: .3rem;
   box-shadow: 0 2px 0 #ddd;
+  box-shadow: 0 2px 0 var(--kbd-shadow);
   white-space: nowrap;
 }
 
+.footnote-ref, .footnote-ref * {
+  margin: 0;
+  font-size: 12px;
+}
+
+.footnote-ref {
+  display: inline-block;
+  margin-top: -.2rem;
+}
+
+.post-list .footnote-ref {
+  display: none;
+}
+
+.footnote-backref:not(:hover) {
+  opacity: .6;
+}
+
 #tags { word-spacing: .5rem; }
 .tag { white-space: nowrap; }
 
@@ -364,6 +573,7 @@ nav {
   position: relative;
   margin-bottom: 0;
   border-top: .5px solid rgba(0,0,0,.2);
+  border-top: .5px solid var(--divider-color);
   padding-top: 1rem;
 }
 nav::after {
@@ -374,6 +584,7 @@ nav::after {
 
 nav a:not(:hover) {
   color: #999;
+  color: var(--text-subtle-color);
 }
 
 #up, #back, #next, #prev, #first, #last { display: block }
@@ -403,16 +614,24 @@ nav a:not(:hover) {
 #up::after {
   margin: .6rem 1.5rem .6rem .3rem;
   border-bottom: .7rem solid #bbb;
+  border-bottom: .7rem solid var(--icon-color);
   border-top-width: 0;
 }
 
 #back::after {
   border-right: .7rem solid #bbb;
+  border-right: .7rem solid var(--icon-color);
   border-left-width: 0;
 }
 
-#up:hover::after { border-bottom-color: #1d73c9 }
-#back:hover::after { border-right-color: #1d73c9 }
+#up:hover::after {
+  border-bottom-color: #1d73c9;
+  border-bottom-color: var(--link-color);
+}
+#back:hover::after {
+  border-right-color: #1d73c9;
+  border-right-color: var(--link-color);
+}
 
 #next, #last, #end {
   float: right;
@@ -432,6 +651,7 @@ nav a:not(:hover) {
   margin-left: .5rem;
   border: .4rem solid transparent;
   border-left: .7rem solid #bbb;
+  border-left: .7rem solid var(--icon-color);
   border-right-width: 0;
   vertical-align: -.05rem;
 }
@@ -445,6 +665,7 @@ nav a:not(:hover) {
   margin: 0 .1rem 0 .5rem;
   border: .4rem solid transparent;
   border-left: .6rem solid #bbb;
+  border-left: .6rem solid var(--icon-color);
   border-right-width: 0;
   vertical-align: -.05rem;
 }
@@ -457,6 +678,7 @@ nav a:not(:hover) {
   height: .8rem;
   width: .15rem;
   background: #bbb;
+  background: var(--icon-color);
 }
 #last:hover::after { border-left-color: currentColor }
 #last:hover::before { background: currentColor }
@@ -469,6 +691,7 @@ nav a:not(:hover) {
   margin: 0 .5rem 0 .1rem;
   border: .4rem solid transparent;
   border-right: .6rem solid #bbb;
+  border-right: .6rem solid var(--icon-color);
   border-left-width: 0;
   vertical-align: -.05rem;
 }
@@ -481,6 +704,7 @@ nav a:not(:hover) {
   height: .8rem;
   width: .15rem;
   background: #bbb;
+  background: var(--icon-color);
 }
 #first:hover::before { border-right-color: currentColor }
 #first:hover::after { background: currentColor }
@@ -493,6 +717,7 @@ nav a:not(:hover) {
   margin-right: .5rem;
   border: .4rem solid transparent;
   border-right: .7rem solid #bbb;
+  border-right: .7rem solid var(--icon-color);
   border-left-width: 0;
   vertical-align: -.05rem;
 }
@@ -508,6 +733,7 @@ nav a:not(:hover) {
   width: .8rem;
   transform: rotate(45deg);
   box-shadow: 0 0 0 .24rem #ab4642 inset;
+  box-shadow: 0 0 0 .24rem var(--end-marker-color) inset;
 }
 
 #like-post {
@@ -543,6 +769,7 @@ nav a:not(:hover) {
   height: .6rem;
   width: .6rem;
   background: #bbb;
+  background: var(--icon-color);
 }
 #like-post.liked span, #like-post.liked span::before, #like-post.liked span::after,
 #like-post:hover span, #like-post:hover span::before, #like-post:hover span::after {