Switch to new website

assets/default.css

@@ -0,0 +1,112 @@
+/* https://www.w3.org/TR/CSS22/ */
+html, address,
+blockquote,
+body, dd, div,
+dl, dt, fieldset, form,
+frame, frameset,
+h1, h2, h3, h4,
+h5, h6, noframes,
+ol, p, ul, center,
+dir, hr, menu, pre   { display: block; unicode-bidi: embed }
+li              { display: list-item }
+head            { display: none }
+table           { display: table }
+tr              { display: table-row }
+thead           { display: table-header-group }
+tbody           { display: table-row-group }
+tfoot           { display: table-footer-group }
+col             { display: table-column }
+colgroup        { display: table-column-group }
+td, th          { display: table-cell }
+caption         { display: table-caption }
+th              { font-weight: bolder; text-align: center }
+caption         { text-align: center }
+body            { margin: 8px }
+h1              { font-size: 2em; margin: .67em 0 }
+h2              { font-size: 1.5em; margin: .75em 0 }
+h3              { font-size: 1.17em; margin: .83em 0 }
+h4, p,
+blockquote, ul,
+fieldset, form,
+ol, dl, dir,
+menu            { margin: 1.12em 0 }
+h5              { font-size: .83em; margin: 1.5em 0 }
+h6              { font-size: .75em; margin: 1.67em 0 }
+h1, h2, h3, h4,
+h5, h6, b,
+strong          { font-weight: bolder }
+blockquote      { margin-left: 40px; margin-right: 40px }
+i, cite, em,
+var, address    { font-style: italic }
+pre, tt, code,
+kbd, samp       { font-family: monospace }
+pre             { white-space: pre }
+button, textarea,
+input, select   { display: inline-block }
+big             { font-size: 1.17em }
+small, sub, sup { font-size: .83em }
+sub             { vertical-align: sub }
+sup             { vertical-align: super }
+table           { border-spacing: 2px; }
+thead, tbody,
+tfoot           { vertical-align: middle }
+td, th, tr      { vertical-align: inherit }
+s, strike, del  { text-decoration: line-through }
+hr              { border: 1px inset }
+ol, ul, dir,
+menu, dd        { margin-left: 40px }
+ol              { list-style-type: decimal }
+ol ul, ul ol,
+ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
+u, ins          { text-decoration: underline }
+br:before       { content: "\A"; white-space: pre-line }
+center          { text-align: center }
+:link, :visited { text-decoration: underline }
+:focus          { outline: thin dotted invert }
+
+/* Begin bidirectionality settings (do not change) */
+BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
+BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
+
+*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
+*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }
+
+@media print {
+    h1            { page-break-before: always }
+    h1, h2, h3,
+    h4, h5, h6    { page-break-after: avoid }
+    ul, ol, dl    { page-break-before: avoid }
+}
+/* END: https://www.w3.org/TR/CSS22/ */
+
+@media not screen {
+    header select.documentBranch, nav, .navButtonContainer, .headerlink {
+        display: none;
+    }
+
+    p.heading {
+        font-size: .67em;
+        margin: 2em 0;
+        font-weight: bolder;
+    }
+
+    nav {
+        /* Override changes made by JS to HTMLElement */
+        max-height: none !important;
+    }
+
+    table, tr, td, th, thead {
+        border: 1px solid black;
+        border-collapse: collapse;
+    }
+}
+
+@media print {
+    h1 {
+        page-break-before: auto;
+    }
+
+    p.heading {
+        page-break-after: avoid;
+    }
+}

assets/document-branches.js

@@ -0,0 +1,20 @@
+window.addEventListener("load", function() {
+    let select = document.querySelector("header select.documentBranch");
+    while (select.firstChild) {
+        select.removeChild(select.firstChild);
+    }
+    for (let branch of documentBranches) {
+        let option = document.createElement("option");
+        option.textContent = branch;
+        if (branch === documentBranch) {
+            option.setAttribute("selected", "");
+        }
+        select.prepend(option);
+    }
+    select.addEventListener("change", function() {
+        if (select.value !== documentBranch) {
+            location.assign(select.value + ".html");
+            select.value = documentBranch;
+        }
+    });
+});

