Update theme

9 files changed, 813 insertions, 335 deletions

diff --git a/assets/css/custom.css b/assets/css/custom.css
deleted file mode 100644
index 9388906..0000000
--- a/assets/css/custom.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.no-prefix::before {
-    content: "";
-}
-
-.webring article {
-    border: 1px solid var(--color);
-    margin: 0.5rem 0;
-    padding: 0.5rem;
-}
-
-.webring article h3 {
-    margin-top: 0;
-    padding-top: 0;
-}
-
-pre, code {
-    font-family: monospace, monospace;
-}
-
-.homepage::after {
-    content: " 🏠";
-}
-
-.feed ol {
-    list-style-type: none;
-}
diff --git a/assets/css/custom.scss b/assets/css/custom.scss
deleted file mode 100644
index 3fd60cb..0000000
--- a/assets/css/custom.scss
+++ /dev/null
@@ -1,47 +0,0 @@
----
----
-
-body {
-  font-family: serif;
-}
-
-.post-content {
-  h1 {
-    font-size: 2rem;
-  }
-  h2 {
-    font-size: 1.5rem;
-  }
-}
-
-.webring {
-  max-width: 1000px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 1rem;
-  padding: 1rem;
-  .attribution {
-    float: right;
-    font-size: .8rem;
-    line-height: 3;
-  }
-
-  .footer-col.article {
-    padding: 0.5rem;
-
-    margin: 0 0.5rem;
-    border: 0.01rem solid #333;
-    @media(max-width: 640px) {
-      margin: 0.5rem 0;
-    }
-  }
-}
-
-dl {
-  dt {
-    font-weight: bold;
-  }
-  dd {
-    text-indent: 1em;
-  }
-}
diff --git a/assets/css/dark.css b/assets/css/dark.css
new file mode 100644
index 0000000..d1b6446
--- /dev/null
+++ b/assets/css/dark.css
@@ -0,0 +1,29 @@
+:root {
+    /* dark.css */ 
+    --font-color: #eee;
+    --bg-color: black;
+
+    --link-color: #2f2;
+    --link-state-color:#ff5858;
+    --link-state-border-color: rgba(238, 54, 54, 0.5);
+
+    --thead-bg-color: #343a40;
+    --table-border-color: lightgrey;
+
+    --nav-link-color: green;
+
+    --pre-color: #f1f1f1;
+    --pre-bg-color: #111111;
+
+    --bq-color: #ccc;
+    --hr-color: #333;
+
+    --post-info-color: lightgreen;
+
+    --visited-color: violet;
+    --visited-post-color: #999;
+    --inline-code-color: yellow;
+
+    --red: #FF6666;
+    --green: #66B266;
+}
diff --git a/assets/css/highdark.css b/assets/css/highdark.css
deleted file mode 100644
index b1108bb..0000000
--- a/assets/css/highdark.css
+++ /dev/null
@@ -1,174 +0,0 @@
-@media(prefers-color-scheme:dark) {
-    /* Background */ .bg { background-color: #ffffff; }
-    /* PreWrapper */ .chroma { background-color: #ffffff; }
-    /* Other */ .chroma .x {  }
-    /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa }
-    /* CodeLine */ .chroma .cl {  }
-    /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-    /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-    /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-    /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-    /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* Line */ .chroma .line { display: flex; }
-    /* Keyword */ .chroma .k { color: #008800; font-weight: bold }
-    /* KeywordConstant */ .chroma .kc { color: #008800; font-weight: bold }
-    /* KeywordDeclaration */ .chroma .kd { color: #008800; font-weight: bold }
-    /* KeywordNamespace */ .chroma .kn { color: #008800; font-weight: bold }
-    /* KeywordPseudo */ .chroma .kp { color: #003388; font-weight: bold }
-    /* KeywordReserved */ .chroma .kr { color: #008800; font-weight: bold }
-    /* KeywordType */ .chroma .kt { color: #333399; font-weight: bold }
-    /* Name */ .chroma .n {  }
-    /* NameAttribute */ .chroma .na { color: #0000cc }
-    /* NameBuiltin */ .chroma .nb { color: #007020 }
-    /* NameBuiltinPseudo */ .chroma .bp {  }
-    /* NameClass */ .chroma .nc { color: #bb0066; font-weight: bold }
-    /* NameConstant */ .chroma .no { color: #003366; font-weight: bold }
-    /* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
-    /* NameEntity */ .chroma .ni { color: #880000; font-weight: bold }
-    /* NameException */ .chroma .ne { color: #ff0000; font-weight: bold }
-    /* NameFunction */ .chroma .nf { color: #0066bb; font-weight: bold }
-    /* NameFunctionMagic */ .chroma .fm {  }
-    /* NameLabel */ .chroma .nl { color: #997700; font-weight: bold }
-    /* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
-    /* NameOther */ .chroma .nx {  }
-    /* NameProperty */ .chroma .py {  }
-    /* NameTag */ .chroma .nt { color: #007700 }
-    /* NameVariable */ .chroma .nv { color: #996633 }
-    /* NameVariableClass */ .chroma .vc { color: #336699 }
-    /* NameVariableGlobal */ .chroma .vg { color: #dd7700; font-weight: bold }
-    /* NameVariableInstance */ .chroma .vi { color: #3333bb }
-    /* NameVariableMagic */ .chroma .vm {  }
-    /* Literal */ .chroma .l {  }
-    /* LiteralDate */ .chroma .ld {  }
-    /* LiteralString */ .chroma .s { background-color: #111010 }
-    /* LiteralStringA11ix */ .chroma .sa { background-color: #111010 }
-    /* LiteralStringBacktick */ .chroma .sb { background-color: #111010 }
-    /* LiteralStringChar */ .chroma .sc { color: #0044dd; background-color: #111010 }
-    /* LiteralStringDelimiter */ .chroma .dl { background-color: #111010 }
-    /* LiteralStringDoc */ .chroma .sd { color: #dd4422; background-color: #111010 }
-    /* LiteralStringDouble */ .chroma .s2 { background-color: #111010 }
-    /* LiteralStringEscape */ .chroma .se { color: #666666; background-color: #111010; font-weight: bold }
-    /* LiteralStringHeredoc */ .chroma .sh { background-color: #111010 }
-    /* LiteralStringInterpol */ .chroma .si { background-color: #eeeeee }
-    /* LiteralStringOther */ .chroma .sx { color: #dd2200; background-color: #111010 }
-    /* LiteralStringRegex */ .chroma .sr { color: #000000; background-color: #111011 }
-    /* LiteralStringSingle */ .chroma .s1 { background-color: #111010 }
-    /* LiteralStringSymbol */ .chroma .ss { color: #aa6600; background-color: #111010 }
-    /* LiteralNumber */ .chroma .m { color: #6600ee; font-weight: bold }
-    /* LiteralNumberBin */ .chroma .mb { color: #6600ee; font-weight: bold }
-    /* LiteralNumberFloat */ .chroma .mf { color: #6600ee; font-weight: bold }
-    /* LiteralNumberHex */ .chroma .mh { color: #005588; font-weight: bold }
-    /* LiteralNumberInteger */ .chroma .mi { color: #0000dd; font-weight: bold }
-    /* LiteralNumberIntegerLong */ .chroma .il { color: #6600ee; font-weight: bold }
-    /* LiteralNumberOct */ .chroma .mo { color: #4400ee; font-weight: bold }
-    /* Operator */ .chroma .o { color: #333333 }
-    /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
-    /* Punctuation */ .chroma .p {  }
-    /* Comment */ .chroma .c { color: #888888 }
-    /* CommentHashbang */ .chroma .ch { color: #888888 }
-    /* CommentMultiline */ .chroma .cm { color: #888888 }
-    /* CommentSingle */ .chroma .c1 { color: #888888 }
-    /* CommentSpecial */ .chroma .cs { color: #cc0000; font-weight: bold }
-    /* CommentPreproc */ .chroma .cp { color: #557799 }
-    /* CommentPreprocFile */ .chroma .cpf { color: #557799 }
-    /* Generic */ .chroma .g {  }
-    /* GenericDeleted */ .chroma .gd { color: #a00000 }
-    /* GenericEmph */ .chroma .ge { font-style: italic }
-    /* GenericError */ .chroma .gr { color: #ff0000 }
-    /* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
-    /* GenericInserted */ .chroma .gi { color: #00a000 }
-    /* GenericOutput */ .chroma .go { color: #888888 }
-    /* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
-    /* GenericStrong */ .chroma .gs { font-weight: bold }
-    /* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
-    /* GenericTraceback */ .chroma .gt { color: #0044dd }
-    /* GenericUnderline */ .chroma .gl { text-decoration: underline }
-    /* TextWhitespace */ .chroma .w { color: #bbbbbb }
-    /* Background */ .bg { color: #d0d0d0; background-color: #202020; }
-    /* PreWrapper */ .chroma { color: #d0d0d0; background-color: #202020; }
-    /* Other */ .chroma .x {  }
-    /* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
-    /* CodeLine */ .chroma .cl {  }
-    /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-    /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-    /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-    /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-    /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
-    /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #686868 }
-    /* Line */ .chroma .line { display: flex; }
-    /* Keyword */ .chroma .k { color: #6ab825; font-weight: bold }
-    /* KeywordConstant */ .chroma .kc { color: #6ab825; font-weight: bold }
-    /* KeywordDeclaration */ .chroma .kd { color: #6ab825; font-weight: bold }
-    /* KeywordNamespace */ .chroma .kn { color: #6ab825; font-weight: bold }
-    /* KeywordPseudo */ .chroma .kp { color: #6ab825 }
-    /* KeywordReserved */ .chroma .kr { color: #6ab825; font-weight: bold }
-    /* KeywordType */ .chroma .kt { color: #6ab825; font-weight: bold }
-    /* Name */ .chroma .n {  }
-    /* NameAttribute */ .chroma .na { color: #bbbbbb }
-    /* NameBuiltin */ .chroma .nb { color: #24909d }
-    /* NameBuiltinPseudo */ .chroma .bp {  }
-    /* NameClass */ .chroma .nc { color: #558fdf; text-decoration: underline }
-    /* NameConstant */ .chroma .no { color: #40ffff }
-    /* NameDecorator */ .chroma .nd { color: #ffa500 }
-    /* NameEntity */ .chroma .ni {  }
-    /* NameException */ .chroma .ne { color: #bbbbbb }
-    /* NameFunction */ .chroma .nf { color: #447fcf }
-    /* NameFunctionMagic */ .chroma .fm {  }
-    /* NameLabel */ .chroma .nl {  }
-    /* NameNamespace */ .chroma .nn { color: #447fcf; text-decoration: underline }
-    /* NameOther */ .chroma .nx {  }
-    /* NameProperty */ .chroma .py {  }
-    /* NameTag */ .chroma .nt { color: #6ab825; font-weight: bold }
-    /* NameVariable */ .chroma .nv { color: #40ffff }
-    /* NameVariableClass */ .chroma .vc {  }
-    /* NameVariableGlobal */ .chroma .vg {  }
-    /* NameVariableInstance */ .chroma .vi {  }
-    /* NameVariableMagic */ .chroma .vm {  }
-    /* Literal */ .chroma .l {  }
-    /* LiteralDate */ .chroma .ld {  }
-    /* LiteralString */ .chroma .s { color: #ed9d13 }
-    /* LiteralStringAffix */ .chroma .sa { color: #ed9d13 }
-    /* LiteralStringBacktick */ .chroma .sb { color: #ed9d13 }
-    /* LiteralStringChar */ .chroma .sc { color: #ed9d13 }
-    /* LiteralStringDelimiter */ .chroma .dl { color: #ed9d13 }
-    /* LiteralStringDoc */ .chroma .sd { color: #ed9d13 }
-    /* LiteralStringDouble */ .chroma .s2 { color: #ed9d13 }
-    /* LiteralStringEscape */ .chroma .se { color: #ed9d13 }
-    /* LiteralStringHeredoc */ .chroma .sh { color: #ed9d13 }
-    /* LiteralStringInterpol */ .chroma .si { color: #ed9d13 }
-    /* LiteralStringOther */ .chroma .sx { color: #ffa500 }
-    /* LiteralStringRegex */ .chroma .sr { color: #ed9d13 }
-    /* LiteralStringSingle */ .chroma .s1 { color: #ed9d13 }
-    /* LiteralStringSymbol */ .chroma .ss { color: #ed9d13 }
-    /* LiteralNumber */ .chroma .m { color: #3677a9 }
-    /* LiteralNumberBin */ .chroma .mb { color: #3677a9 }
-    /* LiteralNumberFloat */ .chroma .mf { color: #3677a9 }
-    /* LiteralNumberHex */ .chroma .mh { color: #3677a9 }
-    /* LiteralNumberInteger */ .chroma .mi { color: #3677a9 }
-    /* LiteralNumberIntegerLong */ .chroma .il { color: #3677a9 }
-    /* LiteralNumberOct */ .chroma .mo { color: #3677a9 }
-    /* Operator */ .chroma .o { color: #fa8a8a }
-    /* OperatorWord */ .chroma .ow { color: #6ab825; font-weight: bold }
-    /* Punctuation */ .chroma .p {  }
-    /* Comment */ .chroma .c { color: #999999; font-style: italic }
-    /* CommentHashbang */ .chroma .ch { color: #999999; font-style: italic }
-    /* CommentMultiline */ .chroma .cm { color: #999999; font-style: italic }
-    /* CommentSingle */ .chroma .c1 { color: #999999; font-style: italic }
-    /* CommentSpecial */ .chroma .cs { color: #e50808; background-color: #520000; font-weight: bold }
-    /* CommentPreproc */ .chroma .cp { color: #cd2828; font-weight: bold }
-    /* CommentPreprocFile */ .chroma .cpf { color: #cd2828; font-weight: bold }
-    /* Generic */ .chroma .g {  }
-    /* GenericDeleted */ .chroma .gd { color: #d22323 }
-    /* GenericEmph */ .chroma .ge { font-style: italic }
-    /* GenericError */ .chroma .gr { color: #d22323 }
-    /* GenericHeading */ .chroma .gh { color: #ffffff; font-weight: bold }
-    /* GenericInserted */ .chroma .gi { color: #589819 }
-    /* GenericOutput */ .chroma .go { color: #cccccc }
-    /* GenericPrompt */ .chroma .gp { color: #aaaaaa }
-    /* GenericStrong */ .chroma .gs { font-weight: bold }
-    /* GenericSubheading */ .chroma .gu { color: #ffffff; text-decoration: underline }
-    /* GenericTraceback */ .chroma .gt { color: #d22323 }
-    /* GenericUnderline */ .chroma .gl { text-decoration: underline }
-    /* TextWhitespace */ .chroma .w { color: #666666 }
-}
diff --git a/assets/css/highlight.css b/assets/css/highlight.css
deleted file mode 100644
index 79bea26..0000000
--- a/assets/css/highlight.css
+++ /dev/null
@@ -1,88 +0,0 @@
-@media(prefers-color-scheme:light) {
-    /* Background */ .bg { background-color: #ffffff; }
-    /* PreWrapper */ .chroma { background-color: #ffffff; }
-    /* Other */ .chroma .x {  }
-    /* Error */ .chroma .err { color: #ff0000; background-color: #ffaaaa }
-    /* CodeLine */ .chroma .cl {  }
-    /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-    /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-    /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-    /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
-    /* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-    /* Line */ .chroma .line { display: flex; }
-    /* Keyword */ .chroma .k { color: #008800; font-weight: bold }
-    /* KeywordConstant */ .chroma .kc { color: #008800; font-weight: bold }
-    /* KeywordDeclaration */ .chroma .kd { color: #008800; font-weight: bold }
-    /* KeywordNamespace */ .chroma .kn { color: #008800; font-weight: bold }
-    /* KeywordPseudo */ .chroma .kp { color: #003388; font-weight: bold }
-    /* KeywordReserved */ .chroma .kr { color: #008800; font-weight: bold }
-    /* KeywordType */ .chroma .kt { color: #333399; font-weight: bold }
-    /* Name */ .chroma .n {  }
-    /* NameAttribute */ .chroma .na { color: #0000cc }
-    /* NameBuiltin */ .chroma .nb { color: #007020 }
-    /* NameBuiltinPseudo */ .chroma .bp {  }
-    /* NameClass */ .chroma .nc { color: #bb0066; font-weight: bold }
-    /* NameConstant */ .chroma .no { color: #003366; font-weight: bold }
-    /* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
-    /* NameEntity */ .chroma .ni { color: #880000; font-weight: bold }
-    /* NameException */ .chroma .ne { color: #ff0000; font-weight: bold }
-    /* NameFunction */ .chroma .nf { color: #0066bb; font-weight: bold }
-    /* NameFunctionMagic */ .chroma .fm {  }
-    /* NameLabel */ .chroma .nl { color: #997700; font-weight: bold }
-    /* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
-    /* NameOther */ .chroma .nx {  }
-    /* NameProperty */ .chroma .py {  }
-    /* NameTag */ .chroma .nt { color: #007700 }
-    /* NameVariable */ .chroma .nv { color: #996633 }
-    /* NameVariableClass */ .chroma .vc { color: #336699 }
-    /* NameVariableGlobal */ .chroma .vg { color: #dd7700; font-weight: bold }
-    /* NameVariableInstance */ .chroma .vi { color: #3333bb }
-    /* NameVariableMagic */ .chroma .vm {  }
-    /* Literal */ .chroma .l {  }
-    /* LiteralDate */ .chroma .ld {  }
-    /* LiteralString */ .chroma .s { background-color: #fff0f0 }
-    /* LiteralStringAffix */ .chroma .sa { background-color: #fff0f0 }
-    /* LiteralStringBacktick */ .chroma .sb { background-color: #fff0f0 }
-    /* LiteralStringChar */ .chroma .sc { color: #0044dd; background-color: #fff0f0 }
-    /* LiteralStringDelimiter */ .chroma .dl { background-color: #fff0f0 }
-    /* LiteralStringDoc */ .chroma .sd { color: #dd4422; background-color: #fff0f0 }
-    /* LiteralStringDouble */ .chroma .s2 { background-color: #fff0f0 }
-    /* LiteralStringEscape */ .chroma .se { color: #666666; background-color: #fff0f0; font-weight: bold }
-    /* LiteralStringHeredoc */ .chroma .sh { background-color: #fff0f0 }
-    /* LiteralStringInterpol */ .chroma .si { background-color: #eeeeee }
-    /* LiteralStringOther */ .chroma .sx { color: #dd2200; background-color: #fff0f0 }
-    /* LiteralStringRegex */ .chroma .sr { color: #000000; background-color: #fff0ff }
-    /* LiteralStringSingle */ .chroma .s1 { background-color: #fff0f0 }
-    /* LiteralStringSymbol */ .chroma .ss { color: #774400; background-color: #fff0f0 }
-    /* LiteralNumber */ .chroma .m { color: #6600ee; font-weight: bold }
-    /* LiteralNumberBin */ .chroma .mb { color: #6600ee; font-weight: bold }
-    /* LiteralNumberFloat */ .chroma .mf { color: #6600ee; font-weight: bold }
-    /* LiteralNumberHex */ .chroma .mh { color: #005588; font-weight: bold }
-    /* LiteralNumberInteger */ .chroma .mi { color: #0000dd; font-weight: bold }
-    /* LiteralNumberIntegerLong */ .chroma .il { color: #6600ee; font-weight: bold }
-    /* LiteralNumberOct */ .chroma .mo { color: #4400ee; font-weight: bold }
-    /* Operator */ .chroma .o { color: #333333 }
-    /* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
-    /* Punctuation */ .chroma .p {  }
-    /* Comment */ .chroma .c { color: #666666; font-style: italic; }
-    /* CommentHashbang */ .chroma .ch { color: #666666; font-style: italic; }
-    /* CommentMultiline */ .chroma .cm { color: #666666; font-style: italic; }
-    /* CommentSingle */ .chroma .c1 { color: #666666; font-style: italic; }
-    /* CommentSpecial */ .chroma .cs { color: #cc0000; font-style: italic; font-weight: bold }
-    /* CommentPreproc */ .chroma .cp { color: #557799; font-style: italic; }
-    /* CommentPreprocFile */ .chroma .cpf { color: #557799; font-style: italic; }
-    /* Generic */ .chroma .g {  }
-    /* GenericDeleted */ .chroma .gd { color: #a00000 }
-    /* GenericEmph */ .chroma .ge { font-style: italic }
-    /* GenericError */ .chroma .gr { color: #ff0000 }
-    /* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
-    /* GenericInserted */ .chroma .gi { color: #00a000 }
-    /* GenericOutput */ .chroma .go { color: #888888 }
-    /* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
-    /* GenericStrong */ .chroma .gs { font-weight: bold }
-    /* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
-    /* GenericTraceback */ .chroma .gt { color: #0044dd }
-    /* GenericUnderline */ .chroma .gl { text-decoration: underline }
-    /* TextWhitespace */ .chroma .w { color: #bbbbbb }
-}
diff --git a/assets/css/light.css b/assets/css/light.css
new file mode 100644
index 0000000..b234ae7
--- /dev/null
+++ b/assets/css/light.css
@@ -0,0 +1,37 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        /* light.css */ 
+        --font-color: #333;
+        --bg-color: #fff;
+
+        --link-color:#1d60a3;
+        --link-state-color:#a31d1d;
+        --link-state-border-color: rgba(163, 29, 29, .5);
+
+        --thead-bg-color: lightgrey;
+        --table-border-color: lightgrey;
+
+        --nav-link-color: #696969;
+
+        --pre-color: #333;
+        --pre-bg-color: #f1f1f1;
+
+        --bq-color: #ccc;
+        --hr-color: #ccc;
+
+        --pagination-bg-color: #fafafa;
+        --pagination-link-color: #696969;
+
+        --post-info-color: navy;
+
+        --switcher-color: #fff;
+        --switcher-bg-color: #333; 
+
+        --visited-color: purple;
+        --visited-post-color: #666;
+        --inline-code-color: blue;
+
+        --red: red;
+        --green: green;
+    }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..55167ef
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,575 @@
+/* Basic */
+html {
+    /* 1 */
+    -ms-text-size-adjust: 100%;
+    /* 2 */
+    -webkit-text-size-adjust: 100%;
+    /* 2 */
+}
+
+.container {
+    margin: 1rem;
+}
+
+.sr-only {
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  margin: -1px;
+}
+
+body {
+    margin: 0;
+    font-size: 1.2em;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    color: var(--font-color);
+    background: var(--bg-color);
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+
+/* Links */
+
+a {
+    color: var(--link-color);
+}
+
+a:hover,
+a:focus,
+a:active {
+    color: var(--link-state-color);
+    text-decoration-style: dashed;
+}
+
+a:active,
+a:hover {
+    outline: 1px;
+}
+
+a:active {
+    opacity: 0.9;
+}
+a:visited {
+    color: var(--visited-color);
+}
+footer a:visited, nav a:visited:not(.site-title) {
+    color: var(--link-color);
+}
+
+a.skip-main {
+    left:-999px;
+    position:absolute;
+    top:auto;
+    width:1px;
+    height:1px;
+    overflow:hidden;
+    z-index:-999;
+}
+
+a.skip-main:focus, 
+a.skip-main:active {
+    left: auto;
+    top: 0px;
+    width: auto;
+    height: auto;
+    overflow:auto;
+    z-index:999;
+    padding: 4px 6px 4px 6px;
+}
+
+/* Table */
+thead {
+    background: var(--thead-bg-color);
+}
+
+table {
+    display: block;
+    max-width: 100%;
+    border-collapse: collapse;
+    overflow: auto;
+}
+
+
+th, td {
+    padding: 0.5em 1em;
+    border: 1px double var(--table-border-color);
+}
+
+/* Code */
+pre {
+    padding: 1em;
+    max-width: 100%;
+    overflow: auto;
+    border: 1px dashed red;
+    color: var(--pre-color);
+    background-color: var(--pre-bg-color);
+}
+
+code,
+pre {
+    font-family: monospace, monospace;
+    font-size: 1rem;
+}
+
+kbd {
+    border: 1px solid var(--font-color);
+    border-bottom: 2px solid var(--font-color);
+    border-radius: 5px;
+    padding: 0.1rem;
+}
+
+p code {
+    color: var(--inline-code-color);
+}
+
+/* Styles */
+
+blockquote {
+    border-left: 2px solid var(--bq-color);
+    padding: 0.1em 1em;
+    margin-left: 0.75em;
+}
+
+p {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+hr {
+    color: var(--hr-color);
+    background-color: var(--hr-color);
+    border: none;
+    height: 1px;
+    border-bottom: thin solid var(--hr-color);
+}
+
+/* Header */
+
+.common-header {
+    marg
+}
+
+header {
+    margin-top: 1em;
+}
+
+header .site-title {
+    color: var(--font-color);
+    font-size: 1em;
+    margin-bottom: 0;
+    font-weight: normal;
+}
+
+header nav:not(:empty){
+    margin-top: 1em;
+    max-width: 100%;
+    padding: 0.5em 0;
+}
+
+header nav a {
+    display: inline-block;
+    margin: 0 1rem;
+}
+
+/* Social icons */
+table.social-icons {
+    float: right
+}
+table.social-icons th {
+    text-align: right;
+}
+table.social-icons th, td {
+    border: none;
+    padding: 0.5rem;
+}
+
+.inline-svg {
+    display: inline-block;
+    height: 1.15rem;
+    width: 1.15rem;
+    top: 0.15rem;
+    position: relative;
+}
+
+/* Pages */
+main h1 {
+    margin-top: 1em;
+    font-weight: normal;
+    line-height: 1.1em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+}
+
+/* Articles */
+
+a:hover, a:focus, a:active {
+    color: var(--link-state-color);
+}
+
+.post-title.draft::after {
+    content: "✎";
+    display: inline-block;
+    margin-left: 0.2em;
+}
+
+article.embedded {
+    border: 1px dashed red;
+    padding: 1rem;
+}
+
+article:not(:last-of-type) {
+    padding-bottom: 2em;
+}
+header h1, header .post-translations {
+    margin-left: 2.5rem;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
+h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited{
+    color: var(--font-color);
+}
+
+.post-info {
+    color: var(--post-info-color);
+    font-size: 0.75em;
+    margin-top: 1em;
+}
+
+.post-info a {
+    color: var(--post-info-color);
+}
+
+.post-info a:hover {
+    color: var(--link-state-color);
+}
+
+.post-taxonomies {
+    display: inline;
+}
+
+.post-categories {
+    display: inline;
+    list-style-type: none;
+    padding: 0;
+}
+
+.post-categories li {
+    display: inline;
+    margin-left: 1em;
+}
+
+.post-tags {
+    display: inline;
+    list-style-type: none;
+    padding: 0;
+}
+
+.post-tags li {
+    display: inline;
+    margin-left: 1em;
+}
+
+article img {
+    max-width: 100%;
+    display: block;
+    height: auto;
+    margin: 0 auto .5em;
+}
+
+article figcaption {
+    color: grey;
+    text-align: center;
+    font-size: 0.85em;
+    margin-bottom: 2em;
+}
+
+.read-more {
+    margin: 1em 0;
+}
+
+.post-translations {
+    margin-left: 0.5em;
+    list-style: none;
+    padding: 0;
+    display: inline;
+    font-size: 14px;
+}
+
+.post-translations > li {
+    display: inline;
+}
+
+.post-translations > li:not(:last-child)::after {
+    content: "|";
+    display: inline-block;
+}
+
+.post-translations > li a {
+    color: var(--link-color);
+}
+
+.post-translations > li a:hover, 
+.post-translations > li a:focus {
+    color: var(--link-state-color);
+}
+
+/* Other pages */
+.terms {
+    list-style-type: none;
+    padding: 0;
+    line-height: 2em;
+}
+
+/* Footer */
+
+#footer {
+    max-width: 80rem;
+    margin: 0 auto;
+    border-top: thin solid var(--hr-color);
+    padding-top: 1.5em;
+    margin-top: 3em;
+}
+
+.common-footer-bottom {
+    align-items: center;
+    justify-content: space-between;
+}
+
+ul.language-select, ul.footer-menu {
+    padding-left: 0;
+    list-style: none;
+    display: flex;
+}
+
+ul.language-select > li, ul.footer-menu > li {
+    margin-right: 1em;
+}
+
+/* Media Queries */
+
+@media screen, print {
+    h2 .decorative::before {
+        content: '# ';
+    }
+
+    h3 .decorative::before {
+        content: '## ';
+    }
+
+    h4 .decorative::before {
+        content: '### ';
+    }
+    .decorative::before {
+        color: gray;
+    }
+}
+
+@media speech {
+    .decorative::before {
+        display: none;
+    }
+}
+
+@media print {
+    aside, .language-select, .post-translations {
+        display: None;
+    }
+    article .content a:not(.heading-anchor):visited, article header a:visited {
+        color: var(--link-color);
+    }
+    .webring {
+        display: none;
+    }
+}
+@media (min-width: 780px) {
+
+    #toc {
+        position: sticky;
+        top: 10px;
+    }
+    .container {
+        display: grid;
+        grid-template-columns: 1fr 4fr 1fr;
+        grid-gap: 2rem;
+    }
+    .common-footer-bottom {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 500px) {
+    table.social-icons .inline-svg {
+        display: none;
+    }
+}
+
+@media (max-width: 840px) {
+    .main-wrapper {
+        margin: 0;
+        max-width: none;
+        overflow-x: hidden;
+        padding-left: 25px;
+        padding-right: 25px;
+    }
+
+    .post-navigation {
+        text-align: center;
+        padding: 0.5em 0;
+    }
+
+    .post-navigation a {
+        margin-left: 0.5em;
+    }
+}
+
+/* Webring---doesn't make sense if you don't use openring */
+
+.webring {
+  margin-top: 2rem;
+}
+
+.webring h2 {
+  font-size: 1.2rem;
+}
+
+.webring .articles {
+  width: 95%;
+}
+
+.webring .title {
+  margin: 0;
+}
+
+.webring .article {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #333;
+  margin: 0.5rem 0;
+}
+
+@media (max-width: 640px) {
+  .webring .article {
+    margin: 0.5rem 0;
+  }
+}
+
+.webring .article:first-child {
+  margin-left: 0;
+}
+
+.webring .article:last-child {
+  margin-right: 0;
+}
+
+.webring .summary {
+  font-size: 1rem;
+  flex: 1 1 0;
+}
+
+.webring .attribution {
+  float: right;
+  font-size: 0.8rem;
+  color: #555;
+  line-height: 3;
+}
+
+dl dt {
+  font-weight: bold;
+}
+dl dd {
+  text-indent: 1em;
+}
+
+/* Book data format */
+
+dl.data {
+  border: 3px double #ccc;
+  padding: 0.5em;
+}
+dl.data dt {
+  float: left;
+  clear: left;
+  max-width: 40%;
+  text-align: right;
+  font-weight: bold;
+}
+dl.data dd {
+  margin: 0 0 0 110px;
+  padding: 0 0 0.5em 0;
+}
+
+.text-red {
+  color: var(--red);
+}
+
+.text-green {
+  color: var(--green);
+}
+
+details {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  padding: .5em .5em 0;
+}
+
+summary {
+  font-weight: bold;
+  margin: -.5em -.5em 0;
+  padding: .5em;
+}
+
+details[open] {
+  padding: .5em;
+}
+
+details[open] summary {
+  border-bottom: 1px solid #aaa;
+  margin-bottom: .5em;
+}
+
+a.site-title::before {
+  content: "[";
+}
+
+a.site-title::after {
+  content: "]";
+}
+
+a.prev-link::before {
+  content: "← ";
+}
+
+a.next-link.float {
+  float: right;
+}
+
+a.random-link::before {
+    content: "🎲 ";
+}
+
+a.next-link::after {
+  content: " →";
+}
diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css
new file mode 100644
index 0000000..d172503
--- /dev/null
+++ b/assets/css/syntax-dark.css
@@ -0,0 +1,85 @@
+/* Background */ .bg { color: #ffffff; background-color: #1f1f24; }
+/* PreWrapper */ .chroma { color: #ffffff; background-color: #1f1f24; }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #960050 }
+/* CodeLine */ .chroma .cl {  }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #fc5fa3 }
+/* KeywordConstant */ .chroma .kc { color: #fc5fa3 }
+/* KeywordDeclaration */ .chroma .kd { color: #fc5fa3 }
+/* KeywordNamespace */ .chroma .kn { color: #fc5fa3 }
+/* KeywordPseudo */ .chroma .kp { color: #fc5fa3 }
+/* KeywordReserved */ .chroma .kr { color: #fc5fa3 }
+/* KeywordType */ .chroma .kt { color: #fc5fa3 }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na {  }
+/* NameBuiltin */ .chroma .nb { color: #d0a8ff }
+/* NameBuiltinPseudo */ .chroma .bp { color: #a167e6 }
+/* NameClass */ .chroma .nc { color: #5dd8ff }
+/* NameConstant */ .chroma .no {  }
+/* NameDecorator */ .chroma .nd {  }
+/* NameEntity */ .chroma .ni {  }
+/* NameException */ .chroma .ne {  }
+/* NameFunction */ .chroma .nf { color: #41a1c0 }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl {  }
+/* NameNamespace */ .chroma .nn {  }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt {  }
+/* NameVariable */ .chroma .nv { color: #41a1c0 }
+/* NameVariableClass */ .chroma .vc {  }
+/* NameVariableGlobal */ .chroma .vg {  }
+/* NameVariableInstance */ .chroma .vi {  }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #fc6a5d }
+/* LiteralStringAffix */ .chroma .sa { color: #fc6a5d }
+/* LiteralStringBacktick */ .chroma .sb { color: #fc6a5d }
+/* LiteralStringChar */ .chroma .sc { color: #fc6a5d }
+/* LiteralStringDelimiter */ .chroma .dl { color: #fc6a5d }
+/* LiteralStringDoc */ .chroma .sd { color: #fc6a5d }
+/* LiteralStringDouble */ .chroma .s2 { color: #fc6a5d }
+/* LiteralStringEscape */ .chroma .se { color: #fc6a5d }
+/* LiteralStringHeredoc */ .chroma .sh { color: #fc6a5d }
+/* LiteralStringInterpol */ .chroma .si {  }
+/* LiteralStringOther */ .chroma .sx { color: #fc6a5d }
+/* LiteralStringRegex */ .chroma .sr { color: #fc6a5d }
+/* LiteralStringSingle */ .chroma .s1 { color: #fc6a5d }
+/* LiteralStringSymbol */ .chroma .ss { color: #fc6a5d }
+/* LiteralNumber */ .chroma .m { color: #d0bf69 }
+/* LiteralNumberBin */ .chroma .mb { color: #d0bf69 }
+/* LiteralNumberFloat */ .chroma .mf { color: #d0bf69 }
+/* LiteralNumberHex */ .chroma .mh { color: #d0bf69 }
+/* LiteralNumberInteger */ .chroma .mi { color: #d0bf69 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #d0bf69 }
+/* LiteralNumberOct */ .chroma .mo { color: #d0bf69 }
+/* Operator */ .chroma .o {  }
+/* OperatorWord */ .chroma .ow {  }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #6c7986 }
+/* CommentHashbang */ .chroma .ch { color: #6c7986 }
+/* CommentMultiline */ .chroma .cm { color: #6c7986 }
+/* CommentSingle */ .chroma .c1 { color: #6c7986 }
+/* CommentSpecial */ .chroma .cs { color: #6c7986; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #fd8f3f }
+/* CommentPreprocFile */ .chroma .cpf { color: #fd8f3f }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd {  }
+/* GenericEmph */ .chroma .ge {  }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh {  }
+/* GenericInserted */ .chroma .gi {  }
+/* GenericOutput */ .chroma .go {  }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs {  }
+/* GenericSubheading */ .chroma .gu {  }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl {  }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css
new file mode 100644
index 0000000..3e3c47c
--- /dev/null
+++ b/assets/css/syntax-light.css
@@ -0,0 +1,87 @@
+@media (prefers-color-scheme: light) {
+    /* Background */ .bg { background-color: #ffffff; }
+    /* PreWrapper */ .chroma { background-color: #ffffff; }
+    /* Other */ .chroma .x {  }
+    /* Error */ .chroma .err { color: #000000 }
+    /* CodeLine */ .chroma .cl {  }
+    /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+    /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
+    /* LineHighlight */ .chroma .hl { background-color: #ffffcc }
+    /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+    /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+    /* Line */ .chroma .line { display: flex; }
+    /* Keyword */ .chroma .k { color: #a90d91 }
+    /* KeywordConstant */ .chroma .kc { color: #a90d91 }
+    /* KeywordDeclaration */ .chroma .kd { color: #a90d91 }
+    /* KeywordNamespace */ .chroma .kn { color: #a90d91 }
+    /* KeywordPseudo */ .chroma .kp { color: #a90d91 }
+    /* KeywordReserved */ .chroma .kr { color: #a90d91 }
+    /* KeywordType */ .chroma .kt { color: #a90d91 }
+    /* Name */ .chroma .n { color: #000000 }
+    /* NameAttribute */ .chroma .na { color: #836c28 }
+    /* NameBuiltin */ .chroma .nb { color: #a90d91 }
+    /* NameBuiltinPseudo */ .chroma .bp { color: #5b269a }
+    /* NameClass */ .chroma .nc { color: #3f6e75 }
+    /* NameConstant */ .chroma .no { color: #000000 }
+    /* NameDecorator */ .chroma .nd { color: #000000 }
+    /* NameEntity */ .chroma .ni { color: #000000 }
+    /* NameException */ .chroma .ne { color: #000000 }
+    /* NameFunction */ .chroma .nf { color: #000000 }
+    /* NameFunctionMagic */ .chroma .fm { color: #000000 }
+    /* NameLabel */ .chroma .nl { color: #000000 }
+    /* NameNamespace */ .chroma .nn { color: #000000 }
+    /* NameOther */ .chroma .nx { color: #000000 }
+    /* NameProperty */ .chroma .py { color: #000000 }
+    /* NameTag */ .chroma .nt { color: #000000 }
+    /* NameVariable */ .chroma .nv { color: #000000 }
+    /* NameVariableClass */ .chroma .vc { color: #000000 }
+    /* NameVariableGlobal */ .chroma .vg { color: #000000 }
+    /* NameVariableInstance */ .chroma .vi { color: #000000 }
+    /* NameVariableMagic */ .chroma .vm { color: #000000 }
+    /* Literal */ .chroma .l { color: #1c01ce }
+    /* LiteralDate */ .chroma .ld { color: #1c01ce }
+    /* LiteralString */ .chroma .s { color: #c41a16 }
+    /* LiteralStringAffix */ .chroma .sa { color: #c41a16 }
+    /* LiteralStringBacktick */ .chroma .sb { color: #c41a16 }
+    /* LiteralStringChar */ .chroma .sc { color: #2300ce }
+    /* LiteralStringDelimiter */ .chroma .dl { color: #c41a16 }
+    /* LiteralStringDoc */ .chroma .sd { color: #c41a16 }
+    /* LiteralStringDouble */ .chroma .s2 { color: #c41a16 }
+    /* LiteralStringEscape */ .chroma .se { color: #c41a16 }
+    /* LiteralStringHeredoc */ .chroma .sh { color: #c41a16 }
+    /* LiteralStringInterpol */ .chroma .si { color: #c41a16 }
+    /* LiteralStringOther */ .chroma .sx { color: #c41a16 }
+    /* LiteralStringRegex */ .chroma .sr { color: #c41a16 }
+    /* LiteralStringSingle */ .chroma .s1 { color: #c41a16 }
+    /* LiteralStringSymbol */ .chroma .ss { color: #c41a16 }
+    /* LiteralNumber */ .chroma .m { color: #1c01ce }
+    /* LiteralNumberBin */ .chroma .mb { color: #1c01ce }
+    /* LiteralNumberFloat */ .chroma .mf { color: #1c01ce }
+    /* LiteralNumberHex */ .chroma .mh { color: #1c01ce }
+    /* LiteralNumberInteger */ .chroma .mi { color: #1c01ce }
+    /* LiteralNumberIntegerLong */ .chroma .il { color: #1c01ce }
+    /* LiteralNumberOct */ .chroma .mo { color: #1c01ce }
+    /* Operator */ .chroma .o { color: #000000 }
+    /* OperatorWord */ .chroma .ow { color: #000000 }
+    /* Punctuation */ .chroma .p {  }
+    /* Comment */ .chroma .c { color: #177500 }
+    /* CommentHashbang */ .chroma .ch { color: #177500 }
+    /* CommentMultiline */ .chroma .cm { color: #177500 }
+    /* CommentSingle */ .chroma .c1 { color: #177500 }
+    /* CommentSpecial */ .chroma .cs { color: #177500 }
+    /* CommentPreproc */ .chroma .cp { color: #633820 }
+    /* CommentPreprocFile */ .chroma .cpf { color: #633820 }
+    /* Generic */ .chroma .g {  }
+    /* GenericDeleted */ .chroma .gd {  }
+    /* GenericEmph */ .chroma .ge {  }
+    /* GenericError */ .chroma .gr {  }
+    /* GenericHeading */ .chroma .gh {  }
+    /* GenericInserted */ .chroma .gi {  }
+    /* GenericOutput */ .chroma .go {  }
+    /* GenericPrompt */ .chroma .gp {  }
+    /* GenericStrong */ .chroma .gs {  }
+    /* GenericSubheading */ .chroma .gu {  }
+    /* GenericTraceback */ .chroma .gt {  }
+    /* GenericUnderline */ .chroma .gl {  }
+    /* TextWhitespace */ .chroma .w {  }
+}