From d5abce0876c28cb3a0d62d7f7310cb778bcbff2d Mon Sep 17 00:00:00 2001
From: Syndamia <kamen@syndamia.com>
Date: Thu, 23 Nov 2023 20:00:35 +0200
Subject: [styles] Fully reworked styles from CSS to CSMA

---
 src/styles.csma | 367 ++++++++++++++++++-------------------
 src/styles.css  | 556 --------------------------------------------------------
 2 files changed, 178 insertions(+), 745 deletions(-)
 delete mode 100644 src/styles.css

diff --git a/src/styles.csma b/src/styles.csma
index 28d30c7..3927a25 100644
--- a/src/styles.csma
+++ b/src/styles.csma
@@ -77,54 +77,55 @@
     -webkit-font-kerning: normal;
     -webkit-font-smoothing: antialiased;
   }
-  nav, article { background-color: var(--bg-color); }
   body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
   *            { line-height: 1.3em; }
 
   <Button> {
     .btn, .h-anchor {
       /* Thanks https://stackoverflow.com/a/4407335/12036073 */
+
       -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-      -khtml-user-select: none; /* Konqueror HTML */
-      -moz-user-select: none; /* Old versions of Firefox */
-      -ms-user-select: none; /* Internet Explorer/Edge */
+      -webkit-user-select: none;   /* Safari */
+      -khtml-user-select: none;    /* Konqueror HTML */
+      -moz-user-select: none;      /* Old versions of Firefox */
+      -ms-user-select: none;       /* Internet Explorer/Edge */
       user-select: none;
     }
     .btn:hover   { cursor: pointer; }
     .btn:active  { transform: scale(0.9); }
   }
 
-  <Browser compatibility> {}
-  <Sidebar>
-  <Content>
+  <Browser compatibility> {
+      /* Inside _header we use <span class="br"></span>, instead of <br>, because if your browser
+       * doesn't support CSS, we want most stuff to be aligned on a single line, rather than preserve
+       * the "vertical" layout */
+    .br { display: block; }
+    .brt { display: block; height: 0.8em; }
+      /* Without CSS, certain stuff look bad or confusing, so with this I can add elements which
+       * add elements for helping with website usage, but which shouldn't be seen otherwise */
+    .nocss-aid { display: none; }
+  }
+
+  nav, article { background-color: var(--bg-color); }
+  <Sidebar> {}
+  <Content> {}
 
   <JavaScript/image-show.js>
 
-  /* lowdown classes and related settings */
-  .footnotes { font-size: 0.9em; margin-top: 3em; }
-  a[rev="footnote"] { border: none; }
+  <Lowdown> {
+    .footnotes { font-size: 0.9em; margin-top: 3em; }
+    a[rev="footnote"] { border: none; }
+  }
 }
 
-<Webpage> {
-<Browser compatibility> {
-    /* Inside _header we use <span class="br"></span>, instead of <br>, because if your browser
-     * doesn't support CSS, we want most stuff to be aligned on a single line, rather than preserve
-     * the "vertical" layout */
-  .br { display: block; }
-  .brt { display: block; height: 0.8em; }
-    /* Without CSS, certain stuff look bad or confusing, so with this I can add elements which
-     * add elements for helping with website usage, but which shouldn't be seen otherwise */
-  .nocss-aid { display: none; }
-
-}
-}
+<Sidebar>
+<Content>
 