assets/logo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="200" height="300" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#a40000" d="M 186,188 C 184,98 34,105 47,192 C 59,279 130,296 130,296 C 130,296 189,277 186,188 z" />
+  <path fill="#ffffff" d="M 73,238 C 119,242 140,241 177,222 C 172,270 131,288 131,288 C 131,288 88,276 74,238 z" />
+  <g fill="none" stroke="#4e9a06" stroke-width="15">
+    <path d="M 103,137 C 77,69 13,62 13,62" />
+    <path d="M 105,136 C 105,86 37,20 37,20" />
+    <path d="M 105,135 C 112,73 83,17 83,17" />
+  </g>
+</svg>

assets/narrow-menu.js

@@ -0,0 +1,15 @@
+window.addEventListener("load", function() {
+    document.querySelector("button[data-name=nav-open]").addEventListener("click", function() {
+        document.documentElement.classList.add("nav-opened");
+    });
+    document.querySelector("button[data-name=nav-close]").addEventListener("click", function() {
+        document.documentElement.classList.remove("nav-opened");
+    });
+    for (let link of document.querySelectorAll("nav a")) {
+        link.addEventListener("click", function() {
+            if (link.parentElement.classList.contains("active") || link.parentElement.classList.contains("level4")) {
+                document.documentElement.classList.remove("nav-opened");
+            }
+        });
+    }
+});

assets/navigation.js

