feat!: Removed CSMA, made minor styling changes

9 files changed, 524 insertions, 695 deletions

diff --git a/.gitmodules b/.gitmodules
index b36ee4c..600c751 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,6 +1,3 @@
 [submodule "csg"]
 	path = csg
 	url = https://gitlab.com/Syndamia/csg.git
-[submodule "csma"]
-	path = csma
-	url = https://gitlab.com/Syndamia/csma.git
diff --git a/awk-edits/Heading-anchors.awk b/awk-edits/Heading-anchors.awk
index 10f4aa9..7d4edf8 100644
--- a/awk-edits/Heading-anchors.awk
+++ b/awk-edits/Heading-anchors.awk
@@ -12,5 +12,5 @@
 		gap = "<div class=\"gap" ((substr($0, RSTART + 2, 1) == 2) ? "" : "-small") "\"></div>" ORS
 	}
 	match($0, /id="[^"]*"/)
-	$0 = gap $0 ORS "<a class=\"h-anchor\" href=\"#" substr($0, RSTART + 4, RLENGTH - 5) "\" aria-hidden=\"true\">&#x00A7;</a>"
+	$0 = gap $0 ORS "<a class=\"h-anchor\" href=\"#" substr($0, RSTART + 4, RLENGTH - 5) "\" aria-hidden=\"true\">#</a>"
 }
diff --git a/csma b/csma
deleted file mode 160000
-Subproject a00471ff2e26fa5f1cb6be4d9ba3d3dbdff0a57
diff --git a/generate.sh b/generate.sh
index 7240951..43023af 100755
--- a/generate.sh
+++ b/generate.sh
@@ -31,17 +31,7 @@ EOF
 	
 	/usr/bin/env dash ./csg/csg "$REPO_FOLDER/src" "$GEN_FOLDER" '& \\&mdash; Syndamia' 'https://syndamia.com' "$AWK_FOLDER"
 # }}}
-# 2. CSMA to CSS {{{
-	echo "[Stage 3] CSMA"
-	while read -r stylesheet
-	do
-		/usr/bin/env -S awk -f './csma/csmap.awk' "$stylesheet" > "${stylesheet:0: -4}css"
-		rm "$stylesheet"
-	done << EOF
-$(find "$GEN_FOLDER" -type f -name "*.csma")
-EOF
-# }}}
-# 3. Tiny version, strip away styles and other stuff {{{
+# 2. Tiny version, strip away styles and other stuff {{{
 	[ ! -d "$GEN_TINY_FOLDER" ] && mkdir "$GEN_TINY_FOLDER"
 	[ $# -eq 0 -a "$(stat -c %U "$GEN_TINY_FOLDER")" != "www-data" ] && echo "[Warning] Running in \"production\" while $GEN_TINY_FOLDER isn't owned by www-data!"
 
@@ -63,7 +53,7 @@ EOF
 		done
 	}
 
