+ {% include nav.html %}
+
+
+
+
+
+
+ {% include anchor-headings.html html=content anchorBody="#" anchorClass="header-anchor" %}
+
+
+
+
+
+
+ {% include footer.html %}
+
+ {% include common-js.html %}
+
+
\ No newline at end of file
diff --git a/_layouts/wiki.html b/_layouts/wiki.html
new file mode 100644
index 00000000..db77df6b
--- /dev/null
+++ b/_layouts/wiki.html
@@ -0,0 +1,63 @@
+---
+layout: compress
+---
+
+
+
+{% include head.html%}
+
+
+
+ {% include nav.html %}
+
+
+
+
+
+
+ {% assign items = site[page.collection] | where: "section", page.section | sort: "category" %}
+
+
+ {% for item in items %}
+ {% if item.url contains "index.html" %}
+ - {{ item.title }}
+ {% endif %}
+ {% endfor %}
+ {% for item in items %}
+ {% unless item.url contains "index.html" %}
+ {% if item.category and category != item.category %}
+ {% if category %}
+
+
+
+ {% endif %}
+ {% assign category = item.category %}
+
+
+ {{ category }}
+
+ {% endif %}
+ - {{ item.title }}
+ {% endunless %}
+ {% endfor %}
+ {% if category %}
+
+
+ {% endif %}
+
+
+
+
{{ page.title }}
+
+ {% include anchor-headings.html html=content anchorBody="#" anchorClass="header-anchor" %}
+
+
+
+
+
+
+ {% include footer.html %}
+
+ {% include common-js.html %}
+
+
\ No newline at end of file
diff --git a/assets/css/dark.scss b/assets/css/dark.scss
new file mode 100755
index 00000000..d5377d26
--- /dev/null
+++ b/assets/css/dark.scss
@@ -0,0 +1,35 @@
+---
+---
+
+:root {
+ // Main contents
+ --main-bg: #333;
+ --main-color: #ccc;
+ --header-color: #ddd;
+ --borders: #555;
+ --blockquote-color: #999;
+ --code-bg: #3f3f3f;
+ --code-color: #ddd;
+ --a-color: #0366d6;
+ --small-color: gray;
+ --carousel-caption-bg: #333b;
+ --table-alt-bg: #2a2a2a;
+
+ // Cards
+ --card-background: #444;
+ --card-edges-background: rgba(0, 0, 0, 0.15);
+
+ // Modal
+ --modal-borders: 1px solid rgba(0, 0, 0, 0.2);
+
+ // Nav
+ --nav-link-color: rgba(255, 255, 255, 0.7);
+ --nav-link-color-hover: rgba(255, 255, 255, 0.5);
+ --nav-link-color-active: rgba(255, 255, 255, 1);
+ --dropdown-item-bg-hover: rgba(0, 0, 0, 0.3);
+ --primary: {{ page.color | default: site.color }};
+ --dark: #f8f9fa;
+ --light: #3f3f3f;
+ --light-border: #292929;
+ --light-placeholder: #999;
+}
diff --git a/assets/css/light.scss b/assets/css/light.scss
new file mode 100755
index 00000000..9dd3e67a
--- /dev/null
+++ b/assets/css/light.scss
@@ -0,0 +1,43 @@
+---
+---
+
+:root {
+ // Main contents
+ --main-bg: #fff;
+ --main-color: #222;
+ --header-color: #222;
+ --borders: #bbb;
+ --blockquote-color: #666;
+ --code-bg: #e9e9e9;
+ --code-color: #333;
+ --a-color: #0366d6;
+ --small-color: gray;
+ --carousel-caption-bg: #fffb;
+ --table-alt-bg: #f0f0f0;
+
+ // Cards
+ --card-background: var(--main-bg);
+ --card-edges-background: rgba(0,0,0,.03);
+
+ // Modal
+ --modal-borders: 1px solid #dee2e6;
+
+ // Nav
+ --nav-link-color: rgba(255, 255, 255, 0.7);
+ --nav-link-color-hover: rgba(255, 255, 255, 0.5);
+ --nav-link-color-active: rgba(255, 255, 255, 1);
+ --dropdown-item-bg-hover: rgba(0, 0, 0, 0.3);
+ --primary: {{ page.color | default: site.color }};
+ --dark: #343a40;
+ --light: #f8f9fa;
+ --light-border: #ced4da;
+ --light-placeholder: darkgray;
+}
+
+.carousel-dark-when-light .carousel-control-next-icon, .carousel-dark-when-light .carousel-control-prev-icon {
+ filter: invert(1) grayscale(100);
+}
+
+.carousel-dark-when-light .carousel-indicators li {
+ background-color: #000;
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 00000000..0e6157c6
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,368 @@
+---
+---
+
+@import url("light.css");
+@import url("dark.css") (prefers-color-scheme: dark);
+
+// For the bottom aligned footer
+html, body {
+ height: 100%;
+}
+body {
+ display: flex;
+ flex-direction: column;
+}
+.content {
+ flex: 1 0 auto;
+}
+footer {
+ flex-shrink: 0;
+ padding-top: 20px;
+}
+
+body {
+ color: var(--main-color);
+ background-color: var(--main-bg);
+}
+
+h1, h2, h3, h4, h5, h6 {
+ color: var(--header-color);
+}
+
+h2 {
+ border-bottom: 1px solid var(--borders);
+}
+
+blockquote {
+ color: var(--blockquote-color);
+ margin-bottom: 20px;
+ padding: 0 0 0 20px;
+ border-left: 3px solid var(--borders);
+}
+
+code {
+ color: var(--code-color);
+ background-color: var(--code-bg);
+ padding: 3px;
+ border-radius: 0.25rem;
+}
+
+// .a is for making other things look like