diff --git a/README.org b/README.org index a99b29b..04965cf 100644 --- a/README.org +++ b/README.org @@ -4,4 +4,5 @@ Here you may find my config. There are only two files which matter - [[file:config.org][config.org]], my configuration file - [[file:init.el][init.el]], the doom-modules file -You may find the render of the HTML export of ~config.org~ [[https://tecosaur.github.io/emacs-config/config.html][here]]. +What you *really* want is the ~M-x org-html-export-to-html~ version of my config, +which you can find [[https://tecosaur.github.io/emacs-config/config.html][here]]. diff --git a/config.org b/config.org index cf6161a..518593c 100644 --- a/config.org +++ b/config.org @@ -3763,7 +3763,7 @@ Saving seconds adds up after all! (but only so much) (title (plist-get xkcd-info :title)) (file (xkcd-download img (string-to-number num)))) (cond ((org-export-derived-backend-p backend 'html) - (format "%s" img (subst-char-in-string ?\" ?“ alt) title)) + (format "%s" img (subst-char-in-string ?\" ?“ alt) title)) ((org-export-derived-backend-p backend 'latex) (format "\\begin{figure}[!htb] \\centering @@ -4433,308 +4433,202 @@ the final documents. (ox-extras-activate '(ignore-headlines))) #+END_SRC **** Exporting to HTML +***** Extra header content +We want to tack on a few more bits to the start of the body. Unfortunately, there +doesn't seem to be any nice variable or hook, so we'll just override the +relevant function. + +This is done to allow me to add the date and author to the page header, +implement a CSS-only light/dark theme toggle, and a sprinkle of [[https://ogp.me/][Open Graph]] +metadata. +#+BEGIN_SRC emacs-lisp +(defadvice! org-html-template-fancier (contents info) + "Return complete document string after HTML conversion. +CONTENTS is the transcoded contents string. INFO is a plist +holding export options. Adds a few extra things to the body +compared to the default implementation." + :override #'org-html-template + (concat + (when (and (not (org-html-html5-p info)) (org-html-xhtml-p info)) + (let* ((xml-declaration (plist-get info :html-xml-declaration)) + (decl (or (and (stringp xml-declaration) xml-declaration) + (cdr (assoc (plist-get info :html-extension) + xml-declaration)) + (cdr (assoc "html" xml-declaration)) + ""))) + (when (not (or (not decl) (string= "" decl))) + (format "%s\n" + (format decl + (or (and org-html-coding-system + (fboundp 'coding-system-get) + (coding-system-get org-html-coding-system 'mime-charset)) + "iso-8859-1")))))) + (org-html-doctype info) + "\n" + (concat "\n") + "\n" + (org-html--build-meta-info info) + (org-html--build-head info) + (org-html--build-mathjax-config info) + "\n" + "\n
" + (let ((link-up (org-trim (plist-get info :html-link-up))) + (link-home (org-trim (plist-get info :html-link-home)))) + (unless (and (string= link-up "") (string= link-home "")) + (format (plist-get info :html-home/up-format) + (or link-up link-home) + (or link-home link-up)))) + ;; Preamble. + (org-html--build-pre/postamble 'preamble info) + ;; Document contents. + (let ((div (assq 'content (plist-get info :html-divs)))) + (format "<%s id=\"%s\">\n" (nth 1 div) (nth 2 div))) + ;; Document title. + (when (plist-get info :with-title) + (let ((title (and (plist-get info :with-title) + (plist-get info :title))) + (subtitle (plist-get info :subtitle)) + (html5-fancy (org-html--html5-fancy-p info))) + (when title + (format + "\n" + (format-time-string "%Y-%m-%d %A %-I:%M%p") + (org-export-data (plist-get info :author) info) + (org-export-data title info) + (if subtitle + (format + (if html5-fancy + "

%s

\n" + (concat "\n" (org-html-close-tag "br" nil info) "\n" + "%s\n")) + (org-export-data subtitle info)) + ""))))) + contents + (format "\n" (nth 1 (assq 'content (plist-get info :html-divs)))) + ;; Postamble. + (org-html--build-pre/postamble 'postamble info) + ;; Possibly use the Klipse library live code blocks. + (when (plist-get info :html-klipsify-src) + (concat "")) + ;; Closing document. + "
\n\n")) +#+END_SRC + +#+BEGIN_SRC emacs-lisp +(defun org-html--build-meta-entry (label identity &optional content-format &rest content-formatters) + "Construct tag with LABEL=\"IDENTITY\" and content from CONTENT-FORMAT and CONTENT-FORMATTER." + (concat "\n")) + +(defadvice! org-html--build-meta-info-extended (info) + "Return meta tags for exported document, with more meta than usual. +INFO is a plist used as a communication channel." + :override #'org-html--build-meta-info + (let* ((protect-string + (lambda (str) + (replace-regexp-in-string + "\"" """ (org-html-encode-plain-text str)))) + (title (org-export-data (plist-get info :title) info)) + ;; Set title to an invisible character instead of leaving it + ;; empty, which is invalid. + (title (if (org-string-nw-p title) title "‎")) + (subtitle (org-export-data (plist-get info :subtitle) info)) + (author (and (plist-get info :with-author) + (let ((auth (plist-get info :author))) + ;; Return raw Org syntax. + (and auth (org-element-interpret-data auth))))) + (description (plist-get info :description)) + (keywords (plist-get info :keywords)) + (charset (or (and org-html-coding-system + (fboundp 'coding-system-get) + (coding-system-get org-html-coding-system + 'mime-charset)) + "iso-8859-1"))) + (concat + (when (plist-get info :time-stamp-file) + (format-time-string + (concat "\n"))) + + (org-html--build-meta-entry "charset" charset) + + (let ((viewport-options + (cl-remove-if-not (lambda (cell) (org-string-nw-p (cadr cell))) + (plist-get info :html-viewport)))) + (if viewport-options + (org-html--build-meta-entry "name" "viewport" + (mapconcat + (lambda (elm) (format "%s=%s" (car elm) (cadr elm))) + viewport-options ", ")))) + + (format "%s\n" title) + + (org-html--build-meta-entry "name" "generator" "Org Mode") + + (when (org-string-nw-p author) + (org-html--build-meta-entry "name" "author" author)) + + (when (org-string-nw-p description) + (org-html--build-meta-entry "name" "description" description)) + + (when (org-string-nw-p keywords) + (org-html--build-meta-entry "name" "keywords" keywords)) + + (org-html--build-meta-entry "name" "theme-color" "#77aa99") + + (org-html--build-meta-entry "property" "og:title" title) + (org-html--build-meta-entry "property" "og:type" "article") + (when (org-string-nw-p author) + (org-html--build-meta-entry "property" "og:article:author:first_name" (car (s-split " " author)))) + (when (and (org-string-nw-p author) (s-contains-p " " author)) + (org-html--build-meta-entry "property" "og:article:author:first_name" (cdr (s-split-up-to " " author 2)))) + (org-html--build-meta-entry "property" "og:article:published_time" (format-time-string "%FT%T%z")) + (when (org-string-nw-p subtitle) + (org-html--build-meta-entry "property" "og:description" subtitle))))) +#+END_SRC ***** Custom CSS/JS -There is a fantastic exporter config ([[https://github.com/fniessen/org-html-themes][fniessen/org-html-themes]]) which we can -setup to be used with all our org files. Since most of the syntax highlighting -colours from our [[*Theme and modeline][Theme]] gets used, we benefit from customising the code block style. -#+BEGIN_SRC html :tangle misc/org-export-header.html - - +The default org HTML export is ... alright, but we can really jazz it up. +[[https://lepisma.xyz][lepisma.xyz]] has a really nice style, and from and org export too! +Suffice to say I've snatched it, with a few of my own tweaks applied. - - - - +#+BEGIN_SRC html :tangle misc/org-export-header.html :comments no + + + + #+END_SRC -#+BEGIN_SRC css :tangle misc/org-export-style.css -pre.src { - background-color: var(--theme-bg); - color: var(--theme-fg); - scrollbar-color:#bbb6#9992; - scrollbar-width: thin; - margin: 0; - border: none; -} -div.org-src-container { - border-radius: 12px; - overflow: hidden; - margin-bottom: 24px; - margin-top: 1px; - border: 1px solid#e1e4e5; -} -pre.src::before { - background-color:#6666; - top: 8px; - border: none; - border-radius: 5px; - line-height: 1; - border: 2px solid var(--theme-bg); - opacity: 0; - transition: opacity 200ms; -} -pre.src:hover::before { opacity: 1; } -pre.src:active::before { opacity: 0; } - -pre.example { - border-radius: 12px; - background: var(--theme-bg-alt); - color: var(--theme-fg); -} - -code { - border-radius: 5px; - background:#e8e8e8; - font-size: 80%; -} - -kbd { - display: inline-block; - padding: 3px 5px; - font: 80% SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; - line-height: normal; - line-height: 10px; - color:#444d56; - vertical-align: middle; - background-color:#fafbfc; - border: 1px solid#d1d5da; - border-radius: 3px; - box-shadow: inset 0 -1px 0#d1d5da; -} - -table { - max-width: 100%; - overflow-x: auto; - display: block; - border-top: none; -} - -a:not([aria-hidden='true']) { - text-decoration: none; - background-image: linear-gradient(#d8dce9, #d8dce9); - background-position: 0% 100%; - background-repeat: no-repeat; - background-size: 0% 2px; - transition: background-size .3s; -} -\#table-of-contents a { - background-image: none; -} -a:hover:not([aria-hidden='true']), -a:focus:not([aria-hidden='true']) { - background-size: 100% 2px; -} -a[href^='#'] { font-variant-numeric: oldstyle-nums; } -a[href^='#']:visited { color:#3091d1; } - -li .checkbox { - display: inline-block; - width: 0.9em; - height: 0.9em; - border-radius: 3px; - margin: 3px; - top: 4px; - position: relative; -} -li.on > .checkbox { background: var(--theme-green); box-shadow: 0 0 2px var(--theme-green); } -li.trans > .checkbox { background: var(--theme-orange); box-shadow: 0 0 2px var(--theme-orange); } -li.off > .checkbox { background: var(--theme-red); box-shadow: 0 0 2px var(--theme-red); } -li.on > .checkbox::after { - content: ''; - height: 0.45em; - width: 0.225em; - -webkit-transform-origin: left top; - transform-origin: left top; - transform: scaleX(-1) rotate(135deg); - border-right: 2.8px solid#fff; - border-top: 2.8px solid#fff; - opacity: 0.9; - left: 0.10em; - top: 0.45em; - position: absolute; -} -li.trans > .checkbox::after { - content: ''; - font-weight: bold; - font-size: 1.6em; - position: absolute; - top: 0.23em; - left: 0.09em; - width: 0.35em; - height: 0.12em; - background:#fff; - opacity: 0.9; - border-radius: 0.1em; -} -li.off > .checkbox::after { - content: '✖'; - color:#fff; - opacity: 0.9; - position: relative; - top: -0.40rem; - left: 0.17em; - font-size: 0.75em; -} - -span.timestamp { - color: #003280; - background: #647CFF44; - border-radius: 3px; - line-height: 1.25; -} - -\#content img { - border-radius: 3px; -} - -\#table-of-contents { overflow-y: auto; } -blockquote p { margin: 8px 0px 16px 0px; } -\#postamble .date { color: var(--theme-green); } - -::-webkit-scrollbar { width: 10px; height: 8px; } -::-webkit-scrollbar-track { background:#9992; } -::-webkit-scrollbar-thumb { background:#ccc; border-radius: 10px; } -::-webkit-scrollbar-thumb:hover { background:#888; } - -/* sometimes this all-important space seems to go missing -/so let's protect against that. If it's exteranious it's -/just gobbled anyway. */ -span.section-number-1:after, -span.section-number-2:after, -span.section-number-3:after, -span.section-number-4:after, -span.section-number-5:after, -span.section-number-6:after { - content: ' ' -} - -/* so the bounding box coveres the */ -h1,h2,h3,h4,h5,h6 { - padding-left: 30px; - margin-left: -30px; -} - -h1 > a[aria-hidden='true'], -h2 > a[aria-hidden='true'], -h3 > a[aria-hidden='true'], -h4 > a[aria-hidden='true'], -h5 > a[aria-hidden='true'], -h6 > a[aria-hidden='true'] { - color: #6a737d; - float: left; - padding-right: 4px; - margin-left: -25px; - position: relative; - top: 7px; - line-height: 1; - font-size: 70%; - visibility: hidden; -} - -h1:hover > a[aria-hidden='true'], -h2:hover > a[aria-hidden='true'], -h3:hover > a[aria-hidden='true'], -h4:hover > a[aria-hidden='true'], -h5:hover > a[aria-hidden='true'], -h6:hover > a[aria-hidden='true'] { - visibility: visible; -} - -.music-track { - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; -} - -.music-track > img { - height: 6rem; -} - -.music-track > span { - margin-left: 2rem; - min-width: 25%; -} -#+END_SRC - -We also want to make the background and foreground colours of the ~
~ blocks
-match out theme (they don't by default), so I scraped some code from ~emacs.stackexchange~.
-#+BEGIN_SRC emacs-lisp :noweb yes
+#+BEGIN_SRC emacs-lisp
 (after! org
-  (setq org-custom-css (f-read-text (expand-file-name "misc/org-export-style.css" doom-private-dir)))
-  (setq org-custom-html-header (f-read-text (expand-file-name "misc/org-export-header.html" doom-private-dir)))
-
-  (defun my-org-inline-css-hook (exporter)
-    "Insert custom inline css to automatically set the
-   background of code to whatever theme I'm using's background"
-    (when (eq exporter 'html)
-      (setq
-       org-html-head-extra
-       (concat
-        (if (s-contains-p "" org-html-head-extra)
-            (s-replace-regexp "[^🙜]*" "" org-html-head-extra)
-          org-html-head-extra)
-        ""
-        (format ""
-                (doom-color 'bg)
-                (doom-color 'bg-alt)
-                (doom-color 'base0)
-                (doom-color 'base1)
-                (doom-color 'base2)
-                (doom-color 'base3)
-                (doom-color 'base4)
-                (doom-color 'base5)
-                (doom-color 'base6)
-                (doom-color 'base7)
-                (doom-color 'base8)
-                (doom-color 'fg)
-                (doom-color 'fg-alt)
-                (doom-color 'grey)
-                (doom-color 'red)
-                (doom-color 'orange)
-                (doom-color 'green)
-                (doom-color 'teal)
-                (doom-color 'yellow)
-                (doom-color 'blue)
-                (doom-color 'dark-blue)
-                (doom-color 'magenta)
-                (doom-color 'violet)
-                (doom-color 'cyan)
-                (doom-color 'dark-cyan))
-        (if (bound-and-true-p org-msg-currently-exporting) ""
-          (concat org-custom-html-header ""))
-        ""
-        ))))
-
-(add-hook 'org-export-before-processing-hook 'my-org-inline-css-hook))
+  (setq org-html-style-default
+        (concat (f-read-text (expand-file-name "misc/org-export-header.html" doom-private-dir))
+              "\n"))
+  org-html-htmlize-output-type 'css)
 #+END_SRC
 ***** Make verbatim different to code
 Since we have =verbatim= and ~code~, let's use =verbatim= for key strokes.
@@ -4768,9 +4662,8 @@ I want to add github-style links on hover for headings.
     (when (org-export-derived-backend-p backend 'html)
       (unless org-msg-currently-exporting
         (replace-regexp-in-string
-         "" ; this is quite restrictive, but due to `org-heading-contraction' I can do this
-         "\
- 🔗"
+         "\\(.*[^ ]\\)<\\/h[0-9]>" ; this is quite restrictive, but due to `org-heading-contraction' I can do this
+         "\\3# "
          text))))
 
   (add-to-list 'org-export-filter-headline-functions
diff --git a/misc/org-export-header.html b/misc/org-export-header.html
index 5b40558..9959a5a 100644
--- a/misc/org-export-header.html
+++ b/misc/org-export-header.html
@@ -1,9 +1,4 @@
-
-
-
+
 
-
-
-
-
-
+
+
diff --git a/misc/pile-css-theme/README.org b/misc/pile-css-theme/README.org
index cb5061e..4c6d2d8 100644
--- a/misc/pile-css-theme/README.org
+++ b/misc/pile-css-theme/README.org
@@ -1,11 +1,10 @@
 #+TITLE: pile-theme
 
-Sass files for my [[http://lepisma.github.io/][web site]].
+Sass files for my org exporting. Taken from [[github:lepisma/pile-theme][lepisma/pile-theme]].
 
 #+NAME: om-sass
 #+BEGIN_SRC shell :exports none
-sass --sourcemap=none ./main.scss ../lepisma.github.io/assets/css/main.css
-yes | cp ../lepisma.github.io/assets/css/main.css ../lepisma.github.io-deploy/assets/css/main.css
+sassc main.scss main.css
 #+END_SRC
 
 #+RESULTS: om-sass
diff --git a/misc/pile-css-theme/_blockquote.scss b/misc/pile-css-theme/_blockquote.scss
deleted file mode 100644
index d77b83d..0000000
--- a/misc/pile-css-theme/_blockquote.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-blockquote {
-  @include left-line();
-
-  p {
-    display: inline;
-    font-size: 13px;
-  }
-
-  footer {
-    @include light-meta();
-    text-transform: none;
-  }
-}
diff --git a/misc/pile-css-theme/_blocks.scss b/misc/pile-css-theme/_blocks.scss
new file mode 100644
index 0000000..dd10fe5
--- /dev/null
+++ b/misc/pile-css-theme/_blocks.scss
@@ -0,0 +1,54 @@
+blockquote {
+  @include left-line();
+
+  p {
+    display: inline;
+    font-size: 13px;
+  }
+
+  footer {
+    @include light-meta();
+    text-transform: none;
+  }
+}
+
+@mixin box($name, $base-color, $symbol-letter, $symbol-path, $symbol-height: 35px, $symbol-width: 35px, $symbol-line-height: 1.1) {
+  div.#{$name} {
+    background: rgba($base-color, 0.15);
+    border-left: 4px solid rgba($base-color, 0.45);
+    margin-top: 1.8rem;
+    margin-bottom: 1.25rem;
+    padding: 0.8em;
+    line-height: 1.4;
+    text-align: center;
+    position: relative;
+    clear: both;
+    p {
+      margin: 0;
+    }
+  }
+  div.#{$name}::before {
+    content: $symbol-letter;
+    color: $back-white;
+    background: rgba($base-color, 0.8);
+    align-items: flex-end;
+    top: -1rem;
+    font-weight: 700;
+    font-size: 1.4rem;
+    -webkit-clip-path: $symbol-path;
+    clip-path: $symbol-path;
+    width: $symbol-width;
+    height: $symbol-height;
+    display: inline-flex;
+    justify-content: center;
+    position: absolute;
+    left: -1.2rem;
+    line-height: $symbol-line-height;
+    text-align: center;
+  }
+}
+
+@include box(info, $blue, "i", circle(50% at 50% 50%), 30px, 30px, 1.3)
+@include box(success, $green, "✔", polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%), 35px, 35px, 1.5)
+@include box(warning, $orange, "!", polygon(50% 0,0 100%,100% 100%))
+@include box(error, $red, "!", polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%), 30px)
diff --git a/misc/pile-css-theme/_code.scss b/misc/pile-css-theme/_code.scss
index 9716f2e..b37ba82 100644
--- a/misc/pile-css-theme/_code.scss
+++ b/misc/pile-css-theme/_code.scss
@@ -5,8 +5,34 @@ pre.src, pre.example {
   font-family: $code-font;
   font-size: 14px;
   line-height: 1.9;
-  overflow-x: auto;
+  overflow-x: visible;
   box-shadow: none;
+  white-space: pre-wrap;
+  position: relative;
+}
+
+pre.example {
+  border-left-style: dotted;
+  border-left-width: 2px;
+}
+
+pre.src::before {
+    display: inline-block;
+    position: absolute;
+    background-color: transparent;
+    top: unset;
+    bottom: -16px;
+    left: 20px;
+    padding: 0px;
+    border: none;
+    font-size: 80%;
+    font-style: italic;
+    color: $text-light;
+}
+
+// accout for the odd result of noweb
+pre.src:empty {
+  display: none;
 }
 
 code {
@@ -16,6 +42,20 @@ code {
   padding: 0 5px;
 }
 
+kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 80% $code-font;
+    line-height: normal;
+    line-height: 80%;
+    color: $text-gray;
+    vertical-align: middle;
+    background-color: $back-light;
+    border: 1px solid #91959a88;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #91959a88;
+}
+
 li {
   code {
     font-size: 14px;
@@ -31,15 +71,15 @@ li {
 // background: #ffffff
 $code-builtin: #3a81c3;
 $code-comment: #555555;
-$code-constant: #4e3163;
-$code-doc: #2aa1ae;
-$code-func: #6c3163;
-$code-keyword: #3a81c3;
-$code-regex: #655370;
-$code-string: #2d9574;
-$code-type: #ba2f59;
-$code-variable: #715ab1;
-$code-warning: #dc752f;
+// $code-constant in _theme
+$code-doc: $cyan;
+// $code-func in _theme
+$code-keyword: $blue;
+// $code-regex: 
+$code-string: $green;
+$code-type: $red;
+$code-variable: $purple;
+$code-warning: $orange;
 
 .example,
 .src {
@@ -83,3 +123,95 @@ $code-warning: #dc752f;
     color: $code-constant;
   }
 }
+
+/* Languages per Org manual */
+
+pre.src-asymptote::before { content: 'Asymptote'; }
+pre.src-awk::before { content: 'Awk'; }
+pre.src-C::before { content: 'C'; }
+/* pre.src-C++ doesn't work in CSS */
+pre.src-clojure::before { content: 'Clojure'; }
+pre.src-css::before { content: 'CSS'; }
+pre.src-D::before { content: 'D'; }
+pre.src-ditaa::before { content: 'ditaa'; }
+pre.src-dot::before { content: 'Graphviz'; }
+pre.src-calc::before { content: 'Emacs Calc'; }
+pre.src-emacs-lisp::before { content: 'Emacs Lisp'; }
+pre.src-fortran::before { content: 'Fortran'; }
+pre.src-gnuplot::before { content: 'gnuplot'; }
+pre.src-haskell::before { content: 'Haskell'; }
+pre.src-hledger::before { content: 'hledger'; }
+pre.src-java::before { content: 'Java'; }
+pre.src-js::before { content: 'Javascript'; }
+pre.src-latex::before { content: 'LaTeX'; }
+pre.src-ledger::before { content: 'Ledger'; }
+pre.src-lisp::before { content: 'Lisp'; }
+pre.src-lilypond::before { content: 'Lilypond'; }
+pre.src-lua::before { content: 'Lua'; }
+pre.src-matlab::before { content: 'MATLAB'; }
+pre.src-mscgen::before { content: 'Mscgen'; }
+pre.src-ocaml::before { content: 'Objective Caml'; }
+pre.src-octave::before { content: 'Octave'; }
+pre.src-org::before { content: 'Org mode'; }
+pre.src-oz::before { content: 'OZ'; }
+pre.src-plantuml::before { content: 'Plantuml'; }
+pre.src-processing::before { content: 'Processing.js'; }
+pre.src-python::before { content: 'Python'; }
+pre.src-R::before { content: 'R'; }
+pre.src-ruby::before { content: 'Ruby'; }
+pre.src-sass::before { content: 'Sass'; }
+pre.src-scheme::before { content: 'Scheme'; }
+pre.src-screen::before { content: 'Gnu Screen'; }
+pre.src-sed::before { content: 'Sed'; }
+pre.src-sh::before { content: 'shell'; }
+pre.src-sql::before { content: 'SQL'; }
+pre.src-sqlite::before { content: 'SQLite'; }
+/* additional languages in org.el's org-babel-load-languages alist */
+pre.src-forth::before { content: 'Forth'; }
+pre.src-io::before { content: 'IO'; }
+pre.src-J::before { content: 'J'; }
+pre.src-makefile::before { content: 'Makefile'; }
+pre.src-maxima::before { content: 'Maxima'; }
+pre.src-perl::before { content: 'Perl'; }
+pre.src-picolisp::before { content: 'Pico Lisp'; }
+pre.src-scala::before { content: 'Scala'; }
+pre.src-shell::before { content: 'Shell Script'; }
+pre.src-ebnf2ps::before { content: 'ebfn2ps'; }
+/* additional language identifiers per \"defun org-babel-execute\"
+      in ob-*.el */
+pre.src-cpp::before  { content: 'C++'; }
+pre.src-abc::before  { content: 'ABC'; }
+pre.src-coq::before  { content: 'Coq'; }
+pre.src-groovy::before  { content: 'Groovy'; }
+/* additional language identifiers from org-babel-shell-names in
+    ob-shell.el: ob-shell is the only babel language using a lambda to put
+    the execution function name together. */
+pre.src-bash::before  { content: 'bash'; }
+pre.src-csh::before  { content: 'csh'; }
+pre.src-ash::before  { content: 'ash'; }
+pre.src-dash::before  { content: 'dash'; }
+pre.src-ksh::before  { content: 'ksh'; }
+pre.src-mksh::before  { content: 'mksh'; }
+pre.src-posh::before  { content: 'posh'; }
+/* Additional Emacs modes also supported by the LaTeX listings package */
+pre.src-ada::before { content: 'Ada'; }
+pre.src-asm::before { content: 'Assembler'; }
+pre.src-caml::before { content: 'Caml'; }
+pre.src-delphi::before { content: 'Delphi'; }
+pre.src-html::before { content: 'HTML'; }
+pre.src-idl::before { content: 'IDL'; }
+pre.src-mercury::before { content: 'Mercury'; }
+pre.src-metapost::before { content: 'MetaPost'; }
+pre.src-modula-2::before { content: 'Modula-2'; }
+pre.src-pascal::before { content: 'Pascal'; }
+pre.src-ps::before { content: 'PostScript'; }
+pre.src-prolog::before { content: 'Prolog'; }
+pre.src-simula::before { content: 'Simula'; }
+pre.src-tcl::before { content: 'tcl'; }
+pre.src-tex::before { content: 'LaTeX'; }
+pre.src-plain-tex::before { content: 'TeX'; }
+pre.src-verilog::before { content: 'Verilog'; }
+pre.src-vhdl::before { content: 'VHDL'; }
+pre.src-xml::before { content: 'XML'; }
+pre.src-nxml::before { content: 'XML'; }
+pre.src-conf::before { content: 'Configuration File'; }
diff --git a/misc/pile-css-theme/_commons.scss b/misc/pile-css-theme/_commons.scss
index 07d5877..e7112ce 100644
--- a/misc/pile-css-theme/_commons.scss
+++ b/misc/pile-css-theme/_commons.scss
@@ -1,64 +1,32 @@
 // Common mixins and variables
 @charset "UTF-8";
 
-// Shades
-$c1: #000;
-$c2: #222;
-$c3: #444;
-$c4: #7b7b7b;
-$c5: #c8c8c8;
-$c6: #efefef;
-$c7: #fff;
-
-$accent: #002642;
-$accent-dark: #00151c;
-
-$code-foreground: #2c3e50;
-$code-background: $c6;
-
-$back-white: $c7;
-$back-light: $c6;
-$back-medium: $c5;
-
-$text-light: $c4;
-$text-gray: $c3;
-$text-medium: $c2;
-$text-dark: $c1;
+@import 'theme';
 
 // Fonts
-@font-face {
-  font-family: 'Bebas Neue Bold';
-  src: url("../fonts/BebasNeue Bold.otf");
-}
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');
+
 @font-face {
   font-family: 'et-book';
-  src: url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot');
-  src: url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix') format('embedded-opentype'), url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff') format('woff'), url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf') format('truetype'), url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf') format('svg');
+  src: url('https://tecosaur.com/resources/org/etbookot-roman-webfont.woff2') format('woff2');
   font-weight: normal;
-  font-style: normal
+  font-style: normal;
+  font-display: fallback;
 }
 
 @font-face {
   font-family: 'et-book';
-  src: url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot');
-  src: url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix') format('embedded-opentype'), url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff') format('woff'), url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf') format('truetype'), url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf') format('svg');
+  src: url('https://tecosaur.com/resources/org/etbookot-italic-webfont.woff2') format('woff2');
   font-weight: normal;
-  font-style: italic
-}
-
-@font-face {
-  font-family: 'et-book';
-  src: url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot');
-  src: url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix') format('embedded-opentype'), url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff') format('woff'), url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf') format('truetype'), url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf') format('svg');
-  font-weight: bold;
-  font-style: normal
+  font-style: italic;
+  font-display: fallback;
 }
 
 // Face variables
 $sans-font: 'Open Sans';
 $body-font: 'Merriweather';
 $title-font: 'et-book';
-$code-font: 'Fira Mono';
+$code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
 
 @mixin text-underline-crop($background) {
   text-shadow: .03em 0 $background,
@@ -100,7 +68,7 @@ $code-font: 'Fira Mono';
   @include text-selection($back-medium);
 
   border-radius: 1px;
-  background-color: $background;
+  // background-color: $background;
   color: $text;
   text-decoration: none;
 
@@ -179,7 +147,6 @@ $code-font: 'Fira Mono';
   font-size: 12px;
   line-height: 1.9;
   color: $text-light;
-  text-transform: uppercase;
 }
 
 @mixin left-line() {
diff --git a/misc/pile-css-theme/_figure.scss b/misc/pile-css-theme/_figure.scss
index c6cbce8..cdb5682 100644
--- a/misc/pile-css-theme/_figure.scss
+++ b/misc/pile-css-theme/_figure.scss
@@ -1,8 +1,5 @@
 figure {
   text-align: center;
-  img {
-    max-width: 100%;
-  }
   figcaption {
     .figure-number {
       @include light-meta();
@@ -15,3 +12,9 @@ figure {
 img.zoomTarget:hover {
   cursor: default !important;
 }
+
+// make white image backgrounds match page
+img {
+  filter: invert(6%);
+    max-width: 100%;
+}
diff --git a/misc/pile-css-theme/_headings.scss b/misc/pile-css-theme/_headings.scss
index faa5144..f6e4223 100644
--- a/misc/pile-css-theme/_headings.scss
+++ b/misc/pile-css-theme/_headings.scss
@@ -13,21 +13,81 @@ h6 {
   margin-top: 60px;
 }
 
+// link
+
+h1 > a[aria-hidden='true'],
+h2 > a[aria-hidden='true'],
+h3 > a[aria-hidden='true'],
+h4 > a[aria-hidden='true'],
+h5 > a[aria-hidden='true'],
+h6 > a[aria-hidden='true'] {
+    color: $back-medium;
+    position: relative;
+    top: 0.06em;
+    line-height: 1;
+    font-size: 110%;
+    padding-left: 0.2em;
+    text-decoration: none;
+    visibility: hidden;
+}
+h1 > a[aria-hidden='true']:hover,
+h2 > a[aria-hidden='true']:hover,
+h3 > a[aria-hidden='true']:hover,
+h4 > a[aria-hidden='true']:hover,
+h5 > a[aria-hidden='true']:hover,
+h6 > a[aria-hidden='true']:hover {
+    color: $text-light;
+}
+h1:hover > a[aria-hidden='true'],
+h2:hover > a[aria-hidden='true'],
+h3:hover > a[aria-hidden='true'],
+h4:hover > a[aria-hidden='true'],
+h5:hover > a[aria-hidden='true'],
+h6:hover > a[aria-hidden='true'] {
+    visibility: visible;
+}
+h1,h2,h3,h4,h5,h6 {
+// so the bounding box coveres the  
+    padding-left: 30px;
+    margin-left: -30px;
+    // to work with the right-aligned section numbers
+    position: relative;
+}
+
 // Override sizes
-h1 {
+h1, .section-number-1 {
+  font-size: 40px;
+}
+
+h2, .section-number-2  {
   font-size: 30px;
 }
 
-h2 {
+h3, .section-number-3  {
   font-size: 24px;
 }
 
-// Just use three levels
-h3, h4, h5, h6 {
+h4, .section-number-4  {
   font-size: 20px;
   font-style: italic;
 }
 
+h5 {
+  font-size: 20px;
+  font-variant: small-caps;
+}
+.section-number-5 {
+  font-size: 20px;
+}
+
+h6 {
+  font-size: 18px;
+  font-style: italic;
+}
+.section-number-6 {
+  font-size: 18px;
+}
+
 // Section numbers
 .section-number-1,
 .section-number-2,
@@ -36,20 +96,28 @@ h3, h4, h5, h6 {
 .section-number-5,
 .section-number-6 {
   @include light-meta();
+  font-size: inherit;
   color: $back-medium;
+  line-height: 1;
+  position: absolute; // to remove the bounding box
+  transform: translateX(-100%) translateX(-10px);
 }
 
-.section-number-1 {
-  font-size: 30px;
-}
+// spacing tweaks
 
-.section-number-2 {
-  font-size: 24px;
-}
-
-.section-number-3,
-.section-number-4,
-.section-number-5,
-.section-number-6 {
-  font-size: 20px;
-}
+.outline-text-2:empty, .outline-text-2:-moz-only-whitespace {
+  + .outline-3 > h3 {
+    margin-top: 20px;
+  }}
+.outline-text-3:empty, .outline-text-3:-moz-only-whitespace {
+  + .outline-4 > h4 {
+    margin-top: 15px;
+  }}
+.outline-text-4:empty, .outline-text-4:-moz-only-whitespace {
+  + .outline-5 > h5 {
+    margin-top: 15px;
+  }}
+.outline-text-5:empty, .outline-text-5:-moz-only-whitespace {
+  + .outline-6 > h6 {
+    margin-top: 10px;
+  }}
diff --git a/misc/pile-css-theme/_layout.scss b/misc/pile-css-theme/_layout.scss
index 74d5e6a..f4dc595 100644
--- a/misc/pile-css-theme/_layout.scss
+++ b/misc/pile-css-theme/_layout.scss
@@ -11,13 +11,18 @@ body {
   font-family: $body-font;
 }
 
+#page {
+  color: $text-dark;
+  background-color: $back-light;
+}
+
 #content, header, .page-header {
   margin: 32px;
   flex: 1 0 auto;
 }
 
 #content {
-  margin-top: 0;
+  margin-top: 4rem;
 }
 
 .clearfix::after {
@@ -31,11 +36,16 @@ body {
 
 .page-header {
   margin-top: 80px;
+  margin-left: 0 !important; // as inside #content
   h1 {
     font-size: 40px;
     margin-bottom: 10px;
     margin-top: 10px;
     text-transform: none;
+    .subtitle {
+      font-size: 24px;
+      color: $text-light;
+    }
   }
 }
 
@@ -158,3 +168,7 @@ header > div {
     }
   }
 }
+
+#postamble {
+  display: none;
+}
diff --git a/misc/pile-css-theme/_links.scss b/misc/pile-css-theme/_links.scss
index ba5f794..57cf950 100644
--- a/misc/pile-css-theme/_links.scss
+++ b/misc/pile-css-theme/_links.scss
@@ -6,11 +6,40 @@ p a,
 .page-tags a,
 table a,
 #crosslinks a:not(.highlight),
-li a {
+li a,
+dl a {
   @include link-underline($back-white, $text-dark);
 
   &:hover {
-    @include link-underline($back-light, $text-dark);
+    @include text-underline-crop($back-white);
+    @include text-background($back-white, $text-dark);
+    @include text-selection($back-white);
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
+    background-position: 0% 100%;
+    background-size: 0.8em auto;
+    text-decoration: none;
+  }
+
+  &[href^="#"] {
+    color: $text-gray;
+    &:hover {
+      @include link-underline($back-white, $text-medium);
+    }
+  }
+}
+
+#theme-switch:checked ~ #page {
+  #breadcrumbs a,
+  figcaption a,
+  p a,
+  .page-tags a,
+  table a,
+  #crosslinks a:not(.highlight),
+  li a,
+  dl a {
+    &:hover {
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
+    }
   }
 }
 
diff --git a/misc/pile-css-theme/_lists.scss b/misc/pile-css-theme/_lists.scss
index b492aea..cc36eaa 100644
--- a/misc/pile-css-theme/_lists.scss
+++ b/misc/pile-css-theme/_lists.scss
@@ -73,3 +73,53 @@ dl {
     margin-bottom: 20px;
   }
 }
+
+// checkboxes
+li .checkbox {
+    display: inline-block;
+    width: 0.9em;
+    height: 0.9em;
+    border-radius: 3px;
+    margin: 3px;
+    top: 4px;
+    position: relative;
+}
+li.on > .checkbox { background: $green; box-shadow: 0 0 2px $green; }
+li.trans > .checkbox { background: $orange; box-shadow: 0 0 2px $orange; }
+li.off > .checkbox { background: $red; box-shadow: 0 0 2px $red; top: 6px }
+li.on > .checkbox::after {
+    content: '';
+    height: 0.45em;
+    width: 0.225em;
+    -webkit-transform-origin: left top;
+    transform-origin: left top;
+    transform: scaleX(-1) rotate(135deg);
+    border-right: 2.8px solid#fff;
+    border-top: 2.8px solid#fff;
+    opacity: 0.9;
+    left: 0.10em;
+    top: 0.45em;
+    position: absolute;
+}
+li.trans > .checkbox::after {
+    content: '';
+    font-weight: bold;
+    font-size: 1.6em;
+    position: absolute;
+    top: 0.2em;
+    left: 0.11em;
+    width: 0.35em;
+    height: 0.12em;
+    background:#fff;
+    opacity: 0.9;
+    border-radius: 0.1em;
+}
+li.off > .checkbox::after {
+    content: '✖';
+    color:#fff;
+    opacity: 0.9;
+    position: relative;
+    top: -0.50rem;
+    left: 0.17em;
+    font-size: 0.75em;
+}
diff --git a/misc/pile-css-theme/_org.scss b/misc/pile-css-theme/_org.scss
index 28125b9..0b84c65 100644
--- a/misc/pile-css-theme/_org.scss
+++ b/misc/pile-css-theme/_org.scss
@@ -1,7 +1,6 @@
 // Org export specific styling
 
-#org-div-home-and-up,
-pre.src:hover::before {
+#org-div-home-and-up {
   display: none !important;
 }
 
@@ -25,6 +24,8 @@ pre.src:hover::before {
 
 .timestamp, .timestamp-kwd {
   @include light-meta();
+  background-color: $back-white;
+  border-radius: 1px;
 }
 
 .todo, .done {
diff --git a/misc/pile-css-theme/_table.scss b/misc/pile-css-theme/_table.scss
index 3e1e0b3..d637ae2 100644
--- a/misc/pile-css-theme/_table.scss
+++ b/misc/pile-css-theme/_table.scss
@@ -3,7 +3,8 @@ table {
   border-left: transparent;
   border-right: transparent;
   border-style: solid;
-  border-width: 1px;
+  border-width: 2px;
+  border-collapse: collapse;
   font-size: 15px;
   font-family: $sans-font;
   margin: 20px;
@@ -11,11 +12,20 @@ table {
 
   thead {
     @include light-meta();
+    font-size: 15px;
+    tr th {
+      padding: 4px 10px;
+      background-color: #9991;
+    }
+    tr:last-of-type th {
+      border-bottom: solid 1px $text-light;
+    }
+   
+    
   }
-
-  thead tr th {
-    border-bottom: solid 1px $back-light;
-    padding: 10px;
+  
+  tr,th,td {
+    border: none;
   }
 
   tbody tr td {
@@ -23,12 +33,6 @@ table {
     padding: 0 10px;
   }
 
-  thead tr th,
-  tbody tr td {
-    border-left: solid 1px $back-light;
-    border-right: solid 1px $back-light;
-  }
-
   tr {
     line-height: 1.9;
   }
diff --git a/misc/pile-css-theme/_theme.scss b/misc/pile-css-theme/_theme.scss
new file mode 100644
index 0000000..6a167fc
--- /dev/null
+++ b/misc/pile-css-theme/_theme.scss
@@ -0,0 +1,107 @@
+$blue: #3a81c3;
+$green: #2d9574;
+$red: #ba2f59;
+$orange: #dc752f;
+$cyan: #2aa1ae;
+$purple: #715ab1;
+
+$accent: var(--accent);
+$accent-dark: var(--accent-dark);
+
+$code-foreground: var(--code-foreground);
+$code-background: var(--code-background);
+$code-func: var(--code-func);
+$code-constant: var(--code-const);
+$code-regex: var(--code-regex);
+
+$back-white: var(--back-white);
+$back-light: var(--back-light);
+$back-medium: var(--back-medium);
+
+$text-light: var(--text-light);
+$text-gray: var(--text-gray);
+$text-medium: var(--text-medium);
+$text-dark: var(--text-dark);
+
+#page {
+  --accent: #002642;
+  --accent-dark: #00151c;
+
+  --code-foreground: #2c3e50;
+  --code-background: #efefef;
+  --code-func: #6c3163;
+  --code-const: #4e3163;
+  --code-regex: #655370;
+
+  --back-white: #fff;
+  --back-light: #efefef;
+  --back-medium: #c8c8c8;
+
+  --text-light: #7b7b7b;
+  --text-gray: #444;
+  --text-medium: #222;
+  --text-dark: #000;
+
+  --switch-icon: "🌝";
+  --switch-shadow-color: #fce477;
+}
+
+#theme-switch:checked ~ #page {
+    --accent: #002642;
+    --accent-dark: #daf1ff;
+
+    --code-foreground: #a1a8ae;
+    --code-background: #222;
+    --code-func: #bd56ad;
+    --code-const: #8755ab;
+    --code-regex: #a184b3;
+
+    --back-white: #000;
+    --back-light: #111;
+    --back-medium: #444;
+
+    --text-light: #7b7b7b;
+    --text-gray: #c8c8c8;
+    --text-medium: #ddd;
+    --text-dark: #efefef;
+
+    --switch-icon: "🌚";
+    --switch-shadow-color: #373d4e;
+    img.invertable {
+        filter: invert(93%);
+    }
+}
+
+#theme-switch {
+    display: none;
+}
+
+#switch-label {
+    position: fixed;
+    bottom: 4rem;
+    left: 3rem;
+}
+@media (max-width: 1000px) {
+    #switch-label {
+        left: auto;
+        left: bottom;
+        right: 1%;
+        top: 2.5rem;
+    }
+}
+
+#switch-label::before {
+  content: var(--switch-icon);
+  font-size: 20px;
+  transition: text-shadow .2s;
+}
+
+#switch-label::after {
+  content: var(--switch-text);
+  color: var(--switch-shadow-color);
+}
+
+#theme-switch:focus ~ #page #switch-label::before,
+#switch-label:hover::before {
+  text-shadow: 0 0 15px var(--switch-shadow-color);
+}
diff --git a/misc/pile-css-theme/_toc.scss b/misc/pile-css-theme/_toc.scss
index 82c5674..870d6f6 100644
--- a/misc/pile-css-theme/_toc.scss
+++ b/misc/pile-css-theme/_toc.scss
@@ -17,14 +17,6 @@ nav#table-of-contents {
     @include light-meta();
     margin-top: 10px;
   }
-
-  li a {
-    @include link-underline($code-background, $text-gray);
-
-    &:hover {
-      @include link-underline($code-background, $text-gray);
-    }
-  }
 }
 
 @media (min-width: 1280px) {
@@ -68,13 +60,79 @@ nav#table-of-contents {
     li::before {
       content: "";
     }
+  }
+}
 
-    li a {
-      @include link-underline($back-white, $text-gray);
+//
+// Fancy toc
+//
 
-      &:hover {
-        @include link-underline($back-light, $text-gray);
+::-webkit-scrollbar { width: 10px; height: 8px; }
+::-webkit-scrollbar-track { background:transparent; }
+::-webkit-scrollbar-thumb { background:transparent; border-radius: 10px; }
+::-webkit-scrollbar-thumb:hover { background:transparent; }
+
+@media (min-width: 1280px) {
+  #table-of-contents {
+    position: fixed;
+    right: 4rem;
+    top: 0;
+    padding: 1em;
+    width: 15rem;
+    line-height: 1.5;
+    margin-top: 4rem;
+    h2 {
+      margin-top: 0;
+    }
+    > div > ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      max-height: calc(100vh - 5rem - 40px);
+      overflow-y: auto;
+      overflow-x: visible;
+      scrollbar-color: transparent transparent;
+      scrollbar-width: thin;
+      ul {
+        padding-left: 2em;
       }
+      > li {
+        display: block;
+      }
+    }
+    ul.active > li {
+      display: block;
+    }
+    li {
+      display: none;
+      a {
+        display: inline-block;
+        color: $text-light;
+        text-decoration: none;
+        -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+        // negating earlir styles
+        text-shadow: none;
+        background: none;
+      }
+    }
+    li:hover, li:hover > ul > li {
+      display: block !important;
+      a {
+        color: $text-gray;
+      }
+    }
+    li.active > a {
+      color: $text-dark;
+    }
+    li::before {
+      content: "";
     }
   }
 }
+
+@media (min-width: 1640px) {
+  #table-of-contents {
+    right: 10rem;
+  }
+}
diff --git a/misc/pile-css-theme/main.css b/misc/pile-css-theme/main.css
index 097b3e7..21b8289 100644
--- a/misc/pile-css-theme/main.css
+++ b/misc/pile-css-theme/main.css
@@ -7,6 +7,7 @@
  * 2. Prevent adjustments of font size after orientation changes in
  *    IE on Windows Phone and in iOS.
  */
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap");
 html {
   line-height: 1.15;
   /* 1 */
@@ -390,39 +391,94 @@ template {
 [hidden] {
   display: none; }
 
-@font-face {
-  font-family: 'Bebas Neue Bold';
-  src: url("../fonts/BebasNeue Bold.otf"); }
+#page {
+  --accent: #002642;
+  --accent-dark: #00151c;
+  --code-foreground: #2c3e50;
+  --code-background: #efefef;
+  --code-func: #6c3163;
+  --code-const: #4e3163;
+  --code-regex: #655370;
+  --back-white: #fff;
+  --back-light: #efefef;
+  --back-medium: #c8c8c8;
+  --text-light: #7b7b7b;
+  --text-gray: #444;
+  --text-medium: #222;
+  --text-dark: #000;
+  --switch-icon: "🌝";
+  --switch-shadow-color: #fce477; }
+
+#theme-switch:checked ~ #page {
+  --accent: #002642;
+  --accent-dark: #daf1ff;
+  --code-foreground: #a1a8ae;
+  --code-background: #222;
+  --code-func: #bd56ad;
+  --code-const: #8755ab;
+  --code-regex: #a184b3;
+  --back-white: #000;
+  --back-light: #111;
+  --back-medium: #444;
+  --text-light: #7b7b7b;
+  --text-gray: #c8c8c8;
+  --text-medium: #ddd;
+  --text-dark: #efefef;
+  --switch-icon: "🌚";
+  --switch-shadow-color: #373d4e; }
+  #theme-switch:checked ~ #page img.invertable {
+    filter: invert(93%); }
+
+#theme-switch {
+  display: none; }
+
+#switch-label {
+  position: fixed;
+  bottom: 4rem;
+  left: 3rem; }
+
+@media (max-width: 1000px) {
+  #switch-label {
+    left: auto;
+    left: bottom;
+    right: 1%;
+    top: 2.5rem; } }
+
+#switch-label::before {
+  content: var(--switch-icon);
+  font-size: 20px;
+  transition: text-shadow .2s; }
+
+#switch-label::after {
+  content: var(--switch-text);
+  color: var(--switch-shadow-color); }
+
+#theme-switch:focus ~ #page #switch-label::before,
+#switch-label:hover::before {
+  text-shadow: 0 0 15px var(--switch-shadow-color); }
 
 @font-face {
   font-family: 'et-book';
-  src: url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
-  src: url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
+  src: url("https://tecosaur.com/resources/org/etbookot-roman-webfont.woff2") format("woff2");
   font-weight: normal;
-  font-style: normal; }
+  font-style: normal;
+  font-display: fallback; }
 
 @font-face {
   font-family: 'et-book';
-  src: url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
-  src: url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");
+  src: url("https://tecosaur.com/resources/org/etbookot-italic-webfont.woff2") format("woff2");
   font-weight: normal;
-  font-style: italic; }
-
-@font-face {
-  font-family: 'et-book';
-  src: url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
-  src: url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
-  font-weight: bold;
-  font-style: normal; }
+  font-style: italic;
+  font-display: fallback; }
 
 *::selection {
-  background: #c8c8c8; }
+  background: var(--back-medium); }
 
 *::-moz-selection {
-  background: #c8c8c8; }
+  background: var(--back-medium); }
 
 .pace .pace-progress {
-  background-color: #002642 !important; }
+  background-color: var(--accent) !important; }
 
 html, body {
   height: 100%; }
@@ -433,12 +489,16 @@ body {
   font-size: 16px;
   font-family: "Merriweather"; }
 
+#page {
+  color: var(--text-dark);
+  background-color: var(--back-light); }
+
 #content, header, .page-header {
   margin: 32px;
   flex: 1 0 auto; }
 
 #content {
-  margin-top: 0; }
+  margin-top: 4rem; }
 
 .clearfix::after {
   clear: both; }
@@ -448,12 +508,16 @@ body {
   display: table; }
 
 .page-header {
-  margin-top: 80px; }
+  margin-top: 80px;
+  margin-left: 0 !important; }
   .page-header h1 {
     font-size: 40px;
     margin-bottom: 10px;
     margin-top: 10px;
     text-transform: none; }
+    .page-header h1 .subtitle {
+      font-size: 24px;
+      color: var(--text-light); }
 
 .page-meta {
   font-family: "Open Sans";
@@ -461,8 +525,7 @@ body {
   font-style: normal;
   font-size: 12px;
   line-height: 1.9;
-  color: #7b7b7b;
-  text-transform: uppercase; }
+  color: var(--text-light); }
 
 header .site-nav {
   font-family: "Open Sans";
@@ -470,17 +533,16 @@ header .site-nav {
   font-style: normal;
   font-size: 12px;
   line-height: 1.9;
-  color: #7b7b7b;
-  text-transform: uppercase;
+  color: var(--text-light);
   font-weight: bold;
   line-height: 2.0;
   margin-top: 22px; }
   header .site-nav a {
-    color: #7b7b7b;
+    color: var(--text-light);
     text-decoration: none;
     margin-left: 10px; }
     header .site-nav a:hover {
-      color: #444; }
+      color: var(--text-gray); }
     header .site-nav a.active {
       border-bottom: solid;
       border-bottom-width: 2px; }
@@ -504,14 +566,14 @@ header > div {
       max-width: 32px; }
 
 .site-header nav a {
-  color: #7b7b7b;
+  color: var(--text-light);
   font-family: "Open Sans";
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase; }
   .site-header nav a:hover {
     border: 0;
-    color: #002642; }
+    color: var(--accent); }
 
 @media (max-width: 1000px) {
   header * {
@@ -532,7 +594,7 @@ header > div {
   font-weight: normal;
   font-size: 15px;
   line-height: 1.6;
-  color: #444;
+  color: var(--text-gray);
   margin-bottom: 40px; }
 
 #content p, #content li, #content dd {
@@ -541,7 +603,7 @@ header > div {
 #footer {
   margin-top: 70px;
   height: 10px;
-  background: #00151c; }
+  background: var(--accent-dark); }
 
 .archive-item {
   margin: 50px 0; }
@@ -556,14 +618,17 @@ header > div {
       text-shadow: none;
       text-decoration: none; }
 
+#postamble {
+  display: none; }
+
 aside, .aside {
-  background-color: #efefef;
+  background-color: var(--code-background);
   border-radius: 5px;
   font-family: "Open Sans";
   font-weight: normal;
   font-size: 15px;
   line-height: 1.6;
-  color: #444;
+  color: var(--text-gray);
   margin: 20px 0;
   padding: 20px;
   padding-bottom: 10px;
@@ -573,29 +638,28 @@ aside, .aside {
   aside p a, .aside figcaption a,
   .aside li a,
   .aside p a {
-    text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-    background-image: linear-gradient(#444, #444);
+    text-shadow: 0.03em 0 var(--code-background), -0.03em 0 var(--code-background), 0 0.03em var(--code-background), 0 -0.03em var(--code-background), 0.06em 0 var(--code-background), -0.06em 0 var(--code-background), 0.09em 0 var(--code-background), -0.09em 0 var(--code-background), 0.12em 0 var(--code-background), -0.12em 0 var(--code-background), 0.15em 0 var(--code-background), -0.15em 0 var(--code-background);
+    background-image: linear-gradient(var(--text-gray), var(--text-gray));
     background-size: 1px 1px;
     background-repeat: repeat-x;
     background-position: 0% 95%;
     border-radius: 1px;
-    background-color: #efefef;
-    color: #444;
+    color: var(--text-gray);
     text-decoration: none; }
     aside figcaption a::selection,
     aside li a::selection,
     aside p a::selection, .aside figcaption a::selection,
     .aside li a::selection,
     .aside p a::selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
+      text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+      background: var(--back-medium); }
     aside figcaption a::-moz-selection,
     aside li a::-moz-selection,
     aside p a::-moz-selection, .aside figcaption a::-moz-selection,
     .aside li a::-moz-selection,
     .aside p a::-moz-selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
+      text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+      background: var(--back-medium); }
     aside figcaption a *,
     aside figcaption a *:after, aside figcaption a:after,
     aside figcaption a *:before, aside figcaption a:before,
@@ -627,35 +691,34 @@ aside, .aside {
     aside p a:visited, .aside figcaption a:visited,
     .aside li a:visited,
     .aside p a:visited {
-      color: #444; }
+      color: var(--text-gray); }
     aside figcaption a:hover,
     aside li a:hover,
     aside p a:hover, .aside figcaption a:hover,
     .aside li a:hover,
     .aside p a:hover {
-      text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-      background-image: linear-gradient(#444, #444);
+      text-shadow: 0.03em 0 var(--code-background), -0.03em 0 var(--code-background), 0 0.03em var(--code-background), 0 -0.03em var(--code-background), 0.06em 0 var(--code-background), -0.06em 0 var(--code-background), 0.09em 0 var(--code-background), -0.09em 0 var(--code-background), 0.12em 0 var(--code-background), -0.12em 0 var(--code-background), 0.15em 0 var(--code-background), -0.15em 0 var(--code-background);
+      background-image: linear-gradient(var(--text-gray), var(--text-gray));
       background-size: 1px 1px;
       background-repeat: repeat-x;
       background-position: 0% 95%;
       border-radius: 1px;
-      background-color: #efefef;
-      color: #444;
+      color: var(--text-gray);
       text-decoration: none; }
       aside figcaption a:hover::selection,
       aside li a:hover::selection,
       aside p a:hover::selection, .aside figcaption a:hover::selection,
       .aside li a:hover::selection,
       .aside p a:hover::selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
+        text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+        background: var(--back-medium); }
       aside figcaption a:hover::-moz-selection,
       aside li a:hover::-moz-selection,
       aside p a:hover::-moz-selection, .aside figcaption a:hover::-moz-selection,
       .aside li a:hover::-moz-selection,
       .aside p a:hover::-moz-selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
+        text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+        background: var(--back-medium); }
       aside figcaption a:hover *,
       aside figcaption a:hover *:after, aside figcaption a:hover:after,
       aside figcaption a:hover *:before, aside figcaption a:hover:before,
@@ -687,13 +750,13 @@ aside, .aside {
       aside p a:hover:visited, .aside figcaption a:hover:visited,
       .aside li a:hover:visited,
       .aside p a:hover:visited {
-        color: #444; }
+        color: var(--text-gray); }
   aside p, .aside p {
     font-family: "Open Sans";
     font-weight: normal;
     font-size: 15px;
     line-height: 1.6;
-    color: #444;
+    color: var(--text-gray);
     line-height: 1.6 !important; }
   aside pre, .aside pre {
     font-size: 12px;
@@ -704,7 +767,7 @@ aside, .aside {
   aside, .aside {
     float: right;
     clear: right;
-    background-color: #fff;
+    background-color: var(--back-white);
     max-width: 45% !important;
     margin-right: -52%; }
     aside figcaption a,
@@ -712,29 +775,28 @@ aside, .aside {
     aside p a, .aside figcaption a,
     .aside li a,
     .aside p a {
-      text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
-      background-image: linear-gradient(#444, #444);
+      text-shadow: 0.03em 0 var(--back-white), -0.03em 0 var(--back-white), 0 0.03em var(--back-white), 0 -0.03em var(--back-white), 0.06em 0 var(--back-white), -0.06em 0 var(--back-white), 0.09em 0 var(--back-white), -0.09em 0 var(--back-white), 0.12em 0 var(--back-white), -0.12em 0 var(--back-white), 0.15em 0 var(--back-white), -0.15em 0 var(--back-white);
+      background-image: linear-gradient(var(--text-gray), var(--text-gray));
       background-size: 1px 1px;
       background-repeat: repeat-x;
       background-position: 0% 95%;
       border-radius: 1px;
-      background-color: #fff;
-      color: #444;
+      color: var(--text-gray);
       text-decoration: none; }
       aside figcaption a::selection,
       aside li a::selection,
       aside p a::selection, .aside figcaption a::selection,
       .aside li a::selection,
       .aside p a::selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
+        text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+        background: var(--back-medium); }
       aside figcaption a::-moz-selection,
       aside li a::-moz-selection,
       aside p a::-moz-selection, .aside figcaption a::-moz-selection,
       .aside li a::-moz-selection,
       .aside p a::-moz-selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
+        text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+        background: var(--back-medium); }
       aside figcaption a *,
       aside figcaption a *:after, aside figcaption a:after,
       aside figcaption a *:before, aside figcaption a:before,
@@ -766,35 +828,34 @@ aside, .aside {
       aside p a:visited, .aside figcaption a:visited,
       .aside li a:visited,
       .aside p a:visited {
-        color: #444; }
+        color: var(--text-gray); }
       aside figcaption a:hover,
       aside li a:hover,
       aside p a:hover, .aside figcaption a:hover,
       .aside li a:hover,
       .aside p a:hover {
-        text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-        background-image: linear-gradient(#444, #444);
+        text-shadow: 0.03em 0 var(--back-light), -0.03em 0 var(--back-light), 0 0.03em var(--back-light), 0 -0.03em var(--back-light), 0.06em 0 var(--back-light), -0.06em 0 var(--back-light), 0.09em 0 var(--back-light), -0.09em 0 var(--back-light), 0.12em 0 var(--back-light), -0.12em 0 var(--back-light), 0.15em 0 var(--back-light), -0.15em 0 var(--back-light);
+        background-image: linear-gradient(var(--text-gray), var(--text-gray));
         background-size: 1px 1px;
         background-repeat: repeat-x;
         background-position: 0% 95%;
         border-radius: 1px;
-        background-color: #efefef;
-        color: #444;
+        color: var(--text-gray);
         text-decoration: none; }
         aside figcaption a:hover::selection,
         aside li a:hover::selection,
         aside p a:hover::selection, .aside figcaption a:hover::selection,
         .aside li a:hover::selection,
         .aside p a:hover::selection {
-          text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-          background: #c8c8c8; }
+          text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+          background: var(--back-medium); }
         aside figcaption a:hover::-moz-selection,
         aside li a:hover::-moz-selection,
         aside p a:hover::-moz-selection, .aside figcaption a:hover::-moz-selection,
         .aside li a:hover::-moz-selection,
         .aside p a:hover::-moz-selection {
-          text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-          background: #c8c8c8; }
+          text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+          background: var(--back-medium); }
         aside figcaption a:hover *,
         aside figcaption a:hover *:after, aside figcaption a:hover:after,
         aside figcaption a:hover *:before, aside figcaption a:hover:before,
@@ -826,7 +887,7 @@ aside, .aside {
         aside p a:hover:visited, .aside figcaption a:hover:visited,
         .aside li a:hover:visited,
         .aside p a:hover:visited {
-          color: #444; }
+          color: var(--text-gray); }
     aside::before, .aside::before {
       content: ''; } }
 
@@ -834,7 +895,7 @@ blockquote {
   border-width: 0;
   border-left-style: solid;
   border-left-width: 1px;
-  border-left-color: #c8c8c8;
+  border-left-color: var(--back-medium);
   margin: 20px 0;
   padding: 0;
   padding-left: 15px; }
@@ -847,30 +908,157 @@ blockquote {
     font-style: normal;
     font-size: 12px;
     line-height: 1.9;
-    color: #7b7b7b;
-    text-transform: uppercase;
+    color: var(--text-light);
     text-transform: none; }
 
+div.info {
+  background: rgba(58, 129, 195, 0.15);
+  border-left: 4px solid rgba(58, 129, 195, 0.45);
+  margin-top: 1.8rem;
+  margin-bottom: 1.25rem;
+  padding: 0.8em;
+  line-height: 1.4;
+  text-align: center;
+  position: relative;
+  clear: both; }
+  div.info p {
+    margin: 0; }
+
+div.info::before {
+  content: "i";
+  color: var(--back-white);
+  background: rgba(58, 129, 195, 0.8);
+  align-items: flex-end;
+  top: -1rem;
+  font-weight: 700;
+  font-size: 1.4rem;
+  -webkit-clip-path: circle(50% at 50% 50%);
+  clip-path: circle(50% at 50% 50%);
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  justify-content: center;
+  position: absolute;
+  left: -1.2rem;
+  line-height: 1.3;
+  text-align: center; }
+
+div.success {
+  background: rgba(45, 149, 116, 0.15);
+  border-left: 4px solid rgba(45, 149, 116, 0.45);
+  margin-top: 1.8rem;
+  margin-bottom: 1.25rem;
+  padding: 0.8em;
+  line-height: 1.4;
+  text-align: center;
+  position: relative;
+  clear: both; }
+  div.success p {
+    margin: 0; }
+
+div.success::before {
+  content: "✔";
+  color: var(--back-white);
+  background: rgba(45, 149, 116, 0.8);
+  align-items: flex-end;
+  top: -1rem;
+  font-weight: 700;
+  font-size: 1.4rem;
+  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  width: 35px;
+  height: 35px;
+  display: inline-flex;
+  justify-content: center;
+  position: absolute;
+  left: -1.2rem;
+  line-height: 1.5;
+  text-align: center; }
+
+div.warning {
+  background: rgba(220, 117, 47, 0.15);
+  border-left: 4px solid rgba(220, 117, 47, 0.45);
+  margin-top: 1.8rem;
+  margin-bottom: 1.25rem;
+  padding: 0.8em;
+  line-height: 1.4;
+  text-align: center;
+  position: relative;
+  clear: both; }
+  div.warning p {
+    margin: 0; }
+
+div.warning::before {
+  content: "!";
+  color: var(--back-white);
+  background: rgba(220, 117, 47, 0.8);
+  align-items: flex-end;
+  top: -1rem;
+  font-weight: 700;
+  font-size: 1.4rem;
+  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  clip-path: polygon(50% 0, 0 100%, 100% 100%);
+  width: 35px;
+  height: 35px;
+  display: inline-flex;
+  justify-content: center;
+  position: absolute;
+  left: -1.2rem;
+  line-height: 1.1;
+  text-align: center; }
+
+div.error {
+  background: rgba(186, 47, 89, 0.15);
+  border-left: 4px solid rgba(186, 47, 89, 0.45);
+  margin-top: 1.8rem;
+  margin-bottom: 1.25rem;
+  padding: 0.8em;
+  line-height: 1.4;
+  text-align: center;
+  position: relative;
+  clear: both; }
+  div.error p {
+    margin: 0; }
+
+div.error::before {
+  content: "!";
+  color: var(--back-white);
+  background: rgba(186, 47, 89, 0.8);
+  align-items: flex-end;
+  top: -1rem;
+  font-weight: 700;
+  font-size: 1.4rem;
+  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
+  width: 35px;
+  height: 30px;
+  display: inline-flex;
+  justify-content: center;
+  position: absolute;
+  left: -1.2rem;
+  line-height: 1.1;
+  text-align: center; }
+
 .org-ref-bib-h1 {
   margin-top: 70px;
   padding-top: 30px;
   border-width: 0;
   border-top-style: solid;
   border-top-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   font-family: "Open Sans";
   font-family: "Open Sans";
   font-weight: normal;
   font-size: 20px;
   line-height: 1.6;
-  color: #444; }
+  color: var(--text-gray); }
 
 .org-ref-bib {
   font-family: "Open Sans";
   font-weight: normal;
   font-size: 15px;
   line-height: 1.6;
-  color: #444; }
+  color: var(--text-gray); }
   .org-ref-bib li > a:nth-child(2) {
     background: none;
     text-shadow: none;
@@ -885,8 +1073,7 @@ blockquote {
     font-style: normal;
     font-size: 12px;
     line-height: 1.9;
-    color: #7b7b7b;
-    text-transform: uppercase;
+    color: var(--text-light);
     background: none;
     text-shadow: none;
     text-decoration: none; }
@@ -895,22 +1082,57 @@ pre.src, pre.example {
   border-width: 0;
   border-left-style: solid;
   border-left-width: 1px;
-  border-left-color: #c8c8c8;
+  border-left-color: var(--back-medium);
   margin: 20px 0;
   padding: 0;
   padding-left: 15px;
-  font-family: "Fira Mono";
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
   font-size: 14px;
   line-height: 1.9;
-  overflow-x: auto;
-  box-shadow: none; }
+  overflow-x: visible;
+  box-shadow: none;
+  white-space: pre-wrap;
+  position: relative; }
+
+pre.example {
+  border-left-style: dotted;
+  border-left-width: 2px; }
+
+pre.src::before {
+  display: inline-block;
+  position: absolute;
+  background-color: transparent;
+  top: unset;
+  bottom: -16px;
+  left: 20px;
+  padding: 0px;
+  border: none;
+  font-size: 80%;
+  font-style: italic;
+  color: var(--text-light); }
+
+pre.src:empty {
+  display: none; }
 
 code {
-  font-family: "Fira Mono";
-  color: #2c3e50;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  color: var(--code-foreground);
   font-size: 15px;
   padding: 0 5px; }
 
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font: 80% SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  line-height: normal;
+  line-height: 80%;
+  color: var(--text-gray);
+  vertical-align: middle;
+  background-color: var(--back-light);
+  border: 1px solid #91959a88;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #91959a88; }
+
 li code {
   font-size: 14px; }
 
@@ -919,7 +1141,7 @@ li p code {
 
 .example,
 .src {
-  color: #2c3e50; }
+  color: var(--code-foreground); }
   .example .org-keyword,
   .src .org-keyword {
     color: #3a81c3; }
@@ -955,12 +1177,264 @@ li p code {
     color: #555555; }
   .example .org-function-name,
   .src .org-function-name {
-    color: #6c3163; }
+    color: var(--code-func); }
   .example .org-constant,
   .example .org-highlight-numbers-number,
   .src .org-constant,
   .src .org-highlight-numbers-number {
-    color: #4e3163; }
+    color: var(--code-const); }
+
+/* Languages per Org manual */
+pre.src-asymptote::before {
+  content: 'Asymptote'; }
+
+pre.src-awk::before {
+  content: 'Awk'; }
+
+pre.src-C::before {
+  content: 'C'; }
+
+/* pre.src-C++ doesn't work in CSS */
+pre.src-clojure::before {
+  content: 'Clojure'; }
+
+pre.src-css::before {
+  content: 'CSS'; }
+
+pre.src-D::before {
+  content: 'D'; }
+
+pre.src-ditaa::before {
+  content: 'ditaa'; }
+
+pre.src-dot::before {
+  content: 'Graphviz'; }
+
+pre.src-calc::before {
+  content: 'Emacs Calc'; }
+
+pre.src-emacs-lisp::before {
+  content: 'Emacs Lisp'; }
+
+pre.src-fortran::before {
+  content: 'Fortran'; }
+
+pre.src-gnuplot::before {
+  content: 'gnuplot'; }
+
+pre.src-haskell::before {
+  content: 'Haskell'; }
+
+pre.src-hledger::before {
+  content: 'hledger'; }
+
+pre.src-java::before {
+  content: 'Java'; }
+
+pre.src-js::before {
+  content: 'Javascript'; }
+
+pre.src-latex::before {
+  content: 'LaTeX'; }
+
+pre.src-ledger::before {
+  content: 'Ledger'; }
+
+pre.src-lisp::before {
+  content: 'Lisp'; }
+
+pre.src-lilypond::before {
+  content: 'Lilypond'; }
+
+pre.src-lua::before {
+  content: 'Lua'; }
+
+pre.src-matlab::before {
+  content: 'MATLAB'; }
+
+pre.src-mscgen::before {
+  content: 'Mscgen'; }
+
+pre.src-ocaml::before {
+  content: 'Objective Caml'; }
+
+pre.src-octave::before {
+  content: 'Octave'; }
+
+pre.src-org::before {
+  content: 'Org mode'; }
+
+pre.src-oz::before {
+  content: 'OZ'; }
+
+pre.src-plantuml::before {
+  content: 'Plantuml'; }
+
+pre.src-processing::before {
+  content: 'Processing.js'; }
+
+pre.src-python::before {
+  content: 'Python'; }
+
+pre.src-R::before {
+  content: 'R'; }
+
+pre.src-ruby::before {
+  content: 'Ruby'; }
+
+pre.src-sass::before {
+  content: 'Sass'; }
+
+pre.src-scheme::before {
+  content: 'Scheme'; }
+
+pre.src-screen::before {
+  content: 'Gnu Screen'; }
+
+pre.src-sed::before {
+  content: 'Sed'; }
+
+pre.src-sh::before {
+  content: 'shell'; }
+
+pre.src-sql::before {
+  content: 'SQL'; }
+
+pre.src-sqlite::before {
+  content: 'SQLite'; }
+
+/* additional languages in org.el's org-babel-load-languages alist */
+pre.src-forth::before {
+  content: 'Forth'; }
+
+pre.src-io::before {
+  content: 'IO'; }
+
+pre.src-J::before {
+  content: 'J'; }
+
+pre.src-makefile::before {
+  content: 'Makefile'; }
+
+pre.src-maxima::before {
+  content: 'Maxima'; }
+
+pre.src-perl::before {
+  content: 'Perl'; }
+
+pre.src-picolisp::before {
+  content: 'Pico Lisp'; }
+
+pre.src-scala::before {
+  content: 'Scala'; }
+
+pre.src-shell::before {
+  content: 'Shell Script'; }
+
+pre.src-ebnf2ps::before {
+  content: 'ebfn2ps'; }
+
+/* additional language identifiers per \"defun org-babel-execute\"
+      in ob-*.el */
+pre.src-cpp::before {
+  content: 'C++'; }
+
+pre.src-abc::before {
+  content: 'ABC'; }
+
+pre.src-coq::before {
+  content: 'Coq'; }
+
+pre.src-groovy::before {
+  content: 'Groovy'; }
+
+/* additional language identifiers from org-babel-shell-names in
+    ob-shell.el: ob-shell is the only babel language using a lambda to put
+    the execution function name together. */
+pre.src-bash::before {
+  content: 'bash'; }
+
+pre.src-csh::before {
+  content: 'csh'; }
+
+pre.src-ash::before {
+  content: 'ash'; }
+
+pre.src-dash::before {
+  content: 'dash'; }
+
+pre.src-ksh::before {
+  content: 'ksh'; }
+
+pre.src-mksh::before {
+  content: 'mksh'; }
+
+pre.src-posh::before {
+  content: 'posh'; }
+
+/* Additional Emacs modes also supported by the LaTeX listings package */
+pre.src-ada::before {
+  content: 'Ada'; }
+
+pre.src-asm::before {
+  content: 'Assembler'; }
+
+pre.src-caml::before {
+  content: 'Caml'; }
+
+pre.src-delphi::before {
+  content: 'Delphi'; }
+
+pre.src-html::before {
+  content: 'HTML'; }
+
+pre.src-idl::before {
+  content: 'IDL'; }
+
+pre.src-mercury::before {
+  content: 'Mercury'; }
+
+pre.src-metapost::before {
+  content: 'MetaPost'; }
+
+pre.src-modula-2::before {
+  content: 'Modula-2'; }
+
+pre.src-pascal::before {
+  content: 'Pascal'; }
+
+pre.src-ps::before {
+  content: 'PostScript'; }
+
+pre.src-prolog::before {
+  content: 'Prolog'; }
+
+pre.src-simula::before {
+  content: 'Simula'; }
+
+pre.src-tcl::before {
+  content: 'tcl'; }
+
+pre.src-tex::before {
+  content: 'LaTeX'; }
+
+pre.src-plain-tex::before {
+  content: 'TeX'; }
+
+pre.src-verilog::before {
+  content: 'Verilog'; }
+
+pre.src-vhdl::before {
+  content: 'VHDL'; }
+
+pre.src-xml::before {
+  content: 'XML'; }
+
+pre.src-nxml::before {
+  content: 'XML'; }
+
+pre.src-conf::before {
+  content: 'Configuration File'; }
 
 .dropcap {
   float: left;
@@ -973,45 +1447,46 @@ li p code {
 
 figure {
   text-align: center; }
-  figure img {
-    max-width: 100%; }
   figure figcaption {
     margin-top: 10px;
     font-family: "Open Sans";
     font-weight: normal;
     font-size: 15px;
     line-height: 1.6;
-    color: #444; }
+    color: var(--text-gray); }
     figure figcaption .figure-number {
       font-family: "Open Sans";
       font-weight: normal;
       font-style: normal;
       font-size: 12px;
       line-height: 1.9;
-      color: #7b7b7b;
-      text-transform: uppercase; }
+      color: var(--text-light); }
 
 img.zoomTarget:hover {
   cursor: default !important; }
 
+img {
+  filter: invert(6%);
+  max-width: 100%; }
+
 #footnotes {
   margin-top: 70px;
   padding-top: 30px;
   border-width: 0;
   border-top-style: solid;
   border-top-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   font-family: "Open Sans";
   font-weight: normal;
   font-size: 15px;
   line-height: 1.6;
-  color: #444; }
+  color: var(--text-gray); }
   #footnotes p, #footnotes li {
     font-family: "Open Sans";
     font-weight: normal;
     font-size: 15px;
     line-height: 1.6;
-    color: #444; }
+    color: var(--text-gray); }
   #footnotes h2.footnotes {
     margin-top: 0;
     margin-bottom: 30px;
@@ -1020,7 +1495,7 @@ img.zoomTarget:hover {
     letter-spacing: 5px;
     display: none; }
   #footnotes .footnum {
-    color: #000; }
+    color: var(--text-dark); }
 
 h1,
 h2,
@@ -1033,16 +1508,69 @@ h6 {
   margin-bottom: 0;
   margin-top: 60px; }
 
-h1 {
+h1 > a[aria-hidden='true'],
+h2 > a[aria-hidden='true'],
+h3 > a[aria-hidden='true'],
+h4 > a[aria-hidden='true'],
+h5 > a[aria-hidden='true'],
+h6 > a[aria-hidden='true'] {
+  color: var(--back-medium);
+  position: relative;
+  top: 0.06em;
+  line-height: 1;
+  font-size: 110%;
+  padding-left: 0.2em;
+  text-decoration: none;
+  visibility: hidden; }
+
+h1 > a[aria-hidden='true']:hover,
+h2 > a[aria-hidden='true']:hover,
+h3 > a[aria-hidden='true']:hover,
+h4 > a[aria-hidden='true']:hover,
+h5 > a[aria-hidden='true']:hover,
+h6 > a[aria-hidden='true']:hover {
+  color: var(--text-light); }
+
+h1:hover > a[aria-hidden='true'],
+h2:hover > a[aria-hidden='true'],
+h3:hover > a[aria-hidden='true'],
+h4:hover > a[aria-hidden='true'],
+h5:hover > a[aria-hidden='true'],
+h6:hover > a[aria-hidden='true'] {
+  visibility: visible; }
+
+h1, h2, h3, h4, h5, h6 {
+  padding-left: 30px;
+  margin-left: -30px;
+  position: relative; }
+
+h1, .section-number-1 {
+  font-size: 40px; }
+
+h2, .section-number-2 {
   font-size: 30px; }
 
-h2 {
+h3, .section-number-3 {
   font-size: 24px; }
 
-h3, h4, h5, h6 {
+h4, .section-number-4 {
   font-size: 20px;
   font-style: italic; }
 
+h5 {
+  font-size: 20px;
+  font-variant: small-caps; }
+
+.section-number-5 {
+  font-size: 20px; }
+
+h6 {
+  font-size: 18px;
+  font-style: italic; }
+
+.section-number-6 {
+  font-size: 18px; }
+
 .section-number-1,
 .section-number-2,
 .section-number-3,
@@ -1054,27 +1582,30 @@ h3, h4, h5, h6 {
   font-style: normal;
   font-size: 12px;
   line-height: 1.9;
-  color: #7b7b7b;
-  text-transform: uppercase;
-  color: #c8c8c8; }
+  color: var(--text-light);
+  font-size: inherit;
+  color: var(--back-medium);
+  line-height: 1;
+  position: absolute;
+  transform: translateX(-100%) translateX(-10px); }
 
-.section-number-1 {
-  font-size: 30px; }
+.outline-text-2:empty + .outline-3 > h3, .outline-text-2:-moz-only-whitespace + .outline-3 > h3 {
+  margin-top: 20px; }
 
-.section-number-2 {
-  font-size: 24px; }
+.outline-text-3:empty + .outline-4 > h4, .outline-text-3:-moz-only-whitespace + .outline-4 > h4 {
+  margin-top: 15px; }
 
-.section-number-3,
-.section-number-4,
-.section-number-5,
-.section-number-6 {
-  font-size: 20px; }
+.outline-text-4:empty + .outline-5 > h5, .outline-text-4:-moz-only-whitespace + .outline-5 > h5 {
+  margin-top: 15px; }
+
+.outline-text-5:empty + .outline-6 > h6, .outline-text-5:-moz-only-whitespace + .outline-6 > h6 {
+  margin-top: 10px; }
 
 hr {
   border: none;
   border-top-style: solid;
   border-top-width: 1px;
-  color: #efefef;
+  color: var(--back-light);
   margin-bottom: 50px;
   margin-top: 50px; }
 
@@ -1084,15 +1615,15 @@ p a,
 .page-tags a,
 table a,
 #crosslinks a:not(.highlight),
-li a {
-  text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
-  background-image: linear-gradient(#000, #000);
+li a,
+dl a {
+  text-shadow: 0.03em 0 var(--back-white), -0.03em 0 var(--back-white), 0 0.03em var(--back-white), 0 -0.03em var(--back-white), 0.06em 0 var(--back-white), -0.06em 0 var(--back-white), 0.09em 0 var(--back-white), -0.09em 0 var(--back-white), 0.12em 0 var(--back-white), -0.12em 0 var(--back-white), 0.15em 0 var(--back-white), -0.15em 0 var(--back-white);
+  background-image: linear-gradient(var(--text-dark), var(--text-dark));
   background-size: 1px 1px;
   background-repeat: repeat-x;
   background-position: 0% 95%;
   border-radius: 1px;
-  background-color: #fff;
-  color: #000;
+  color: var(--text-dark);
   text-decoration: none; }
   #breadcrumbs a::selection,
   figcaption a::selection,
@@ -1100,18 +1631,20 @@ li a {
   .page-tags a::selection,
   table a::selection,
   #crosslinks a:not(.highlight)::selection,
-  li a::selection {
-    text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-    background: #c8c8c8; }
+  li a::selection,
+  dl a::selection {
+    text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+    background: var(--back-medium); }
   #breadcrumbs a::-moz-selection,
   figcaption a::-moz-selection,
   p a::-moz-selection,
   .page-tags a::-moz-selection,
   table a::-moz-selection,
   #crosslinks a:not(.highlight)::-moz-selection,
-  li a::-moz-selection {
-    text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-    background: #c8c8c8; }
+  li a::-moz-selection,
+  dl a::-moz-selection {
+    text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+    background: var(--back-medium); }
   #breadcrumbs a *,
   #breadcrumbs a *:after, #breadcrumbs a:after,
   #breadcrumbs a *:before, #breadcrumbs a:before,
@@ -1144,7 +1677,12 @@ li a {
   li a *:after,
   li a:after,
   li a *:before,
-  li a:before {
+  li a:before,
+  dl a *,
+  dl a *:after,
+  dl a:after,
+  dl a *:before,
+  dl a:before {
     text-shadow: none; }
   #breadcrumbs a:visited,
   figcaption a:visited,
@@ -1152,23 +1690,25 @@ li a {
   .page-tags a:visited,
   table a:visited,
   #crosslinks a:not(.highlight):visited,
-  li a:visited {
-    color: #000; }
+  li a:visited,
+  dl a:visited {
+    color: var(--text-dark); }
   #breadcrumbs a:hover,
   figcaption a:hover,
   p a:hover,
   .page-tags a:hover,
   table a:hover,
   #crosslinks a:not(.highlight):hover,
-  li a:hover {
-    text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-    background-image: linear-gradient(#000, #000);
+  li a:hover,
+  dl a:hover {
+    text-shadow: 0.03em 0 var(--back-white), -0.03em 0 var(--back-white), 0 0.03em var(--back-white), 0 -0.03em var(--back-white), 0.06em 0 var(--back-white), -0.06em 0 var(--back-white), 0.09em 0 var(--back-white), -0.09em 0 var(--back-white), 0.12em 0 var(--back-white), -0.12em 0 var(--back-white), 0.15em 0 var(--back-white), -0.15em 0 var(--back-white);
+    background-image: linear-gradient(var(--text-dark), var(--text-dark));
     background-size: 1px 1px;
     background-repeat: repeat-x;
     background-position: 0% 95%;
-    border-radius: 1px;
-    background-color: #efefef;
-    color: #000;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
+    background-position: 0% 100%;
+    background-size: 0.8em auto;
     text-decoration: none; }
     #breadcrumbs a:hover::selection,
     figcaption a:hover::selection,
@@ -1176,80 +1716,142 @@ li a {
     .page-tags a:hover::selection,
     table a:hover::selection,
     #crosslinks a:not(.highlight):hover::selection,
-    li a:hover::selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
+    li a:hover::selection,
+    dl a:hover::selection {
+      text-shadow: 0.03em 0 var(--back-white), -0.03em 0 var(--back-white), 0 0.03em var(--back-white), 0 -0.03em var(--back-white), 0.06em 0 var(--back-white), -0.06em 0 var(--back-white), 0.09em 0 var(--back-white), -0.09em 0 var(--back-white), 0.12em 0 var(--back-white), -0.12em 0 var(--back-white), 0.15em 0 var(--back-white), -0.15em 0 var(--back-white);
+      background: var(--back-white); }
     #breadcrumbs a:hover::-moz-selection,
     figcaption a:hover::-moz-selection,
     p a:hover::-moz-selection,
     .page-tags a:hover::-moz-selection,
     table a:hover::-moz-selection,
     #crosslinks a:not(.highlight):hover::-moz-selection,
-    li a:hover::-moz-selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
-    #breadcrumbs a:hover *,
-    #breadcrumbs a:hover *:after, #breadcrumbs a:hover:after,
-    #breadcrumbs a:hover *:before, #breadcrumbs a:hover:before,
-    figcaption a:hover *,
-    figcaption a:hover *:after,
-    figcaption a:hover:after,
-    figcaption a:hover *:before,
-    figcaption a:hover:before,
-    p a:hover *,
-    p a:hover *:after,
-    p a:hover:after,
-    p a:hover *:before,
-    p a:hover:before,
-    .page-tags a:hover *,
-    .page-tags a:hover *:after,
-    .page-tags a:hover:after,
-    .page-tags a:hover *:before,
-    .page-tags a:hover:before,
-    table a:hover *,
-    table a:hover *:after,
-    table a:hover:after,
-    table a:hover *:before,
-    table a:hover:before,
-    #crosslinks a:not(.highlight):hover *,
-    #crosslinks a:not(.highlight):hover *:after,
-    #crosslinks a:not(.highlight):hover:after,
-    #crosslinks a:not(.highlight):hover *:before,
-    #crosslinks a:not(.highlight):hover:before,
-    li a:hover *,
-    li a:hover *:after,
-    li a:hover:after,
-    li a:hover *:before,
-    li a:hover:before {
-      text-shadow: none; }
-    #breadcrumbs a:hover:visited,
-    figcaption a:hover:visited,
-    p a:hover:visited,
-    .page-tags a:hover:visited,
-    table a:hover:visited,
-    #crosslinks a:not(.highlight):hover:visited,
-    li a:hover:visited {
-      color: #000; }
+    li a:hover::-moz-selection,
+    dl a:hover::-moz-selection {
+      text-shadow: 0.03em 0 var(--back-white), -0.03em 0 var(--back-white), 0 0.03em var(--back-white), 0 -0.03em var(--back-white), 0.06em 0 var(--back-white), -0.06em 0 var(--back-white), 0.09em 0 var(--back-white), -0.09em 0 var(--back-white), 0.12em 0 var(--back-white), -0.12em 0 var(--back-white), 0.15em 0 var(--back-white), -0.15em 0 var(--back-white);
+      background: var(--back-white); }
+  #breadcrumbs a[href^="#"],
+  figcaption a[href^="#"],
+  p a[href^="#"],
+  .page-tags a[href^="#"],
+  table a[href^="#"],
+  #crosslinks a:not(.highlight)[href^="#"],
+  li a[href^="#"],
+  dl a[href^="#"] {
+    color: var(--text-gray); }
+    #breadcrumbs a[href^="#"]:hover,
+    figcaption a[href^="#"]:hover,
+    p a[href^="#"]:hover,
+    .page-tags a[href^="#"]:hover,
+    table a[href^="#"]:hover,
+    #crosslinks a:not(.highlight)[href^="#"]:hover,
+    li a[href^="#"]:hover,
+    dl a[href^="#"]:hover {
+      text-shadow: 0.03em 0 var(--back-white), -0.03em 0 var(--back-white), 0 0.03em var(--back-white), 0 -0.03em var(--back-white), 0.06em 0 var(--back-white), -0.06em 0 var(--back-white), 0.09em 0 var(--back-white), -0.09em 0 var(--back-white), 0.12em 0 var(--back-white), -0.12em 0 var(--back-white), 0.15em 0 var(--back-white), -0.15em 0 var(--back-white);
+      background-image: linear-gradient(var(--text-medium), var(--text-medium));
+      background-size: 1px 1px;
+      background-repeat: repeat-x;
+      background-position: 0% 95%;
+      border-radius: 1px;
+      color: var(--text-medium);
+      text-decoration: none; }
+      #breadcrumbs a[href^="#"]:hover::selection,
+      figcaption a[href^="#"]:hover::selection,
+      p a[href^="#"]:hover::selection,
+      .page-tags a[href^="#"]:hover::selection,
+      table a[href^="#"]:hover::selection,
+      #crosslinks a:not(.highlight)[href^="#"]:hover::selection,
+      li a[href^="#"]:hover::selection,
+      dl a[href^="#"]:hover::selection {
+        text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+        background: var(--back-medium); }
+      #breadcrumbs a[href^="#"]:hover::-moz-selection,
+      figcaption a[href^="#"]:hover::-moz-selection,
+      p a[href^="#"]:hover::-moz-selection,
+      .page-tags a[href^="#"]:hover::-moz-selection,
+      table a[href^="#"]:hover::-moz-selection,
+      #crosslinks a:not(.highlight)[href^="#"]:hover::-moz-selection,
+      li a[href^="#"]:hover::-moz-selection,
+      dl a[href^="#"]:hover::-moz-selection {
+        text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+        background: var(--back-medium); }
+      #breadcrumbs a[href^="#"]:hover *,
+      #breadcrumbs a[href^="#"]:hover *:after, #breadcrumbs a[href^="#"]:hover:after,
+      #breadcrumbs a[href^="#"]:hover *:before, #breadcrumbs a[href^="#"]:hover:before,
+      figcaption a[href^="#"]:hover *,
+      figcaption a[href^="#"]:hover *:after,
+      figcaption a[href^="#"]:hover:after,
+      figcaption a[href^="#"]:hover *:before,
+      figcaption a[href^="#"]:hover:before,
+      p a[href^="#"]:hover *,
+      p a[href^="#"]:hover *:after,
+      p a[href^="#"]:hover:after,
+      p a[href^="#"]:hover *:before,
+      p a[href^="#"]:hover:before,
+      .page-tags a[href^="#"]:hover *,
+      .page-tags a[href^="#"]:hover *:after,
+      .page-tags a[href^="#"]:hover:after,
+      .page-tags a[href^="#"]:hover *:before,
+      .page-tags a[href^="#"]:hover:before,
+      table a[href^="#"]:hover *,
+      table a[href^="#"]:hover *:after,
+      table a[href^="#"]:hover:after,
+      table a[href^="#"]:hover *:before,
+      table a[href^="#"]:hover:before,
+      #crosslinks a:not(.highlight)[href^="#"]:hover *,
+      #crosslinks a:not(.highlight)[href^="#"]:hover *:after,
+      #crosslinks a:not(.highlight)[href^="#"]:hover:after,
+      #crosslinks a:not(.highlight)[href^="#"]:hover *:before,
+      #crosslinks a:not(.highlight)[href^="#"]:hover:before,
+      li a[href^="#"]:hover *,
+      li a[href^="#"]:hover *:after,
+      li a[href^="#"]:hover:after,
+      li a[href^="#"]:hover *:before,
+      li a[href^="#"]:hover:before,
+      dl a[href^="#"]:hover *,
+      dl a[href^="#"]:hover *:after,
+      dl a[href^="#"]:hover:after,
+      dl a[href^="#"]:hover *:before,
+      dl a[href^="#"]:hover:before {
+        text-shadow: none; }
+      #breadcrumbs a[href^="#"]:hover:visited,
+      figcaption a[href^="#"]:hover:visited,
+      p a[href^="#"]:hover:visited,
+      .page-tags a[href^="#"]:hover:visited,
+      table a[href^="#"]:hover:visited,
+      #crosslinks a:not(.highlight)[href^="#"]:hover:visited,
+      li a[href^="#"]:hover:visited,
+      dl a[href^="#"]:hover:visited {
+        color: var(--text-medium); }
+
+#theme-switch:checked ~ #page #breadcrumbs a:hover,
+#theme-switch:checked ~ #page figcaption a:hover,
+#theme-switch:checked ~ #page p a:hover,
+#theme-switch:checked ~ #page .page-tags a:hover,
+#theme-switch:checked ~ #page table a:hover,
+#theme-switch:checked ~ #page #crosslinks a:not(.highlight):hover,
+#theme-switch:checked ~ #page li a:hover,
+#theme-switch:checked ~ #page dl a:hover {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); }
 
 #content .page-intro p a,
 #footnotes a {
-  text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
-  background-image: linear-gradient(#444, #444);
+  text-shadow: 0.03em 0 var(--back-white), -0.03em 0 var(--back-white), 0 0.03em var(--back-white), 0 -0.03em var(--back-white), 0.06em 0 var(--back-white), -0.06em 0 var(--back-white), 0.09em 0 var(--back-white), -0.09em 0 var(--back-white), 0.12em 0 var(--back-white), -0.12em 0 var(--back-white), 0.15em 0 var(--back-white), -0.15em 0 var(--back-white);
+  background-image: linear-gradient(var(--text-gray), var(--text-gray));
   background-size: 1px 1px;
   background-repeat: repeat-x;
   background-position: 0% 95%;
   border-radius: 1px;
-  background-color: #fff;
-  color: #444;
+  color: var(--text-gray);
   text-decoration: none; }
   #content .page-intro p a::selection,
   #footnotes a::selection {
-    text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-    background: #c8c8c8; }
+    text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+    background: var(--back-medium); }
   #content .page-intro p a::-moz-selection,
   #footnotes a::-moz-selection {
-    text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-    background: #c8c8c8; }
+    text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+    background: var(--back-medium); }
   #content .page-intro p a *,
   #content .page-intro p a *:after, #content .page-intro p a:after,
   #content .page-intro p a *:before, #content .page-intro p a:before,
@@ -1261,26 +1863,25 @@ li a {
     text-shadow: none; }
   #content .page-intro p a:visited,
   #footnotes a:visited {
-    color: #444; }
+    color: var(--text-gray); }
   #content .page-intro p a:hover,
   #footnotes a:hover {
-    text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-    background-image: linear-gradient(#444, #444);
+    text-shadow: 0.03em 0 var(--back-light), -0.03em 0 var(--back-light), 0 0.03em var(--back-light), 0 -0.03em var(--back-light), 0.06em 0 var(--back-light), -0.06em 0 var(--back-light), 0.09em 0 var(--back-light), -0.09em 0 var(--back-light), 0.12em 0 var(--back-light), -0.12em 0 var(--back-light), 0.15em 0 var(--back-light), -0.15em 0 var(--back-light);
+    background-image: linear-gradient(var(--text-gray), var(--text-gray));
     background-size: 1px 1px;
     background-repeat: repeat-x;
     background-position: 0% 95%;
     border-radius: 1px;
-    background-color: #efefef;
-    color: #444;
+    color: var(--text-gray);
     text-decoration: none; }
     #content .page-intro p a:hover::selection,
     #footnotes a:hover::selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
+      text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+      background: var(--back-medium); }
     #content .page-intro p a:hover::-moz-selection,
     #footnotes a:hover::-moz-selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
+      text-shadow: 0.03em 0 var(--back-medium), -0.03em 0 var(--back-medium), 0 0.03em var(--back-medium), 0 -0.03em var(--back-medium), 0.06em 0 var(--back-medium), -0.06em 0 var(--back-medium), 0.09em 0 var(--back-medium), -0.09em 0 var(--back-medium), 0.12em 0 var(--back-medium), -0.12em 0 var(--back-medium), 0.15em 0 var(--back-medium), -0.15em 0 var(--back-medium);
+      background: var(--back-medium); }
     #content .page-intro p a:hover *,
     #content .page-intro p a:hover *:after, #content .page-intro p a:hover:after,
     #content .page-intro p a:hover *:before, #content .page-intro p a:hover:before,
@@ -1292,14 +1893,14 @@ li a {
       text-shadow: none; }
     #content .page-intro p a:hover:visited,
     #footnotes a:hover:visited {
-      color: #444; }
+      color: var(--text-gray); }
 
 .pile-link::before {
-  background-color: #fff;
+  background-color: var(--back-white);
   content: "‹\00a0"; }
 
 .pile-link::after {
-  background-color: #fff;
+  background-color: var(--back-white);
   content: "\00a0›"; }
 
 #crosslinks {
@@ -1308,7 +1909,7 @@ li a {
     padding: 4px 8px;
     border-style: solid;
     border-width: 1px;
-    border-color: #efefef;
+    border-color: var(--back-light);
     border-radius: 1px;
     font-family: "Open Sans";
     font-variant: all-small-caps;
@@ -1319,23 +1920,23 @@ li a {
     line-height: 8px;
     white-space: nowrap; }
     #crosslinks a:not(.highlight):hover {
-      background-color: #efefef;
+      background-color: var(--back-light);
       background-image: none; }
     #crosslinks a:not(.highlight).active {
       text-shadow: none;
       text-decoration: none;
-      color: #fff;
-      background-color: #2c3e50; }
+      color: var(--back-white);
+      background-color: var(--code-foreground); }
       #crosslinks a:not(.highlight).active:hover {
-        background-color: #efefef;
+        background-color: var(--back-light);
         background-image: none;
-        color: #000; }
+        color: var(--text-dark); }
 
 .btn {
   padding: 7px 14px;
   border-style: solid;
   border-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   border-radius: 1px;
   font-family: "Open Sans";
   font-variant: all-small-caps;
@@ -1345,11 +1946,11 @@ li a {
   background-image: none;
   cursor: pointer; }
   .btn:hover {
-    background-color: #efefef;
+    background-color: var(--back-light);
     background-image: none; }
 
 .btn.disabled {
-  color: #7b7b7b; }
+  color: var(--text-light); }
   .btn.disabled:hover {
     cursor: default; }
 
@@ -1357,7 +1958,7 @@ li a {
   padding: 3px 6px;
   border-style: solid;
   border-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   border-radius: 1px;
   font-family: "Open Sans";
   font-variant: all-small-caps;
@@ -1368,24 +1969,24 @@ li a {
   padding-right: 9px;
   padding-left: 9px; }
   .btn.small:hover {
-    background-color: #efefef;
+    background-color: var(--back-light);
     background-image: none; }
 
 .btn.highlight {
   text-shadow: none;
   text-decoration: none;
-  color: #000;
+  color: var(--text-dark);
   background-color: yellow; }
 
 .btn.primary {
   text-shadow: none;
   text-decoration: none;
-  color: #fff;
-  background-color: #002642; }
+  color: var(--back-white);
+  background-color: var(--accent); }
   .btn.primary:hover {
-    background-color: #efefef;
+    background-color: var(--back-light);
     background-image: none;
-    color: #000; }
+    color: var(--text-dark); }
 
 .image-link, .image-link:hover {
   background: none;
@@ -1403,7 +2004,7 @@ ul, ol, dl {
     font-weight: normal;
     font-size: 15px;
     line-height: 1.6;
-    color: #444; }
+    color: var(--text-gray); }
   ul li, ol li, dl li {
     margin: 5px 0;
     font-size: 14px; }
@@ -1447,8 +2048,65 @@ dl dd {
   font-style: italic;
   margin-bottom: 20px; }
 
-#org-div-home-and-up,
-pre.src:hover::before {
+li .checkbox {
+  display: inline-block;
+  width: 0.9em;
+  height: 0.9em;
+  border-radius: 3px;
+  margin: 3px;
+  top: 4px;
+  position: relative; }
+
+li.on > .checkbox {
+  background: #2d9574;
+  box-shadow: 0 0 2px #2d9574; }
+
+li.trans > .checkbox {
+  background: #dc752f;
+  box-shadow: 0 0 2px #dc752f; }
+
+li.off > .checkbox {
+  background: #ba2f59;
+  box-shadow: 0 0 2px #ba2f59;
+  top: 6px; }
+
+li.on > .checkbox::after {
+  content: '';
+  height: 0.45em;
+  width: 0.225em;
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  transform: scaleX(-1) rotate(135deg);
+  border-right: 2.8px solid #fff;
+  border-top: 2.8px solid #fff;
+  opacity: 0.9;
+  left: 0.10em;
+  top: 0.45em;
+  position: absolute; }
+
+li.trans > .checkbox::after {
+  content: '';
+  font-weight: bold;
+  font-size: 1.6em;
+  position: absolute;
+  top: 0.2em;
+  left: 0.11em;
+  width: 0.35em;
+  height: 0.12em;
+  background: #fff;
+  opacity: 0.9;
+  border-radius: 0.1em; }
+
+li.off > .checkbox::after {
+  content: '✖';
+  color: #fff;
+  opacity: 0.9;
+  position: relative;
+  top: -0.50rem;
+  left: 0.17em;
+  font-size: 0.75em; }
+
+#org-div-home-and-up {
   display: none !important; }
 
 .outline-2 h2 {
@@ -1470,14 +2128,15 @@ pre.src:hover::before {
   font-style: normal;
   font-size: 12px;
   line-height: 1.9;
-  color: #7b7b7b;
-  text-transform: uppercase; }
+  color: var(--text-light);
+  background-color: var(--back-white);
+  border-radius: 1px; }
 
 .todo, .done {
   padding: 4px 8px;
   border-style: solid;
   border-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   border-radius: 1px;
   font-family: "Open Sans";
   font-variant: all-small-caps;
@@ -1489,23 +2148,23 @@ pre.src:hover::before {
   white-space: nowrap;
   font-weight: bold; }
   .todo:hover, .done:hover {
-    background-color: #efefef;
+    background-color: var(--back-light);
     background-image: none; }
   .todo.active, .done.active {
     text-shadow: none;
     text-decoration: none;
-    color: #fff;
-    background-color: #2c3e50; }
+    color: var(--back-white);
+    background-color: var(--code-foreground); }
     .todo.active:hover, .done.active:hover {
-      background-color: #efefef;
+      background-color: var(--back-light);
       background-image: none;
-      color: #000; }
+      color: var(--text-dark); }
 
 .todo {
   color: #ee3333; }
 
 .done {
-  color: #7b7b7b; }
+  color: var(--text-light); }
 
 .tag {
   background: white; }
@@ -1514,7 +2173,7 @@ pre.src:hover::before {
   padding: 4px 8px;
   border-style: solid;
   border-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   border-radius: 1px;
   font-family: "Open Sans";
   font-variant: all-small-caps;
@@ -1529,28 +2188,29 @@ pre.src:hover::before {
   border-radius: 100px;
   border-style: dashed; }
   .tag > span:hover {
-    background-color: #efefef;
+    background-color: var(--back-light);
     background-image: none; }
   .tag > span.active {
     text-shadow: none;
     text-decoration: none;
-    color: #fff;
-    background-color: #2c3e50; }
+    color: var(--back-white);
+    background-color: var(--code-foreground); }
     .tag > span.active:hover {
-      background-color: #efefef;
+      background-color: var(--back-light);
       background-image: none;
-      color: #000; }
+      color: var(--text-dark); }
 
 .priority {
-  color: #7b7b7b;
-  font-family: "Fira Mono"; }
+  color: var(--text-light);
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; }
 
 table {
-  border-color: #7b7b7b;
+  border-color: var(--text-light);
   border-left: transparent;
   border-right: transparent;
   border-style: solid;
-  border-width: 1px;
+  border-width: 2px;
+  border-collapse: collapse;
   font-size: 15px;
   font-family: "Open Sans";
   margin: 20px;
@@ -1561,18 +2221,18 @@ table {
     font-style: normal;
     font-size: 12px;
     line-height: 1.9;
-    color: #7b7b7b;
-    text-transform: uppercase; }
-  table thead tr th {
-    border-bottom: solid 1px #efefef;
-    padding: 10px; }
+    color: var(--text-light);
+    font-size: 15px; }
+    table thead tr th {
+      padding: 4px 10px;
+      background-color: #9991; }
+    table thead tr:last-of-type th {
+      border-bottom: solid 1px var(--text-light); }
+  table tr, table th, table td {
+    border: none; }
   table tbody tr td {
     border-top: 0;
     padding: 0 10px; }
-  table thead tr th,
-  table tbody tr td {
-    border-left: solid 1px #efefef;
-    border-right: solid 1px #efefef; }
   table tr {
     line-height: 1.9; }
   table caption {
@@ -1581,83 +2241,37 @@ table {
     font-weight: normal;
     font-size: 15px;
     line-height: 1.6;
-    color: #444; }
+    color: var(--text-gray); }
     table caption .table-number {
       font-family: "Open Sans";
       font-weight: normal;
       font-style: normal;
       font-size: 12px;
       line-height: 1.9;
-      color: #7b7b7b;
-      text-transform: uppercase; }
+      color: var(--text-light); }
 
 nav#table-of-contents {
-  background-color: #efefef;
+  background-color: var(--code-background);
   border-radius: 5px;
   font-family: "Open Sans";
   font-weight: normal;
   font-size: 13px;
   line-height: 1.6;
-  color: #444;
+  color: var(--text-gray);
   margin: 20px 0;
   padding: 20px;
   padding-left: 50px;
   line-height: 1.6 !important; }
   nav#table-of-contents #text-table-of-contents {
-    background-color: #efefef; }
+    background-color: var(--code-background); }
   nav#table-of-contents h2 {
     font-family: "Open Sans";
     font-weight: normal;
     font-style: normal;
     font-size: 12px;
     line-height: 1.9;
-    color: #7b7b7b;
-    text-transform: uppercase;
+    color: var(--text-light);
     margin-top: 10px; }
-  nav#table-of-contents li a {
-    text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-    background-image: linear-gradient(#444, #444);
-    background-size: 1px 1px;
-    background-repeat: repeat-x;
-    background-position: 0% 95%;
-    border-radius: 1px;
-    background-color: #efefef;
-    color: #444;
-    text-decoration: none; }
-    nav#table-of-contents li a::selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
-    nav#table-of-contents li a::-moz-selection {
-      text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-      background: #c8c8c8; }
-    nav#table-of-contents li a *,
-    nav#table-of-contents li a *:after, nav#table-of-contents li a:after,
-    nav#table-of-contents li a *:before, nav#table-of-contents li a:before {
-      text-shadow: none; }
-    nav#table-of-contents li a:visited {
-      color: #444; }
-    nav#table-of-contents li a:hover {
-      text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-      background-image: linear-gradient(#444, #444);
-      background-size: 1px 1px;
-      background-repeat: repeat-x;
-      background-position: 0% 95%;
-      border-radius: 1px;
-      background-color: #efefef;
-      color: #444;
-      text-decoration: none; }
-      nav#table-of-contents li a:hover::selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
-      nav#table-of-contents li a:hover::-moz-selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
-      nav#table-of-contents li a:hover *,
-      nav#table-of-contents li a:hover *:after, nav#table-of-contents li a:hover:after,
-      nav#table-of-contents li a:hover *:before, nav#table-of-contents li a:hover:before {
-        text-shadow: none; }
-      nav#table-of-contents li a:hover:visited {
-        color: #444; }
 
 @media (min-width: 1280px) {
   nav#table-of-contents {
@@ -1669,7 +2283,7 @@ nav#table-of-contents {
     max-width: 50vw;
     padding: 0; }
     nav#table-of-contents #text-table-of-contents {
-      background-color: #fff;
+      background-color: var(--back-white);
       box-shadow: 0 0 2px;
       padding: 20px;
       display: none;
@@ -1686,51 +2300,70 @@ nav#table-of-contents {
       position: relative;
       top: 50px; }
     nav#table-of-contents li::before {
-      content: ""; }
-    nav#table-of-contents li a {
-      text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
-      background-image: linear-gradient(#444, #444);
-      background-size: 1px 1px;
-      background-repeat: repeat-x;
-      background-position: 0% 95%;
-      border-radius: 1px;
-      background-color: #fff;
-      color: #444;
-      text-decoration: none; }
-      nav#table-of-contents li a::selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
-      nav#table-of-contents li a::-moz-selection {
-        text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-        background: #c8c8c8; }
-      nav#table-of-contents li a *,
-      nav#table-of-contents li a *:after, nav#table-of-contents li a:after,
-      nav#table-of-contents li a *:before, nav#table-of-contents li a:before {
-        text-shadow: none; }
-      nav#table-of-contents li a:visited {
-        color: #444; }
-      nav#table-of-contents li a:hover {
-        text-shadow: 0.03em 0 #efefef, -0.03em 0 #efefef, 0 0.03em #efefef, 0 -0.03em #efefef, 0.06em 0 #efefef, -0.06em 0 #efefef, 0.09em 0 #efefef, -0.09em 0 #efefef, 0.12em 0 #efefef, -0.12em 0 #efefef, 0.15em 0 #efefef, -0.15em 0 #efefef;
-        background-image: linear-gradient(#444, #444);
-        background-size: 1px 1px;
-        background-repeat: repeat-x;
-        background-position: 0% 95%;
-        border-radius: 1px;
-        background-color: #efefef;
-        color: #444;
-        text-decoration: none; }
-        nav#table-of-contents li a:hover::selection {
-          text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-          background: #c8c8c8; }
-        nav#table-of-contents li a:hover::-moz-selection {
-          text-shadow: 0.03em 0 #c8c8c8, -0.03em 0 #c8c8c8, 0 0.03em #c8c8c8, 0 -0.03em #c8c8c8, 0.06em 0 #c8c8c8, -0.06em 0 #c8c8c8, 0.09em 0 #c8c8c8, -0.09em 0 #c8c8c8, 0.12em 0 #c8c8c8, -0.12em 0 #c8c8c8, 0.15em 0 #c8c8c8, -0.15em 0 #c8c8c8;
-          background: #c8c8c8; }
-        nav#table-of-contents li a:hover *,
-        nav#table-of-contents li a:hover *:after, nav#table-of-contents li a:hover:after,
-        nav#table-of-contents li a:hover *:before, nav#table-of-contents li a:hover:before {
-          text-shadow: none; }
-        nav#table-of-contents li a:hover:visited {
-          color: #444; } }
+      content: ""; } }
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 8px; }
+
+::-webkit-scrollbar-track {
+  background: transparent; }
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 10px; }
+
+::-webkit-scrollbar-thumb:hover {
+  background: transparent; }
+
+@media (min-width: 1280px) {
+  #table-of-contents {
+    position: fixed;
+    right: 4rem;
+    top: 0;
+    padding: 1em;
+    width: 15rem;
+    line-height: 1.5;
+    margin-top: 4rem; }
+    #table-of-contents h2 {
+      margin-top: 0; }
+    #table-of-contents > div > ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      max-height: calc(100vh - 5rem - 40px);
+      overflow-y: auto;
+      overflow-x: visible;
+      scrollbar-color: transparent transparent;
+      scrollbar-width: thin; }
+      #table-of-contents > div > ul ul {
+        padding-left: 2em; }
+      #table-of-contents > div > ul > li {
+        display: block; }
+    #table-of-contents ul.active > li {
+      display: block; }
+    #table-of-contents li {
+      display: none; }
+      #table-of-contents li a {
+        display: inline-block;
+        color: var(--text-light);
+        text-decoration: none;
+        -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+        text-shadow: none;
+        background: none; }
+    #table-of-contents li:hover, #table-of-contents li:hover > ul > li {
+      display: block !important; }
+      #table-of-contents li:hover a, #table-of-contents li:hover > ul > li a {
+        color: var(--text-gray); }
+    #table-of-contents li.active > a {
+      color: var(--text-dark); }
+    #table-of-contents li::before {
+      content: ""; } }
+
+@media (min-width: 1640px) {
+  #table-of-contents {
+    right: 10rem; } }
 
 #breadcrumbs {
   font-family: "Open Sans";
@@ -1738,8 +2371,7 @@ nav#table-of-contents {
   font-style: normal;
   font-size: 12px;
   line-height: 1.9;
-  color: #7b7b7b;
-  text-transform: uppercase; }
+  color: var(--text-light); }
   #breadcrumbs a {
     background-image: none; }
 
@@ -1748,19 +2380,19 @@ nav#table-of-contents {
   border-width: 0;
   border-top-style: solid;
   border-top-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   padding-top: 30px;
   font-family: "Open Sans";
   font-weight: normal;
   font-size: 15px;
   line-height: 1.6;
-  color: #444; }
+  color: var(--text-gray); }
   .edits p, .edits li {
     font-family: "Open Sans";
     font-weight: normal;
     font-size: 15px;
     line-height: 1.6;
-    color: #444; }
+    color: var(--text-gray); }
   .edits li {
     margin-bottom: 16px; }
 
@@ -1774,7 +2406,7 @@ nav#table-of-contents {
   padding: 4px 8px;
   border-style: solid;
   border-width: 1px;
-  border-color: #efefef;
+  border-color: var(--back-light);
   border-radius: 1px;
   font-family: "Open Sans";
   font-variant: all-small-caps;
@@ -1787,14 +2419,14 @@ nav#table-of-contents {
   margin-right: 5px;
   line-height: 3em; }
   .page-tags a:hover {
-    background-color: #efefef;
+    background-color: var(--back-light);
     background-image: none; }
   .page-tags a.active {
     text-shadow: none;
     text-decoration: none;
-    color: #fff;
-    background-color: #2c3e50; }
+    color: var(--back-white);
+    background-color: var(--code-foreground); }
     .page-tags a.active:hover {
-      background-color: #efefef;
+      background-color: var(--back-light);
       background-image: none;
-      color: #000; }
+      color: var(--text-dark); }
diff --git a/misc/pile-css-theme/main.scss b/misc/pile-css-theme/main.scss
index 32b3a3e..50d2d93 100644
--- a/misc/pile-css-theme/main.scss
+++ b/misc/pile-css-theme/main.scss
@@ -4,7 +4,7 @@
 
 // Components
 @import 'aside';
-@import 'blockquote';
+@import 'blocks';
 @import 'bibliography';
 @import 'code';
 @import 'dropcap';
diff --git a/misc/pile-css-theme/toc.js b/misc/pile-css-theme/toc.js
new file mode 100644
index 0000000..53e6338
--- /dev/null
+++ b/misc/pile-css-theme/toc.js
@@ -0,0 +1,31 @@
+window.addEventListener('DOMContentLoaded', () => {
+    const sections = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
+    const activate = (entry) => {
+        entry.classList.add('active');
+        if (["LI", "UL"].includes(entry.parentElement.tagName)) {
+            activate(entry.parentElement);
+        }
+    };
+    const activateLast = () => {
+        document.querySelectorAll('#text-table-of-contents li.active, #text-table-of-contents ul.active').forEach(a => {
+            a.classList.remove('active')
+        });
+        let mostRecent = { section: sections[0], bottom: -Infinity };
+        const windowHeight = window.innerHeight;
+        sections.forEach((section) => {
+            const bounds = section.getBoundingClientRect()
+            if ( bounds.bottom > mostRecent.bottom && bounds.top < windowHeight ) {
+                mostRecent = { section, bottom: bounds.bottom };
+            }
+        })
+        activate(document.querySelector(`#text-table-of-contents li a[href="#${mostRecent.section.getAttribute('id')}"]`).parentElement);
+    }
+
+    const observer = new IntersectionObserver(entries => {
+        activateLast();
+    });
+
+    sections.forEach((section) => {
+        observer.observe(section);
+    });
+});