-	echo "[Stage 4] Tiny website"
+	echo "[Stage 3] Tiny website"
 	if [ $# -eq 0 ]; then
 		improveForTINY
 
diff --git a/src/_header.html b/src/_header.html
index 817318c..16c1d00 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -25,7 +25,7 @@
 </head>
 <body id="content-wrapper" text="black" bgcolor="white" link="#336700" vlink="#336700">
 	<nav id="sidebar">
-		<nav id="header">
+		<nav id="header" class="sidebar-section">
 			<span class="nocss-aid">[[</span>
 
 			<a href="/">Home</a>
@@ -35,16 +35,16 @@
 			<span class="nocss-aid">]]</span>
 		</nav>
 
-		<nav id="index">
+		<nav id="index" class="sidebar-section">
 			<span class="nocss-aid"><br>[[</span>
 
 			<span>Content</span><span class="nocss-aid">:</span>
-			<span class="arrowed-list">
-				<a href="/blog">Blog</a>
-				<a href="/slides">Slides</a>
-				<a href="/teaching">Teaching</a>
-				<a href="/tutorials">Tutorials</a>
-				<a href="/misc">Miscellaneous</a>
+			<span class="index-list">
+				<a class="index-list-item" href="/blog">Blog</a>
+				<a class="index-list-item" href="/slides">Slides</a>
+				<a class="index-list-item" href="/teaching">Teaching</a>
+				<a class="index-list-item" href="/tutorials">Tutorials</a>
+				<a class="index-list-item" href="/misc">Miscellaneous</a>
 			</span>
 
 			<span class="nocss-aid">]]</span>
@@ -52,9 +52,9 @@
 			<span class="nocss-aid"><br>[[</span>
 
 			<span>Preservation</span><span class="nocss-aid">:</span>
-			<span class="arrowed-list">
-				<a href="/preserved-media">Media</a>
-				<a href="/preserved-web-pages">Web pages</a>
+			<span class="index-list">
+				<a class="index-list-item" href="/preserved-media">Media</a>
+				<a class="index-list-item" href="/preserved-web-pages">Web pages</a>
 			</span>
 
 			<span class="nocss-aid">]]</span>
@@ -62,10 +62,10 @@
 			<span class="nocss-aid"><br>[[</span>
 
 			<span>Me</span><span class="nocss-aid">:</span>
-			<span class="arrowed-list">
-				<a href="/about">About</a>
-				<a href="/software">Software</a>
-				<a href="/setup">Setup</a>
+			<span class="index-list">
+				<a class="index-list-item" href="/about">About</a>
+				<a class="index-list-item" href="/software">Software</a>
+				<a class="index-list-item" href="/setup">Setup</a>
 			</span>
 
 			<span class="nocss-aid">]]</span>
@@ -73,7 +73,7 @@
 
 		<span class="nocss-aid"><br></span>
 
-		<nav id="settingsWrapper">
+		<nav id="settingsWrapper" class="sidebar-section">
 			<span class="nocss-aid"><br>[[</span>
 
 			<span id="changeThemeBtn" class="btn setting-btn"><span>Light</span><span class="br"></span>theme</span>
@@ -84,7 +84,7 @@
 
 		<span class="nocss-aid"><br></span>
 
-		<nav id="footer">
+		<nav id="footer" class="sidebar-section">
 			<span class="nocss-aid">[[</span>
 
 			<a href="/license.html" title="CC BY-SA 4.0 and GNU GPLv3">CC BY-SA 4.0 and GNU GPLv3</a>
diff --git a/src/scripts/expand-navbar.js b/src/scripts/expand-navbar.js
index 4cea31c..988d211 100644
--- a/src/scripts/expand-navbar.js
+++ b/src/scripts/expand-navbar.js
@@ -1,15 +1,15 @@
 const expandBtn = document.getElementById('expandNavbarBtn');
-const sidebarElem = document.getElementById('sidebar');
+const wrapperElem = document.getElementById('content-wrapper');
 
 if (localStorage.getItem('navbar') === 'hidden' || window.innerWidth <= 610 || window.innerHeight <= 610) {
 	expandBtn.innerText = '\u25BC';
-	sidebarElem.classList.add('sidebar-hidden');
+	wrapperElem.classList.add('content-wrapper-vertical');
 }
 
 expandBtn.onclick = function() {
-	sidebarElem.classList.toggle('sidebar-hidden');
+	wrapperElem.classList.toggle('content-wrapper-vertical');
 
-	if (!sidebarElem.classList.contains('sidebar-hidden')) {
+	if (!wrapperElem.classList.contains('content-wrapper-vertical')) {
 		expandBtn.innerText = '\u25B2'; // triangle pointing up
 		if (window.innerWidth > 610) localStorage.setItem('navbar', 'norm');
 	}
diff --git a/src/scripts/page-width.js b/src/scripts/page-width.js
index 784c0f2..353dc4d 100644
--- a/src/scripts/page-width.js
+++ b/src/scripts/page-width.js
@@ -4,11 +4,11 @@ const articleElem = document.getElementsByTagName('article')[0];
 
 if (localStorage.getItem('width') === 'wide') {
 	widthLabel.innerText = 'Narrow';
-	articleElem.classList.add('noMaxWidth');
+	articleElem.classList.add('article-wide');
 }
 
 widthBtn.onclick = function() {
-	articleElem.classList.toggle('noMaxWidth');
+	articleElem.classList.toggle('article-wide');
 
 	if (localStorage.getItem('width') !== 'norm') {
 		widthLabel.innerText = 'Wide';
diff --git a/src/styles.csma b/src/styles.csma
deleted file mode 100644
index 29d63fe..0000000
--- a/src/styles.csma
+++ /dev/null
@@ -1,656 +0,0 @@
-:root {
-  --bg-color: white;
-  --fg-color: black;
-
-  --body-bg:           #ebe3d2;
-  --accent-line-color: #004080;
-
-  --a-color:                 #336700;
-  --a-hover-color:           #3ea100;
-  --bg-selection-color:      #338fff;
-  --blockquote-color:        #6a737d;
-  --blockquote-border-color: #dfe2e5;
-  --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:             #fbfdff;
-  --alternating-row-color:   #eef0f2;
-
-  --terminal-fg: black;
-  --terminal-bg: 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');
-}
-
-<Webpage>
-<Webpage> {
-  body {
-    min-height: calc(100vh - 16px);
-    background-color: var(--body-bg);
-    border-color: var(--border-color);
-    color: var(--fg-color);
-    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;
-  }
-  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 */
-      user-select: none;
-    }
-    .btn:hover   { cursor: pointer; }
-    .btn:active  { transform: scale(0.9); }
-  }
-
-  <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> {
-    .footnotes { font-size: 0.9em; margin-top: 3em; }
-    a[rev="footnote"] { border: none; }
-  }
-}
-
-<Sidebar>
-<Content>
-
-<Sidebar> {
-/*
- * Sidebar
- */
-
-  #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>     {}
-  <Page links> {}
-  <Settings>   {}
-  <Footer>     {}
-
-  <JavaScript/expand-navbar.js>
-}
-
-<Sidebar> {
-<Header>
-{
-  #header {
-    border-right: none;
-    font-size: 1.5em;
-  }
-}
-}
-
-<Sidebar> {
-<Page links>
-{
-  #index {
-    border-right: none;
-    border-bottom: none;
-  }
-  .arrowed-list {
-    margin: 0 0 0.5em 0.3em;
-    padding-left: 0.5em;
-    row-gap: 0;
-    grid-column-start: 1;
-    grid-column-end: 1;
-    display: grid;
-    border-left: 2px solid var(--border-color);
-  }
-  .arrowed-list > *, .arrowed-list > *:hover {
-    line-height: 1.2em;
-    display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
-  }
-}
-}
-
-<Sidebar> {
-<Settings>
-{
-  #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; }
-}
-}
-
-<Sidebar> {
-<Footer>
-{
-  #footer {
-    font-size: 0.7em;
-    overflow-x: hidden;
-    border-left: none;
-    border-top: none;
-  }
-  #footer > * { white-space: nowrap; }
-}
-}
-
-<Content> {
-/*
- * Content
- */
-
-  #content-wrapper {
-    min-height: calc(100vh - 16px);
-    display: flex;
-    flex-direction: row;
-    border-right: 3px solid var(--accent-line-color);
-  }
-
-  <Article> {}
-}
-
-<Article>
-<Article> {
-  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;
-  }
-  .noMaxWidth { max-width: initial; }
-
-  <Gap>    {}
-  <Footer> {}
-
-  <Contents in page>      {}
-  <Pagenav>               {}
-  <Paragraphs with icons> {}
-  <Teaching>              {}
-  <Page specific>         {}
-
-  <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> {
-<Gap>
-{
-  .gap, .gap-small {
-    background-color: var(--body-bg);
-    margin: 0 -1em;
-  }
-  .gap       { height: 1.5em; }
-  .gap-small { height: 0.5em; }
-}
-}
-
-<Article> {
-<Footer>
-{
-  article > footer {
-    margin: 0 -1em;
-    padding: 0.5em;
-    border: 3px solid var(--accent-line-color);
-    border-left: none;
-    border-right: none;
-  }
-}
-}
-
-<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; }
-}
-}
-
-<Article> {
-<Pagenav>
-{
-  #pagenav {
-    filter: opacity(64%);
-    font-size: 0.8em;
-    margin: 0 0 3rem 2rem;
-  }
-  #pagenav strong, #pagenav a { white-space: nowrap; }
-  #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
-
-  #pagenav-breadcrumb { font-weight: bold; }
-  #pagenav-breadcrumb em { font-weight: normal; }
-}
-}
-
-<Article> {
-<Paragraphs with icons>
-{
-  .special-par {
-    position: relative;
-    padding: 0.5em;
-    padding-left: calc(32px + 1em);
-  }
-  .question-par { border-left: 2px solid #4a85cb; }
-  .warn-par { border: 2px dashed #fac848; }
-  .important-par { border: 2px solid #f46062; }
-  .special-par-icon { vertical-align: middle; }
-  .special-par > .special-par-icon {
-    position: absolute;
-    left: 0.5em;
-    top: calc(50% - 16px);
-  }
-}
-}
-
-<Article> {
-<Teaching> {
-  .exercise-solution {
-    float: right;
-    font-weight: bold;
-  }
-
-  /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 https://stackoverflow.com/a/47560151/12036073 */
-  h2 ~ .exercise-solution { font-size: 1.4em; margin-top: 0.6em; }
-  h3 ~ .exercise-solution { font-size: 1.1em; margin-top: 0.8em; }
-}
-}
-
-<Article> {
-<Page specific>
-{
-  <About page> {
-    #about-image {
-      float: right;
-      margin-right: 1em;
-      margin-top: 2em;
-      max-width: 7.6em;
-    }
-  }
-}
-}
-
-<Headers> {
-  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; }
-}
-
-<Anchor> {
-  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); }
-}
-
-<Italics> {
-  i, em { color: var(--em-color); }
-}
-
-<Bold> {
-  strong { color: var(--strong-color); }
-}
-
-<Blockquote> {
-  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; }
-}
-
-<Post card> {
-  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;
-  }
-}
-
-<Images> {
-  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; }
-}
-
-<Code> {
-  /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
-  code, pre {
-      font-family: monospace;
-      font-size: 85%;
-  }
-
-  <Pre elem> {
-    pre {
-      overflow: auto;
-      word-break: normal;
-      word-wrap: normal;
-    }
-  }
-
-  <Code elem> {
-    code {
-      background-color: var(--pre-bg-color);
-      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: 0.9em;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    table code {
-      font-size: 0.7em;
-      white-space: normal;
-    }
-    dd code { font-size: 0.8em; }
-  }
-
-  <Syntax highlighting> {}
-  .language-terminal {
-    color: var(--terminal-fg);
-    background-color: var(--terminal-bg);
-  }
-}
-
-<Table> {
-  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 {
-    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);
-  }
-}
-
-/* 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; }
-  .language-terminal { color: var(--fg-color); background-color: var(--bg-color); }
-  .slide, .absolute-slide { transform: none !important; margin: 0; }
-}
-
-<JavaScript> {
-  <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; }
-  }
-
-  <back-to-top.js> {
-    #scrollBtn {
-      font-size: 1.66rem;
-      padding: 0 0.15em;
-      bottom: 1rem;
-      right: 1rem;
-      z-index: 1;
-      transition-duration: 0.5s;
-      background-color: var(--bg-color);
-      display: none;
-      position: fixed;
-      border: 1px solid;
-    }
-  }
-
-  <image-show.js> {
-    .clicked-image {
-      height: 100vh;
-      width: 100vw;
-      max-width: none;
-      max-height: none;
-      padding: 1em;
-      background-color: var(--bg-color);
-      left: 0;
-      top: 0;
-      z-index: 2;
-        border: none;
-        object-fit: contain;
-        position: fixed;
-    }
-    .body-on-clicked-image { overflow: hidden; }
-  }
-
-  <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
new file mode 100644
index 0000000..ff394ac
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,498 @@
+:root {
+  --bg-color: white;
+  --fg-color: black;
+
+  --body-bg:           #ebe3d2;
+  --accent-line-color: #004080;
+
+  --a-color:                 #336700;
+  --a-hover-color:           #3ea100;
+  --bg-selection-color:      #338fff;
+  --blockquote-color:        #6a737d;
+  --blockquote-border-color: #dfe2e5;
+  --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:             #fbfdff;
+  --alternating-row-color:   #eef0f2;
+
+  --terminal-fg: black;
+  --terminal-bg: 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;
+}
+body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
+*            { line-height: 1.3em; }
+
+/*## No-CSS 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); }
+
+/*## Wrapper ##*/
+
+#content-wrapper {
+  min-height: calc(100vh - 16px);
+  display: flex;
+  flex-direction: row;
+  border-right: 3px solid var(--accent-line-color);
+}
+
+#content-wrapper.content-wrapper-vertical               { border: none; flex-direction: column; }
+.content-wrapper-vertical > #sidebar                    { max-width: initial; margin: 0; }
+.content-wrapper-vertical .sidebar-section:not(#header) { display: none; }
+.content-wrapper-vertical > article                     { margin-top: 8px; }
+
+/*## Wrapper > Sidebar ##*/
+
+#sidebar {
+  background-color: var(--body-bg);
+  font-size: 1.2em;
+  margin-right: 8px;
+  max-width: 11.2em;
+}
+#sidebar a { border: none; }
+
+.sidebar-section {
+  border: 3px solid var(--accent-line-color);
+  box-sizing: border-box;
+  padding: 1rem 1rem;
+}
+.sidebar-section ~ .sidebar-section { margin-top: 8px; }
+
+/*### Wrapper > Sidebar > header ###*/
+
+#header { border-right: none;
+  font-size: 1.5em;
+}
+#expandNavbarBtn { float: right; margin-left: 1em; }
+
+/*### Wrapper > Sidebar > index ###*/
+
+#index { border-right: none; border-bottom: none; }
+.index-list {
+  margin: 0 0 0.5em 0.3em;
+  padding-left: 0.5em;
+  display: block;
+  border-left: 2px solid var(--border-color);
+}
+.index-list-item, .index-list-item:hover {
+  line-height: 1.2em;
+  display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
+}
+
+/*### Wrapper > Sidebar > settingsWrapper ###*/
+
+#settingsWrapper { border-top: none; border-bottom: none;
+  font-size: 1.2em;
+  line-height: 1em;
+}
+#settingsWrapper > .setting-btn { font-size: 0.5em; }
+
+/*### Wrapper > Sidebar > footer ###*/
+
+#footer { border-left: none; border-top: none;
+  font-size: 0.7em;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+
+/*## Wrapper > Article ##*/
+
+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;
+
+  margin-left: auto;
+  margin-right: auto;
+}
+.article-wide {
+  max-width: initial;
+  margin-left: initial;
+  margin-right: initial;
+}
+
+/*### Wrapper > Article > page navigation ###*/
+
+#pagenav {
+  filter: opacity(64%);
+  font-size: 0.8em;
+  margin: 0 0 3rem 2rem;
+}
+#pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }
+
+/*### Wrapper > Article > contents ###*/
+
+#contents-container {
+  float: right;
+  margin-left: 2.5em;
+  background-color: var(--bg-color);
+  padding-right: 0.5em;
+}
+#contents-container > h2 { margin-top: -1rem; }
+
+/*### Wrapper > Article > section gap ###*/
+
+.gap, .gap-small {
+  background-color: var(--body-bg);
+  margin: 0 -1em;
+}
+.gap       { height: 1.5em; }
+.gap-small { height: 0.5em; }
+
+/*### Wrapper > Article > special paragraphs ###*/
+
+.special-par {
+  position: relative;
+  padding: 0.5em;
+  padding-left: calc(32px + 1em);
+}
+.special-par-icon {
+  vertical-align: middle;
+  position: absolute;
+  left: 0.5em;
+  top: calc(50% - 16px);
+}
+
+.question-par  { border-left: 2px solid #4a85cb; }
+.warn-par      { border: 2px dashed #fac848; }
+.important-par { border: 2px solid #f46062; }
+
+/*### Wrapper > Article > page-specific ###*/
+
+/*#### Exercise solution ####*/
+
+.exercise-solution { float: right; font-weight: bold; }
+
+/* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 https://stackoverflow.com/a/47560151/12036073 */
+h2 ~ .exercise-solution { font-size: 1.4em; margin-top: 0.6em; }
+h3 ~ .exercise-solution { font-size: 1.1em; margin-top: 0.8em; }
+
+/*#### Face in about page ####*/
+
+#about-image {
+  float: right;
+  margin: 2em 1em 0 0;
+  max-width: 7.6em;
+}
+
+/*#### Markdown overrides ####*/
+
+.footnotes { font-size: 0.9em; margin-top: 3em; }
+a[rev="footnote"] { border: none; }
+
+.language-terminal {
+  color: var(--terminal-fg);
+  background-color: var(--terminal-bg);
+}
+
+/*#### No-property ####*/
+
+.nodisplay { display: none; }
+.no-wrap {
+  color: inherit;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+/*### Wrapper > Article > buttons ###*/
+
+.btn:hover   { cursor: pointer; }
+.btn:active  { transform: scale(0.9); }
+
+.setting-btn {
+  text-align: center;
+  display: inline-block;
+  line-height: 1em;
+  border: 1px solid var(--border-color);
+  padding: 0.4em;
+}
+
+.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;
+}
+
+/*### Wrapper > Article > footer ###*/
+
+article > footer {
+  margin: 0 -1em;
+  padding: 0.5em;
+  border: 3px solid var(--accent-line-color);
+  border-left: none;
+  border-right: none;
+}
+
+/*### Wrapper > Article > h, h-anchor ###*/
+
+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, .h-anchor + * { 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; }
+
+/*### Wrapper > Article > a ###*/
+
+a, a strong {
+  border-bottom: 1px dashed;
+  color: var(--a-color);
+  text-decoration: none;
+}
+a:hover, a strong:hover { color: var(--a-hover-color); }
+sup a, dt a { border: none; }
+a *         { color: var(--fg-color); }
+
+/*### Wrapper > Article > i, em, strong ###*/
+
+i, em { color: var(--em-color); }
+strong { color: var(--strong-color); }
+
+/*### Wrapper > Article > blockquote ###*/
+
+blockquote {
+  border-left: 0.25em solid var(--blockquote-border-color);
+  color: var(--blockquote-color);
+  margin: 0 0 16px 0;
+  padding: 0 1em;
+}
+blockquote > :first-child { margin-top: 0; }
+blockquote > :last-child  { margin-bottom: 0; }
+
+/*### Wrapper > Article > dt, dd ###*/
+
+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: 0 0 1em 0;
+  padding: 0 0 0.4em 49px;
+}
+
+/*### Wrapper > Article > img, hr ###*/
+
+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; }
+
+/*### Wrapper > Article > code, pre ###*/
+
+/* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
+code, pre {
+  font-family: monospace;
+  font-size: 85%;
+}
+
+pre {
+  overflow: auto;
+  word-break: normal;
+  word-wrap: normal;
+}
+
+code {
+  background-color: var(--pre-bg-color);
+  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: 0.9em;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+table code {
+  font-size: 0.7em;
+  white-space: normal;
+}
+dd code { font-size: 0.8em; }
+
+.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 */
+
+/*### Wrapper > Article > table ###*/
+
+table {
+  border-collapse: collapse;
+  margin: 1em 0;
+  overflow: auto;
+}
+td, table th { word-break: normal !important; padding: 0.5em; }
+tr { background-color: var(--tr-bg-color); }
+th { border: 1px solid  var(--table-border-color); font-size: 1.1em; font-weight: bold; }
+td { border: 1px dashed var(--table-border-color); }
+td:empty { height: 1em; }
+
+/*## Wrapper > Scroll Button ##*/
+
+#scrollBtn {
+  font-size: 1.66rem;
+  padding: 0 0.15em;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+  transition-duration: 0.5s;
+  background-color: var(--bg-color);
+  display: none;
+  position: fixed;
+  border: 1px solid;
+}
+
+/*## Small screen support ##*/
+
+@media screen and ((max-width: 610px) or (max-height: 610px)) {
+  article { max-width: calc(100vw - 16px - 3px); margin-top: 8px; }
+  table td, table th { word-break: break-all; }
+
+  #about-image { max-width: 4.38em; }
+
+  #content-wrapper { border: none; flex-direction: column; }
+  #sidebar { max-width: initial; margin: 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; }
+  .language-terminal { color: var(--fg-color); background-color: var(--bg-color); }
+  .slide, .absolute-slide { transform: none !important; margin: 0; }
+}