Summary Files Commits Branches @commit @diff @stats
diff options
context:
space:
mode:
8 files changed, 648 insertions, 547 deletions
-rw-r--r--.gitmodules3
-rw-r--r--awk-edits/Heading-anchors.awk8
m---------csma0
-rwxr-xr-xgenerate.sh14
-rw-r--r--src/_footer.html4
-rw-r--r--src/presentation.css2
-rw-r--r--src/styles.csma622
-rw-r--r--src/styles.css542
diff --git a/.gitmodules b/.gitmodules
index 600c751..b36ee4c 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,6 @@
[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 e3846f9..10f4aa9 100644
--- a/awk-edits/Heading-anchors.awk
+++ b/awk-edits/Heading-anchors.awk
@@ -7,6 +7,10 @@
# hyperlink is required (except for h1).
/[ \t]*<h[23456]/ {
- match($0, /id="[^"]*"/);
- $0 = $0 ORS "<a class=\"h-anchor\" href=\"#" substr($0, RSTART + 4, RLENGTH - 5) "\" aria-hidden=\"true\">&#x00A7;</a>";
+ if (match($0, /<h2 id="contents"/) == 0) {
+ match($0, /<h./)
+ 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>"
}
diff --git a/csma b/csma
new file mode 160000
+Subproject a00471ff2e26fa5f1cb6be4d9ba3d3dbdff0a57
diff --git a/generate.sh b/generate.sh
index 3da2c1e..9f3c681 100755
--- a/generate.sh
+++ b/generate.sh
@@ -13,7 +13,17 @@
/usr/bin/env dash ./csg/csg "$REPO_FOLDER/src" "$GEN_FOLDER" '& \\&mdash; Syndamia' 'https://syndamia.com' "$AWK_FOLDER"
# }}}
-# 2. Tiny version, strip away styles and other stuff {{{
+# 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 {{{
[ ! -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!"
@@ -35,7 +45,7 @@
done
}
- echo "[Stage 3] Tiny website"
+ echo "[Stage 4] Tiny website"
if [ $# -eq 0 ]; then
improveForTINY
diff --git a/src/_footer.html b/src/_footer.html
index 4481b8a..61bf08d 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,3 +1,7 @@
+ <div class="gap"></div>
+ <footer>
+ Unless stated otherwise - <a href="/licensing.html">CC BY-SA 4.0</a> - <a href="/about">Kamen</a> @ <a href="/">syndamia.com</a>
+ </footer>
</article>
<div id="scrollBtn" class="btn">&#xFE3D;</div>
diff --git a/src/presentation.css b/src/presentation.css
index 411f16b..7de2346 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -61,7 +61,7 @@ article { overflow: hidden; }
margin-block-start: 0;
margin-block-end: 0.5em;
}
- .slide .h-anchor { display: none; }
+ .slide .h-anchor, .slide .gap, .slide .gap-small { display: none; }
.clide { display: flex; flex-direction: column; }
.clide > * { flex: 1; }
diff --git a/src/styles.csma b/src/styles.csma
new file mode 100644
index 0000000..3927a25
--- /dev/null
+++ b/src/styles.csma
@@ -0,0 +1,622 @@
+: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');
+}
+
+<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> {}
+ <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 > * { 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;
+ }
+ }
+}
+}
+
+<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 {
+ 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; }
+
+ <Syntax highlighting> {}
+}
+
+<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: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);
+ }
+}
+
+/* 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; }
+}
+
+<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
deleted file mode 100644
index 9dc726b..0000000
--- a/src/styles.css
+++ /dev/null
@@ -1,542 +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; }
- h2 { margin-top: 2.5em; }
- h3 { margin-top: 2em; }
- 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: 0.6em 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 */
- overflow: auto;
- padding: 0 1em;
- }
- article {
- margin-left: auto;
- margin-right: auto;
- }
- #contents-container { float: right; margin-left: 2.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; }
- /* 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 {
- 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 */
generated by cgit v1.3.1-23-gd82d (git 2.54.0) at 2026-11-07 16:20:43 +0000