+<Sidebar> {
 /*
  * Sidebar
  */
 
-<Sidebar> {
   #sidebar {
     background-color: var(--body-bg);
     font-size: 1.2em;
@@ -140,22 +141,27 @@
   #sidebar > :not(:first-child) { margin-top: 8px; }
   #sidebar a                    { border: none; }
 
-  <Sidebar/Header>
-  <Sidebar/Page links>
-  <Sidebar/Settings>
-  <Sidebar/Footer>
+  <Header>     {}
+  <Page links> {}
+  <Settings>   {}
+  <Footer>     {}
 
   <JavaScript/expand-navbar.js>
 }
 
-<Sidebar/Header> {
+<Sidebar> {
+<Header>
+{
   #header {
     border-right: none;
     font-size: 1.5em;
   }
 }
+}
 
-<Sidebar/Page links> {
+<Sidebar> {
+<Page links>
+{
   #index {
     border-right: none;
     border-bottom: none;
@@ -174,8 +180,11 @@
     display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
   }
 }
+}
 
-<Sidebar/Settings> {
+<Sidebar> {
+<Settings>
+{
   #settingsWrapper {
     border-top: none;
     border-bottom: none;
@@ -191,8 +200,11 @@
   }
   #settingsWrapper > .setting-btn { font-size: 0.5em; }
 }
+}
 
-<Sidebar/Footer> {
+<Sidebar> {
+<Footer>
+{
   #footer {
     font-size: 0.7em;
     overflow-x: hidden;
@@ -201,12 +213,13 @@
   }
   #footer > * { white-space: nowrap; }
 }
+}
 
+<Content> {
 /*
  * Content
  */
 
-<Content> {
   #content-wrapper {
     min-height: calc(100vh - 16px);
     display: flex;
@@ -214,10 +227,11 @@
     border-right: 3px solid var(--accent-line-color);
   }
 
-  <Content/Article>
+  <Article> {}
 }
 
-<Content/Article> {
+<Article>
+<Article> {
   article {
     border-top: 3px solid var(--accent-line-color);
     box-sizing: border-box;
@@ -233,57 +247,69 @@
   }
   .noMaxWidth { max-width: initial; }
 
-  <Post content>
+  <Gap>    {}
+  <Footer> {}
 
-  <Gap> {
-    .gap, .gap-small {
-      background-color: var(--body-bg);
-      margin: 0 -1em;
-    }
-    .gap       { height: 1.5em; }
-    .gap-small { height: 0.5em; }
-  }
+  <Contents in page>      {}
+  <Pagenav>               {}
+  <Paragraphs with icons> {}
+  <Page specific>         {}
 
-  <Footer> {
-    article > footer {
-      margin: 0 -1em;
-      padding: 0.5em;
-      border: 3px solid var(--accent-line-color);
-      border-left: none;
-      border-right: none;
-    }
+  <Headers>
+  <Anchor>
+  <Italics>
+  <Bold>
+  <Blockquote>
+  <Post card>
+  <Images>
+  <Code>
+  <Table>
+
+  .no-wrap {
+    color: inherit;
+    vertical-align: baseline;
+    white-space: nowrap;
   }
 
   <JavaScript/back-to-top.js>
 }
 
-<Article/Post content> {
-  <Post content/Contents in page>
-  <Post content/Pagenav>
-  <Post content/Headers>
-  <Post content/Anchor>
-  <Post content/Emphasis>
-  <Post content/Bold>
-  <Post content/Blockquote>
-  <Post content/Definition list>
-  <Post content/Images>
-  <Post content/Code>
-  <Post content/Paragraphs with icons>
-  <Post content/Page specific>
+<Article> {
+<Gap>
+{
+  .gap, .gap-small {
+    background-color: var(--body-bg);
+    margin: 0 -1em;
+  }
+  .gap       { height: 1.5em; }
+  .gap-small { height: 0.5em; }
+}
+}
 
-  .no-wrap {
-    color: inherit;
-    vertical-align: baseline;
-    white-space: nowrap;
+<Article> {
+<Footer>
+{
+  article > footer {
+    margin: 0 -1em;
+    padding: 0.5em;
+    border: 3px solid var(--accent-line-color);
+    border-left: none;
+    border-right: none;
   }
 }
+}
 
-<Post content/Contents in page> {
+<Article> {
+<Contents in page>
+{
   #contents-container { float: right; margin-left: 2.5em; background-color: var(--bg-color); padding-right: 0.5em; }
   #contents-container > h2 { margin-top: -1rem; }
 }
+}
 
-<Post content/Pagenav> {
+<Article> {
+<Pagenav>
+{
   #pagenav {
     filter: opacity(64%);
     font-size: 0.8em;
@@ -292,8 +318,43 @@
   #pagenav > * { white-space: nowrap; }
   #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
 }
+}
+
+<Article> {
+<Paragraphs with icons>
+{
+  .special-par {
+    margin-bottom: 0.25em;
+    position: relative;
+    padding: 0.5em;
+    padding-left: calc(32px + 1em);
+  }
+  .warn-par { border: 1px dashed #fac848; }
+  .important-par { border: 1px solid #f46062; }
+  .special-par-icon { vertical-align: middle; }
+  .special-par > .special-par-icon {
+    position: absolute;
+    left: 0.5em;
+    top: calc(50% - 16px);
+  }
+}
+}
+
+<Article> {
+<Page specific>
+{
+  <About page> {
+    #about-image {
+      float: right;
+      margin-right: 1em;
+      margin-top: 2em;
+      max-width: 7.6em;
+    }
+  }
+}
+}
 
-<Post content/Headers> {
+<Headers> {
   h1, h2, h3, h4, h5, h6 {
     color: var(--header-color);
     display: inline-block;
@@ -301,16 +362,18 @@
     border-bottom: 2px solid var(--border-color);
   }
   h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; }
+
   h1 + *, h1 ~ h1, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * {
     margin-top: 0;
   }
   .h-anchor { color: var(--fg-color); border: none; }
+
   /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 */
   h2 + .h-anchor { font-size: 1.4em; }
   h3 + .h-anchor { font-size: 1.1em; }
 }
 
-<Post content/Anchor> {
+<Anchor> {
   a, a strong {
     border-bottom: 1px dashed;
     color: var(--a-color);
@@ -321,15 +384,15 @@
   a:hover, a strong:hover { color: var(--a-hover-color); }
 }
 
-<Post content/Emphasis> {
+<Italics> {
   i, em { color: var(--em-color); }
 }
 
-<Post content/Bold> {
+<Bold> {
   strong { color: var(--strong-color); }
 }
 
-<Post content/Blockquote> {
+<Blockquote> {
   blockquote {
     border-left: .25em solid var(--blockquote-border-color);
     color: var(--blockquote-color);
@@ -342,7 +405,7 @@
   blockquote > :last-child  { margin-bottom: 0; }
 }
 
-<Post content/Definition list> {
+<Post card> {
   dt, dd {
     border: 2px solid var(--border-color);
     border-bottom: none;
@@ -360,7 +423,7 @@
   }
 }
 
-<Post content/Images> {
+<Images> {
   img {
     box-sizing: border-box;
     max-width: 100%;
@@ -375,7 +438,7 @@
   .borderless, .oldschool-badge, .file-type-icon { border: none; }
 }
 
-<Post content/Code> {
+<Code> {
   /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
   code, pre {
     background-color: var(--pre-bg-color);
@@ -411,6 +474,10 @@
   }
   dd code { font-size: 0.8em; }
 
+  <Syntax highlighting> {}
+}
+
+<Table> {
   table {
     border-spacing: 0;
     border-collapse: collapse;
@@ -439,34 +506,6 @@
   }
 }
 
-<Post content/Paragraphs with icons> {
-  .special-par {
-    margin-bottom: 0.25em;
-    position: relative;
-    padding: 0.5em;
-    padding-left: calc(32px + 1em);
-  }
-  .warn-par { border: 1px dashed #fac848; }
-  .important-par { border: 1px solid #f46062; }
-  .special-par-icon { vertical-align: middle; }
-  .special-par > .special-par-icon {
-    position: absolute;
-    left: 0.5em;
-    top: calc(50% - 16px);
-  }
-}
-
-<Post content/Page specific> {
-  <About page> {
-    #about-image {
-      float: right;
-      margin-right: 1em;
-      margin-top: 2em;
-      max-width: 7.6em;
-    }
-  }
-}
-
 /* Small screen support */
 
 @media screen and ((max-width: 610px) or (max-height: 610px)) {
@@ -509,9 +548,6 @@
   .slide, .absolute-slide { transform: none !important; margin: 0; }
 }
 
-/* presentation.js */
-.nodisplay { display: none; }
-
 <JavaScript> {
   <expand-navbar.js> {
     #expandNavbarBtn                { float: right; margin-left: 1em; }
@@ -552,82 +588,35 @@
     }
     .body-on-clicked-image { overflow: hidden; }
   }
-}
 
-/* Syntax highlighting */
-
-.HI-comment      { color: var(--hi-comment); }
-.HI-const        { color: var(--hi-const); }
-.HI-string       { color: var(--hi-string); }
-.HI-char         { color: var(--hi-char); }
-.HI-number       { color: var(--hi-number); }
-.HI-bool         { color: var(--hi-bool); }
-.HI-float        { color: var(--hi-float); }
-.HI-identifier   { color: var(--hi-identifier); }
-.HI-function     { color: var(--hi-function); }
-.HI-statement    { color: var(--hi-statement); }
-.HI-conditional  { color: var(--hi-conditional); }
-.HI-repeat       { color: var(--hi-repeat); }
-.HI-operator     { color: var(--hi-operator); }
-.HI-keyword      { color: var(--hi-keyword); /* Label and Exception are keywords */ }
-.HI-preproc      { color: var(--hi-preproc); }
-.HI-type         { color: var(--hi-type); }
-.HI-storageclass { color: var(--hi-storageclass); }
-.HI-structure    { color: var(--hi-structure); }
-.HI-typedef      { color: var(--hi-typedef); }
-.HI-ignore       { color: var(--hi-ignore); }
-.HI-comment *    { color: inherit; } /* If text inside a comment is matched, don't show it */
-
-/*
- * Format follows the following specs:
- * - short rules are put on one line
- *   This means that the last character from the rule is at MOST on column 80
- * - otherwise in the format
- *
- * rules {
- *   thing: value;
- *   thing: value;
- *   ...
- * }
- *
- * - below the ending curly brace, on the same identation, there are related stylings
- *   these include all stylings directly changing that rule and classes that are directly related
- *   each of these are, as mentioned, indents the same level as that closing brace
- *   each follows the same rules from above (and can have further more indented related stylings)
- *   all rules are ordered in this format (where ? is any combinator, and something is just a name)
- *
- * rule {
- *   ...
- * }
- *   something ? rule { ... }
- *   rule ? something { ... }
- *   rule::something  { ... }
- *   #something       { ... }
- *   .something       { ... }
- *
- * - when a related rule has the big rule and other classes, its preferrable that they're in
- *   descending order from without class/id to id and then class. example
- *
- * rule {
- *     ...
- *   }
- *   something ? rule             { ... }
- *   something ? rule, #something { ... }
- *   something ? rule, .something { ... }
- *   
- * - as you've noticed, multiple blocks that are on one line, below each other, should have their
- *   opening braces aligned, but only if the distance isn't "too big" (usually > 15-20 characters is too big)
- *
- * rule {
- *     ...
- *   }
- *   something ? rule      { ... }
- *   something-else ? rule { ... }
- *   something-else-1 ? rule, something-else-2 ? rule { ... }
- *   something-else-3 ? rule, something-else-4 ? rule { ... }
- *
- * - empty lines between related rules, to further separate certain related rules from others, are permittable
- *   in a class list, putting rules on new lines (starting with the same identation as the first) is also permittable
- *
- * - properties inside rules should be ordered lexicographically, and properties that start with a dash should be at the bottom
- */
+  <presentation.js> {
+    .nodisplay { display: none; }
+  }
+}
+<JavaScript/presentation.js>
+
+<Code> {
+<Syntax highlighting> {
+  .HI-comment      { color: var(--hi-comment); }
+  .HI-const        { color: var(--hi-const); }
+  .HI-string       { color: var(--hi-string); }
+  .HI-char         { color: var(--hi-char); }
+  .HI-number       { color: var(--hi-number); }
+  .HI-bool         { color: var(--hi-bool); }
+  .HI-float        { color: var(--hi-float); }
+  .HI-identifier   { color: var(--hi-identifier); }
+  .HI-function     { color: var(--hi-function); }
+  .HI-statement    { color: var(--hi-statement); }
+  .HI-conditional  { color: var(--hi-conditional); }
+  .HI-repeat       { color: var(--hi-repeat); }
+  .HI-operator     { color: var(--hi-operator); }
+  .HI-keyword      { color: var(--hi-keyword); /* Label and Exception are keywords */ }
+  .HI-preproc      { color: var(--hi-preproc); }
+  .HI-type         { color: var(--hi-type); }
+  .HI-storageclass { color: var(--hi-storageclass); }
+  .HI-structure    { color: var(--hi-structure); }
+  .HI-typedef      { color: var(--hi-typedef); }
+  .HI-ignore       { color: var(--hi-ignore); }
+  .HI-comment *    { color: inherit; } /* If text inside a comment is matched, don't show it */
+}
+}
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index b006cfc..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,556 +0,0 @@
-/*
- * Format follows the following specs:
- * - short rules (length includes all selectors; short means roughtly < 62 chars) are put on one line
- * - otherwise in the format
- *
- * rules {
- *     thing: value;
- *     thing: value;
- *     ...
- *   }
- *
- * - below the ending curly brace, on the same identation, there are related stylings
- *   these include all stylings directly changing that rule and classes that are directly related
- *   each of these are, as mentioned, indents the same level as that closing brace
- *   each follows the same rules from above (and can have further more indented related stylings)
- *   all rules are ordered in this format (where ? is any combinator, and something is just a name)
- *
- * rule {
- *     ...
- *   }
- *   something ? rule { ... }
- *   rule ? something { ... }
- *   rule::something  { ... }
- *   #something       { ... }
- *   .something       { ... }
- *
- * - when a related rule has the big rule and other classes, its preferrable that they're in
- *   descending order from without class/id to id and then class. example
- *
- * rule {
- *     ...
- *   }
- *   something ? rule             { ... }
- *   something ? rule, #something { ... }
- *   something ? rule, .something { ... }
- *   
- * - as you've noticed, multiple blocks that are on one line, below each other, should have their
- *   opening braces aligned, but only if the distance isn't "too big" (usually > 15-20 characters is too big)
- *
- * rule {
- *     ...
- *   }
- *   something ? rule      { ... }
- *   something-else ? rule { ... }
- *   something-else-1 ? rule, something-else-2 ? rule { ... }
- *   something-else-3 ? rule, something-else-4 ? rule { ... }
- *
- * - empty lines between related rules, to further separate certain related rules from others, are permittable
- *   in a class list, putting rules on new lines (starting with the same identation as the first) is also permittable
- *
- * - properties inside rules should be ordered lexicographically, and properties that start with a dash should be at the bottom
- */
-
-:root {
-  --bg-color: white;
-  --fg-color: black;
-
-  --a-color:                 #336700;
-  --a-hover-color:           #3ea100;
-  --accent-line-color:       #004080;
-  --alternating-row-color:   #eef0f2;
-  --bg-selection-color:      #338fff;
-  --blockquote-color:        #6a737d;
-  --blockquote-border-color: #dfe2e5;
-  --body-bg:                 #ebe3d2;
-  --border-color:            black;
-  --code-bg-color:           var(--hi-bg);
-  --em-color:                black;
-  --fg-selection-color:      white;
-  --header-color:            #006b8f;
-  --pre-bg-color:            var(--hi-bg);
-  --strong-color:            black;
-  --table-border-color:      black;
-  --tr-bg-color:             white;
-
-  /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */
-  --hi-fg:      var(--fg-color);
-  --hi-bg:      #f5f5e2;
-  --hic-gray:   #928374;
-  --hic-red:    #fb4934;
-  --hic-green:  #79740e;
-  --hic-blue:   #076678;
-  --hic-yellow: #b57614;
-  --hic-purple: #8f3f71;
-  --hic-aqua:   #427b58;
-  --hic-orange: #af3a03;
-
-  --hi-comment:      var(--hic-gray);
-  --hi-const:        var(--hic-purple);
-  --hi-string:       var(--hic-green);
-  --hi-char:         var(--hic-purple);
-  --hi-number:       var(--hic-purple);
-  --hi-bool:         var(--hic-purple);
-  --hi-float:        var(--hic-purple);
-  --hi-identifier:   var(--hic-blue);
-  --hi-function:     var(--hic-green);
-  --hi-statement:    var(--hic-red);
-  --hi-conditional:  var(--hic-red);
-  --hi-repeat:       var(--hic-red);
-  --hi-operator:     var(--hi-fg);
-  --hi-keyword:      var(--hic-red); /* Label and Exception are keywords */
-  --hi-preproc:      var(--hic-aqua);
-  --hi-type:         var(--hic-yellow);
-  --hi-storageclass: var(--hic-orange);
-  --hi-structure:    var(--hic-aqua);
-  --hi-typedef:      var(--hic-aqua);
-  --hi-ignore:       var(--hi-fg);
-}
-
-/* Global */
-
-@font-face {
-  font-family: 'Tabler';
-  src: url('/font/tabler-icons-subset.ttf') format('truetype');
-}
-
-body {
-    background-color: var(--body-bg);
-    border-color: var(--border-color);
-    color: var(--fg-color);
-    min-height: calc(100vh - 16px);
-    overflow-wrap: break-word;
-
-    /* Stuff to make sure the font is rendered correctly on Safari
-     * https://stackoverflow.com/a/56065714/12036073 */
-    font-rendering: optimizeLegibility;
-    font-weight: 400;
-    -webkit-font-kerning: normal;
-    -webkit-font-smoothing: antialiased;
-  }
-  nav, article { background-color: var(--bg-color); }
-  body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
-  *            { line-height: 1.3em; }
-
-img {
-    box-sizing: border-box;
-    max-width: 100%;
-  }
-  img, hr           { border: 1px solid var(--border-color); }
-  dt img, .svg      { box-sizing: border-box; max-height: 1em; }
-  .pixelated-render { image-rendering: pixelated; }
-  .oldschool-badge  { height: 38px; }
-  .flag             { max-width: 1.3em; } /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
-
-  .file-type-icon        { min-width: 1.3em; vertical-align: middle; }
-  .borderless, .oldschool-badge, .file-type-icon { border: none; }
-  
-  .special-par {
-      margin-bottom: 0.25em;
-      position: relative;
-      padding: 0.5em;
-      padding-left: calc(32px + 1em);
-    }
-    .warn-par { border: 1px dashed #fac848; }
-    .important-par { border: 1px solid #f46062; }
-    .special-par-icon { vertical-align: middle; }
-    .special-par > .special-par-icon {
-        position: absolute;
-        left: 0.5em;
-        top: calc(50% - 16px);
-      }
-
-  .btn, .h-anchor {
-      /* Thanks https://stackoverflow.com/a/4407335/12036073 */
-      -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-      -khtml-user-select: none; /* Konqueror HTML */
-      -moz-user-select: none; /* Old versions of Firefox */
-      -ms-user-select: none; /* Internet Explorer/Edge */
-      user-select: none;
-    }
-  .btn:hover   { cursor: pointer; }
-  .btn:active  { transform: scale(0.9); }
-
-  /* image-show.js */
-  .clicked-image {
-      background-color: var(--bg-color);
-      border: none;
-      height: 100vh;
-      left: 0;
-      max-width: none;
-      max-height: none;
-      object-fit: contain;
-      padding: 1em;
-      position: fixed;
-      top: 0;
-      width: 100vw;
-      z-index: 2;
-    }
-    .body-on-clicked-image { overflow: hidden; }
-
-
-strong { color: var(--strong-color); }
-a, a strong {
-    border-bottom: 1px dashed;
-    color: var(--a-color);
-    text-decoration: none;
-  }
-  sup a, dt a { border: none; }
-  a *         { color: var(--fg-color); }
-  a:hover, a strong:hover { color: var(--a-hover-color); }
-
-
-i, em { color: var(--em-color); }
-
-.noMaxWidth { max-width: initial; }
-.no-wrap {
-    color: inherit;
-    vertical-align: baseline;
-    white-space: nowrap;
-  }
-
-h1, h2, h3, h4, h5, h6 {
-    color: var(--header-color);
-    display: inline-block;
-    line-height: 1.25em;
-    border-bottom: 2px solid var(--border-color);
-  }
-  h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; }
-  h1 + *, h1 ~ h1, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * {
-      margin-top: 0;
-    }
-  .h-anchor { color: var(--fg-color); border: none; }
-    /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 */
-    h2 + .h-anchor { font-size: 1.4em; }
-    h3 + .h-anchor { font-size: 1.1em; }
-
-/* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
-code, pre {
-  background-color: var(--pre-bg-color);
-  font-family: monospace;
-  font-size: 85%;
-}
-  pre {
-      overflow: auto;
-      padding: 0.9em;
-      word-break: normal;
-      word-wrap: normal;
-    }
-  code {
-      margin: 0;
-      padding: 0 0.4em;
-    }
-  pre code {
-      border: 0;
-      display: inline-block;
-      font-size: 100%;
-      overflow: visible;
-      padding: 0;
-      word-wrap: normal;
-    }
-  pre > code {
-      white-space: pre-wrap;
-      word-break: break-all;
-      padding-right: 0.9em;
-    }
-  table code {
-      font-size: 0.7em;
-      white-space: normal;
-    }
-  dd code { font-size: 0.8em; }
-
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-    margin: 1em 0;
-    overflow: auto;
-  }
-  table td, table th { word-break: normal !important; }
-  table td:not(:first-of-type), table th:not(:first-of-type) {
-      border-left: 2px dashed var(--table-border-color);
-    }
-  table td, table th { padding: 0.5em; }
-  table th {
-      font-size: 1.1em;
-      font-weight: bold;
-    }
-  table td:empty { height: 1em; }
-
-  table tr:not(:first-of-type) {
-      background-color: var(--tr-bg-color);
-    }
-  thead tr {
-      border-bottom: 2px dashed var(--table-border-color);
-    }
-  table tr:nth-child(2n), thead tr {
-      background-color: var(--alternating-row-color);
-    }
-
-blockquote {
-    border-left: .25em solid var(--blockquote-border-color);
-    color: var(--blockquote-color);
-    margin: 0;
-    margin-top: 0;
-    margin-bottom: 16px;
-    padding: 0 1em;
-  }
-  blockquote > :first-child { margin-top: 0; }
-  blockquote > :last-child  { margin-bottom: 0; }
-
-dt, dd {
-    border: 2px solid var(--border-color);
-    border-bottom: none;
-    border-top: none;
-    padding: 0 0.5em;
-  }
-  dt { font-size: 1.2em; padding-top: 0.2em; }
-  dt * { vertical-align: middle; }
-  dd {
-      line-height: 1.5em; 
-      margin-bottom: 1em;
-      margin-left: 0;
-      padding-bottom: 0.4em;
-      padding-left: 49px;
-    }
-
-/* Very old/unfinished browser compatibility */
-
-    /* Inside _header we use <span class="br"></span>, instead of <br>, because if your browser
-     * doesn't support CSS, we want most stuff to be aligned on a single line, rather than preserve
-     * the "vertical" layout */
-.br { display: block; }
-.brt { display: block; height: 0.8em; }
-    /* Without CSS, certain stuff look bad or confusing, so with this I can add elements which
-     * add elements for helping with website usage, but which shouldn't be seen otherwise */
-.nocss-aid { display: none; }
-
-/* lowdown classes and related settings */
-
-.footnotes { font-size: 0.9em; margin-top: 3em; }
-  a[rev="footnote"] { border: none; }
-
-/* Main elements: content-wrapper, sidebar, article, header, footer */
-
-#content-wrapper {
-    border-right: 3px solid var(--accent-line-color);
-    display: flex;
-    flex-direction: row;
-    min-height: calc(100vh - 16px);
-  }
-  #sidebar {
-      background-color: var(--body-bg);
-      font-size: 1.2em;
-      margin-right: 8px;
-      max-width: 11.2em;
-    }
-    #sidebar > * {
-        border: 3px solid var(--accent-line-color);
-        box-sizing: border-box;
-        padding: 1rem 1rem;
-        width: 100%;
-      }
-    #sidebar > :not(:first-child) { margin-top: 8px; }
-    #sidebar a                    { border: none; }
-
-    #header {
-        border-right: none;
-        font-size: 1.5em;
-      }
-    #index {
-        border-right: none;
-        border-bottom: none;
-      }
-    #settingsWrapper {
-        border-top: none;
-        border-bottom: none;
-        font-size: 1.2em;
-        line-height: 1em;
-      }
-      .setting-btn {
-          text-align: center;
-          display: inline-block;
-          line-height: 1em;
-          border: 1px solid var(--border-color);
-          padding: 0.4em;
-        }
-        #settingsWrapper > .setting-btn { font-size: 0.5em; }
-    #footer {
-        font-size: 0.7em;
-        overflow-x: hidden;
-        border-left: none;
-        border-top: none;
-      }
-    #footer > * { white-space: nowrap; }
-
-    /* expand-navbar.js */
-    #expandNavbarBtn                { float: right; margin-left: 1em; }
-    .sidebar-hidden                 { min-height: auto; position: absolute; }
-    .sidebar-hidden > :not(#header) { display: none; }
-    .sidebar-hidden + .noMaxWidth   { margin-top: 6em; }
-
-    article {
-        border-top: 3px solid var(--accent-line-color);
-        box-sizing: border-box;
-        flex: 1;
-        max-width: 56em; /* Equivalent to 50em on 19px font-size */
-        margin-bottom: 1em;
-        overflow: auto;
-        padding: 0 1em;
-      }
-    article {
-        margin-left: auto;
-        margin-right: auto;
-      }
-      #contents-container { float: right; margin-left: 2.5em; background-color: var(--bg-color); padding-right: 0.5em; }
-        #contents-container > h2 { margin-top: -1rem; }
-      #pagenav {
-          filter: opacity(64%);
-          font-size: 0.8em;
-          margin: 0 0 3rem 2rem;
-        }
-        #pagenav > * { white-space: nowrap; }
-        #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
-
-      .gap, .gap-small {
-        background-color: var(--body-bg);
-        margin: 0 -1em;
-      }
-      .gap       { height: 1.5em; }
-      .gap-small { height: 0.5em; }
-
-      article > footer {
-        margin: 0 -1em;
-        padding: 0.5em;
-        border: 3px solid var(--accent-line-color);
-        border-left: none;
-        border-right: none;
-      }
-      /* back-to-top.js */
-      #scrollBtn {
-        background-color: var(--bg-color);
-        bottom: 1rem;
-        border: 1px solid;
-        display: none;
-        font-size: 1.66rem;
-        position: fixed;
-        padding: 0 0.15em;
-        right: 1rem;
-        transition-duration: 0.5s;
-        z-index: 1;
-      }
-
-/* Main elements helpers */
-
-.arrowed-list {
-    border-left: 2px solid var(--border-color);
-    display: grid;
-    grid-column-start: 1;
-    grid-column-end: 1;
-    margin: 0 0 0.5em 0.3em;
-    padding-left: 0.5em;
-    row-gap: 0;
-  }
-  .arrowed-list > *, .arrowed-list > *:hover {
-      line-height: 1.2em;
-      display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
-    }
-
-/* Special styling */
-
-#about-image {
-    float: right;
-    margin-right: 1em;
-    margin-top: 2em;
-    max-width: 7.6em;
-  }
-
-/* Small screen support */
-
-@media screen and ((max-width: 610px) or (max-height: 610px)) {
-  article {
-      border-top: none;
-      max-width: calc(100vw - 16px - 3px);
-    }
-  table td, table th { word-break: break-all; }
-
-  #about-image { max-width: 4.38em; }
-
-  #content-wrapper { flex-direction: column; }
-  #sidebar {
-      max-width: initial;
-      margin: 0;
-    }
-    #sidebar > * { border-right: none; }
-    .sidebar-hidden                 { position: initial; }
-    .sidebar-hidden > :not(#header) { display: none; }
-    .sidebar-hidden + .noMaxWidth   { margin-top: 0; }
-    /* page-width.js */
-    #changeWidthBtn { display: none; }
-}
-
-/* Printing support */
-
-@media print {
-  h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img,
-  nav, #scrollBtn, .gap, .gap-small {
-      display: none !important;
-    }
-
-  body { margin: 0; }
-    body, article {
-        background-color: white;
-        border: none !important;
-      }
-
-  pre, code { white-space: pre-wrap !important; }
-  .slide, .absolute-slide { transform: none !important; margin: 0; }
-}
-
-/* presentation.js */
-.nodisplay { display: none; }
-
-/* File tables */
-.file-wrapper { margin: 0.5em 0; }
-  .file-wrapper > summary               { list-style: none; }
-  .file-wrapper > summary::before       { content: '\FF0B'; }
-  .file-wrapper[open] > summary::before { content: '\FF0D'; }
-  .file-wrapper > summary:hover         { cursor: pointer; }
-
-  .file-wrapper > .file-list { margin-left: 1.5em; }
-  .file-list {
-      border-collapse: collapse;
-      table-layout: auto;
-      width: auto;
-    }
-    .file-list td, .file-list tr {
-        border: none !important;
-        padding: 0.2em 0.4em !important;
-      }
-    .file-list tr > td:first-child {
-        padding: 0.2em 0 0.2em 0.2em !important;
-      }
-
-/* Syntax highlighting */
-
-.HI-comment      { color: var(--hi-comment); }
-.HI-const        { color: var(--hi-const); }
-.HI-string       { color: var(--hi-string); }
-.HI-char         { color: var(--hi-char); }
-.HI-number       { color: var(--hi-number); }
-.HI-bool         { color: var(--hi-bool); }
-.HI-float        { color: var(--hi-float); }
-.HI-identifier   { color: var(--hi-identifier); }
-.HI-function     { color: var(--hi-function); }
-.HI-statement    { color: var(--hi-statement); }
-.HI-conditional  { color: var(--hi-conditional); }
-.HI-repeat       { color: var(--hi-repeat); }
-.HI-operator     { color: var(--hi-operator); }
-.HI-keyword      { color: var(--hi-keyword); /* Label and Exception are keywords */ }
-.HI-preproc      { color: var(--hi-preproc); }
-.HI-type         { color: var(--hi-type); }
-.HI-storageclass { color: var(--hi-storageclass); }
-.HI-structure    { color: var(--hi-structure); }
-.HI-typedef      { color: var(--hi-typedef); }
-.HI-ignore       { color: var(--hi-ignore); }
-.HI-comment *    { color: inherit; } /* If text inside a comment is matched, don't show it */
-- 
cgit v1.3.1-23-gd82d