1 files changed, 423 insertions, 0 deletions
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..66221a1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,423 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 100%;
+}
+
+:root {
+    --main-width: 42rem;
+    --gutter-width: 4rem;
+    --margin-width: 16rem;
+    --body-width: calc(var(--main-width) + 2 * (var(--gutter-width) + var(--margin-width)));
+}
+
+#meta-tags {
+  display: none;
+}
+
+/*
+
+    {{Note: width}}
+
+    According to CSS’ own specification, you cannot use 'var()' inside
+    media queries. As a consequnece, for our theme to be responsive,
+    the full width of the page content is
+
+       2 * (margin_width + gutter_width) + content_width = 82rem
+
+ */
+
+/* See {{Note: width}} */
+@media (max-width: 82rem) {
+    :root {
+        --body-width: var(--main-width);
+        --width: var(--main-width);
+    }
+}
+
+body {
+    font-family: Inter, Roboto, sans-serif;
+    line-height: 1.8;
+    max-width: var(--body-width);
+    text-align: justify;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    margin-left: auto;
+    margin-right: auto;
+    color: #0a0a0a;
+}
+
+main {
+    counter-reset: sidenote-counter;
+    max-width: var(--main-width);
+    margin: auto;
+}
+
+img {
+    max-width: 100%;
+}
+
+figure {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+figure, figcaption {
+    text-align: center;
+    margin-left:0;
+    margin-right:0;
+}
+
+figcaption p {
+    margin-top: 0;
+    margin-left: 0;
+}
+
+/* See {{Note: width}} */
+@media (min-width: 82rem) {
+    .fullwidth, figure {
+        /*margin-left: calc(-1 * (var(--margin-width) + var(--gutter-width)));*/
+    }
+
+    figure, figcaption, .fullwidth {
+        /*width: var(--body-width);*/
+    }
+
+
+    .sidenote.note-left {
+      padding-right: 1em;
+      border-right: 1px solid black;
+    }
+
+    .sidenote.note-right {
+      padding-left: 1em;
+      border-left: 1px solid black;
+    }
+
+    ul.tags-list {
+      columns: 2;
+    }
+}
+
+ul.tags-list {
+  list-style-type: none;
+}
+
+.sidenote,
+.marginblock {
+    font-size: smaller;
+    position: relative;
+    width: var(--margin-width);
+    margin-bottom: 1em;
+}
+
+.note-right {
+    margin-right: calc(-1 * (var(--margin-width) + var(--gutter-width)));
+    float: right;
+    clear: right;
+}
+
+.note-left {
+    float: left;
+    clear: left;
+    margin-left: calc(-1 * (var(--margin-width) + var(--gutter-width)));
+}
+
+.footnote-p:not(:first-child) {
+  display: block;
+  margin-top: .5em;
+}
+
+.footnote-p.narrow:not(:first-child) {
+  margin-top: .15em;
+}
+
+input.margin-toggle {
+    display: none;
+}
+
+label.sidenote-number {
+    display: inline;
+}
+
+label.margin-toggle:not(.sidenote-number) {
+    display: none;
+}
+
+.sidenote-number:after,
+.sidenote:before {
+    position: relative;
+    vertical-align: baseline;
+}
+
+.sidenote-number {
+    counter-increment: sidenote-counter;
+}
+
+.sidenote-number::after {
+    content: "(" counter(sidenote-counter) ")";
+    font-size: 60%;
+    top: -0.4rem;
+    left: 0.1rem;
+}
+
+.sidenote::before {
+    content: "(" counter(sidenote-counter) ")";
+    font-size: 70%;
+    top: -0.5rem;
+    right: 0.1rem;
+}
+
+/* See {{Note: width}} */
+@media (max-width: 82rem) {
+    body {
+        padding: 2rem;
+        margin: auto;
+        display: block;
+    }
+
+    aside {
+        width: var(--main-width);
+        margin: auto;
+    }
+
+    label.margin-toggle:not(.sidenote-number) {
+        display: inline;
+    }
+
+    .sidenote {
+        display: none;
+    }
+
+    .margin-toggle:checked + .sidenote,
+    .marginblock {
+        display: block;
+        float: left;
+        clear: both;
+        width: 95%;
+        margin: 1rem 2em;
+        vertical-align: baseline;
+        position: relative;
+    }
+
+    label {
+        cursor: pointer;
+    }
+
+    pre, aside, div.code {
+        width: 100%;
+    }
+
+    .marginblock {
+      text-align: center;
+      margin-top: 0;
+    }
+
+    .full-only {
+      display: none !important;
+    }
+
+    #whoami img {
+      max-width: 12em;
+    }
+}
+
+/*
+#whoami nav {
+}
+
+#whoami nav ul {
+    padding-left: 0rem;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+}
+
+#whoami nav ul li {
+  font-size: 1rem;
+}
+
+#whoami nav ul ul {
+  font-size: 0.95rem;
+}
+
+#whoami nav ul ul li {
+  font-size: 0.95rem;
+}
+
+#whoami nav ul a {
+  font-weight: normal;
+}
+*/
+
+nav#main-nav {
+    text-align: center;
+}
+
+nav#main-nav ul {
+    list-style: none;
+    padding: 1rem 0;
+    margin: 0;
+}
+
+nav#main-nav li {
+    display: inline;
+}
+
+nav#main-nav li:not(:first-of-type)::before {
+  width: 2rem;
+    content: " · ";
+}
+
+nav#main-nav a {
+  font-weight: normal;
+}
+
+main {
+    counter-reset: sidenote-counter;
+    max-width: var(--main-width);
+    margin: auto;
+}
+
+h1 {
+    text-align: center;
+    line-height: 1.3em
+}
+
+#tags-list {
+  text-align: center;
+  font-size: smaller;
+  padding-bottom: 1em;
+}
+
+h2, h3, h4 {
+    font-style: italic;
+    border-bottom: 1px solid black;
+    text-align: left;
+}
+
+h1, h2, h3, h4 {
+    color: black;
+    /*font-family: serif;*/
+    font-weight: normal;
+}
+
+pre {
+  border-radius: .1em;
+  border: 1px solid silver;
+}
+
+.icon svg {
+    display: inline-block;
+    width: 1em;
+    height: .9em;
+}
+
+a[href] {
+  text-decoration-line: underline;
+  text-decoration-color: black;
+  text-decoration-style: dashed;
+  text-underline-offset: .3em;
+  color: black;
+  /*font-weight: 500;*/
+}
+
+a[href]:hover {
+  text-decoration-color: black;
+}
+
+img.avatar {
+  border: 1px solid black;
+  border-radius: .5em;
+}
+
+main nav#series-nav {
+  padding: 1em 2em;
+  border: 1px solid #eee;
+  background: #fafafa;
+  border-radius: .2em;
+}
+main nav#series-nav .series-next {
+    text-align: right;
+}
+
+main nav#series-nav p.series-next::after {
+    content: " →";
+}
+
+main nav#series-nav p.series-prev::before {
+    content: "← ";
+}
+
+.index {
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+.index dt,
+.index li {
+  text-align: left;
+}
+
+.index dd {
+    margin-left: 0;
+    margin-bottom: 1rem;
+}
+
+.index dd:not(:empty) {
+    border-bottom: 1px solid #ddd;
+}
+
+.index p {
+    margin-top: 0;
+}
+
+/*  Dirty patching of the github highlight.js theme*/
+p code.hljs,
+dt code.hljs,
+li code.hljs {
+  padding: 0;
+}
+
+table {
+    border-top: 2px solid #555;
+    border-bottom: 2px solid #555;
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1.5rem 0;
+}
+
+th {
+    font-weight: normal;
+    text-transform: uppercase;
+}
+
+td,
+th {
+    border-top: 1px solid silver;
+    height: 2em;
+    padding: 0 1em;
+}
+
+.running-container {
+  text-align: center;
+}
+
+.running-container .kilometer {
+  width: 2em;
+  height: 2em;
+  margin: .2em;
+  display: inline-block;
+  border-radius: .5em;
+}
+
+.kilometer.race {
+  box-shadow: 0 0 2px 2px gold;
+}
+
+.running-container p {
+  text-align: justify;
+  font-size: smaller;
+}