@@ -0,0 +1,66 @@
+window.addEventListener("load", function() {
+    function findActiveSection(sections) {
+        let result = sections[0];
+        for (let [section, link] of sections) {
+            if (section.getBoundingClientRect().y > 10) {
+                break;
+            }
+            result = [section, link];
+        }
+        return result;
+    }
+
+    let nav = document.querySelector("nav");
+    let sections = [[document.querySelector("main"), null]];
+    for (let section of document.querySelectorAll("section")) {
+        let id = section.getAttribute("id");
+        let link = nav.querySelector("a[href=\\#" + id.replace(/\//g, "\\/") + "]");
+        if (link !== null) {
+            link = link.parentElement;
+            link.classList.remove("active");
+            sections.push([section, link]);
+        }
+    }
+    let oldLink = null;
+    function updateLink() {
+        let [section, link] = findActiveSection(sections);
+        while (oldLink) {
+            if (oldLink.tagName === "LI") {
+                oldLink.classList.remove("active");
+                if (!oldLink.classList.contains("level4")) {
+                    break;
+                }
+            }
+            oldLink = oldLink.parentElement;
+        }
+        oldLink = link;
+        while (link) {
+            if (link.tagName === "LI") {
+                link.classList.add("active");
+                if (!link.classList.contains("level4")) {
+                    break;
+                }
+            }
+            link = link.parentElement;
+        }
+        if (link === null) {
+            nav.scrollTop = 0;
+        } else {
+            let topLink = link.getBoundingClientRect().y;
+            let topNav = nav.getBoundingClientRect().y;
+            let y = nav.scrollTop + topLink - topNav - 10;
+            nav.scrollTo(0, y);
+        }
+    }
+    function resizeNav() {
+        let height = window.innerHeight - nav.getBoundingClientRect().y;
+        nav.style.maxHeight = height > 0 ? height + "px" : "none";
+    }
+    function updateNav() {
+        resizeNav();
+        updateLink();
+    }
+    document.addEventListener("scroll", updateNav);
+    window.addEventListener("resize", updateNav);
+    updateNav();
+});

assets/screen-narrow.css

@@ -0,0 +1,82 @@
+.documentContainer {
+    width: 100%;
+}
+
+header .logoContainer {
+    padding: 2em 10px;
+    background-position: 50%;
+    min-height: 320px;
+    text-align: center;
+}
+
+header .logoContainer, header select.documentBranch {
+    text-shadow: 0 0 3px #050a02, 0 0 3px #050a02;
+}
+
+header .logoContainer, header ul, main {
+    max-width: initial;
+}
+
+nav {
+    position: fixed;
+    width: 0;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background-color: #E4E9F6;
+    z-index: 1;
+    scrollbar-width: initial;
+    transition: width ease .2s;
+    max-height: initial !important;
+    margin: 0;
+}
+
+html.nav-opened {
+    overflow: hidden;
+}
+
+.nav-opened nav {
+    width: 100vw;
+}
+
+nav::-webkit-scrollbar {
+    display: initial;
+}
+
+main, .navContainer {
+    position: relative;
+}
+
+.navButtonContainer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: start;
+    justify-content: flex-end;
+    pointer-events: none;
+}
+
+.navButtonContainer button {
+    background: #a40000;
+    color: white;
+    border: none;
+    font-size: 1em;
+    font-weight: normal;
+    font-family: sans-serif;
+    cursor: pointer;
+    padding: 10px;
+    top: 10px;
+    position: sticky;
+    margin: 10px;
+    z-index: 1;
+    border-radius: 3px;
+    pointer-events: initial;
+    transition: color .2s ease;
+}
+
+.navButtonContainer button:hover {
+    color: black;
+}

assets/screen-noscript.css

@@ -0,0 +1,37 @@
+header select.documentBranch {
+    display: none;
+}
+
+header span.documentBranch {
+    display: inline;
+}
+
+nav {
+    position: relative;
+    height: auto;
+    /* Override changes made by JS to HTMLElement */
+    max-height: none !important;
+}
+
+nav .level2.active > a, nav .level3.active > a {
+    background: none;
+    border-left-color: transparent;
+}
+
+nav .level4 {
+    display: initial;
+}
+
+nav .level4 > a::after {
+    display: none !important;
+}
+
+@media screen and (max-width: 50em) {
+    nav, .navButtonContainer {
+        display: none;
+    }
+
+    html.nav-opened {
+        overflow: initial;
+    }
+}

assets/screen.css

@@ -0,0 +1,350 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    line-height: 1.4;
+    background-color: #E4E9F6;
+    color: #424247;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+body > * {
+    width: 100%;
+}
+
+a {
+    color: #a40000;
+}
+
+a:link {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+header {
+    display: flex;
+    flex-direction: column;
+    background-color: #050a02;
+    color: #efdddd;
+    align-items: center;
+}
+
+header > * {
+    width: 100%;
+}
+
+header .logoContainer {
+    max-width: 1400px;
+    padding: 2em 10px;
+    padding-left: calc(210px + 2em);
+    box-sizing: border-box;
+    background: url(logo.svg);
+    background-repeat: no-repeat;
+    background-position: 10px 50%;
+    min-height: calc(300px + 4em);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+header p {
+    margin: 0;
+    font-size: 1.5em;
+}
+
+header h1 {
+    font-weight: lighter;
+    font-size: 3em;
+    margin-top: 0;
+    margin-bottom: 2rem;
+}
+
+header span.documentBranch {
+    border: 1px dashed #efdddd;
+    padding: 0 5px;
+    display: none;
+}
+
+header select.documentBranch {
+    background: none;
+    color: #efdddd;
+    border: none;
+    font-size: 1em;
+    font-weight: lighter;
+    font-family: sans-serif;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border: 1px dashed #efdddd;
+    cursor: pointer;
+    padding: 0 5px;
+    text-align: center;
+    text-align-last: center;
+}
+
+header select.documentBranch:hover {
+    text-decoration: underline;
+}
+
+header select.documentBranch option {
+    color: initial;
+    font-size: initial;
+    font-weight: initial;
+    font-family: initial;
+    cursor: initial;
+}
+
+header .linkContainer {
+    order: -1;
+    background-color: #a40000;
+    flex-direction: column;
+    display: flex;
+    align-items: center;
+}
+
+header ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    max-width: 1400px;
+    width: 100%;
+    justify-content: space-between;
+}
+
+header a {
+    color: white;
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    transition: color .2s ease;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+header a:link {
+    text-decoration: none;
+}
+
+header a:hover {
+    color: #050a02;
+}
+
+main {
+    flex: 1;
+    max-width: 1400px;
+    display: flex;
+}
+
+/* Shift headers by 1 */
+h2 {
+    font-size: 2em;
+    margin: .67em 0;
+}
+
+h3 {
+    font-size: 1.5em;
+    margin: .75em 0;
+}
+
+h4 {
+    font-size: 1.17em;
+    margin: .83em 0;
+}
+
+h5 {
+    font-size: 1em;
+    margin: 1.12em 0;
+}
+
+h6 {
+    font-size: .83em;
+    margin: 1.5em 0;
+}
+
+p.heading {
+    font-size: .75em;
+    margin: 1.67em 0;
+    font-weight: bolder;
+}
+
+img, .tableContainer {
+    max-width: 100%;
+}
+
+.tableContainer {
+    overflow: auto;
+}
+
+blockquote {
+    border-radius: 3px;
+    background-color: #ECE7D5;
+    padding: 10px;
+    border-left: 3px solid #F6E39A;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+blockquote > *:first-child {
+    margin-top: 0;
+}
+
+blockquote > *:last-child {
+    margin-bottom: 0;
+}
+
+div.sourceCode, :not(div) > pre {
+    border-radius: 3px;
+    background-color: #D2D7E3;
+    padding: 10px;
+    border-left: 3px solid #a40000;
+    overflow: auto;
+}
+
+pre > code {
+    white-space: pre;
+}
+
+:not(pre) > code {
+    border-radius: 2px;
+    background-color: #D2D7E3;
+    padding: 0 2px;
+}
+
+section.last {
+    min-height: 100vh;
+}
+
+nav h2 {
+    font-weight: normal;
+    padding: 0 10px;
+    font-size: 1.5em;
+    margin: .75em 0;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav {
+    margin-right: 2rem;
+    flex: 1;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.navContainer {
+    padding: 10px 0;
+}
+
+nav::-webkit-scrollbar {
+    display: none;
+}
+
+nav:hover {
+    scrollbar-width: initial;
+}
+
+nav:hover::-webkit-scrollbar {
+    display: initial;
+}
+
+nav .level2 {
+    padding-bottom: 20px;
+}
+
+nav a {
+    display: block;
+    padding: 5px 10px;
+    padding-left: 7px;
+    border-left: 3px solid transparent;
+    border-radius: 3px;
+}
+
+nav .level2 > a {
+    font-weight: bolder;
+}
+
+nav .level4.active > a::after {
+    content: "▷";
+    color: #424247;
+    position: absolute;
+    top: 0;
+    left: 10px;
+    height: 100%;
+    width: 20px;
+    font-size: 0.8em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+nav .level4 > a {
+    color: #424247;
+    padding-left: 30px;
+    position: relative;
+}
+
+nav .level2.active > a, nav .level3.active > a {
+    background: #D2D7E3;
+    border-left-color: #a40000;
+}
+
+nav .level4 {
+    display: none;
+}
+
+nav .active > ul > .level4 {
+    display: initial;
+}
+
+.navButtonContainer {
+    display: none;
+}
+
+.documentContainer p, .documentContainer ul, .documentContainer ol {
+    max-width: 42em;
+    box-sizing: border-box;
+    margin-left: 0;
+}
+
+.documentContainer {
+    padding: 10px;
+    box-sizing: border-box;
+    width: 75%;
+}
+
+table, tr, td, th, thead {
+    border: 1px solid #424247;
+    border-collapse: collapse;
+}
+
+thead {
+    background-color: #D2D7E3;
+}
+
+td, th {
+    padding: 5px 10px;
+}
+
+.headerlink {
+    display: none;
+}
+
+section > *:first-child:hover .headerlink {
+    display: initial;
+}