new files for apollo theme

2024-09-11 21:22:13 +02:00 · 2024-09-11 21:22:13 +02:00 · 2fe4d74cb0
commit 2fe4d74cb0
parent 0ba5bcdff1
104 changed files with 2294 additions and 0 deletions
--- a/content/posts/_index.md
+++ b/content/posts/_index.md
@ -0,0 +1,7 @@
+++
+paginate_by = 7
+title = "Posts"
+sort_by = "date"
+
+insert_anchor_links = "heading"
+++
--- a/content/posts/configuration.md
+++ b/content/posts/configuration.md
@ -0,0 +1,132 @@
+++
+title = "Configuring Apollo"
+date = "2024-07-09"
+
+[taxonomies]
+tags=["documentation"]
+
+[extra]
+repo_view = true
+++
+
+## Theme Mode (`theme`)
+
+Sets the color theme for your blog.
+
+- Type: String
+- Options: "light", "dark", "auto", "toggle"
+- Default: "toggle"
+- Usage: `theme = "toggle"`
+
+The "toggle" option allows users to switch between light and dark modes, while "auto" typically follows the user's system preferences.
+
+## Menu 
+
+Defines the navigation menu items for your blog.
+
+- Type: Array of objects
+- Default: []
+- Usage:
+  ```toml
+  menu = [
+      { name = "/posts", url = "/posts", weight = 1 },
+      { name = "/projects", url = "/projects", weight = 2 },
+      { name = "/about", url = "/about", weight = 3 },
+      { name = "/tags", url = "/tags", weight = 4 },
+  ]
+  ```
+
+## Socials
+
+Defines the social media links. 
+
+- Type: Array of objects
+- Default: []
+- Usage:
+  ```toml
+  socials = [
+    { name = "twitter", url = "https://twitter.com/not_matthias", icon = "twitter" },
+    { name = "github", url = "https://github.com/not-matthias/", icon = "github" },
+  ]
+  ```
+
+## Table of Contents (`toc`)
+
+Enables or disables the table of contents for posts.
+
+- Type: Boolean
+- Default: true
+- Usage: `toc = true`
+
+When enabled, a table of contents will be generated for posts, making it easier for readers to navigate through longer articles.
+
+## CDN Usage (`use_cdn`)
+
+Determines whether to use a Content Delivery Network (CDN) for assets.
+
+- Type: Boolean
+- Default: false
+- Usage: `use_cdn = false`
+
+When set to true, the theme will attempt to load assets from a CDN, which can improve loading times for visitors from different geographic locations.
+
+## Favicon (`favicon`)
+
+Specifies the path to the favicon image for your blog.
+
+- Type: String
+- Default: "/icon/favicon.png"
+- Usage: `favicon = "/icon/favicon.png"`
+
+This sets the small icon that appears in the browser tab for your website.
+
+## Comments (`comment`)
+
+Enables or disables the comment system for posts.
+
+- Type: Boolean
+- Default: false
+- Usage: `comment = false`
+
+After making `comment = true` save your script from [Giscus](https://giscus.app) to `templates/_giscus_script.html`.
+When enabled, this allows readers to leave comments on your blog posts.
+
+
+## Fancy Code Styling (`fancy_code`)
+
+Enables enhanced styling for code blocks.
+
+- Type: Boolean
+- Default: true
+- Usage: `fancy_code = true`
+
+This option adds the language label and a copy button.
+
+## Dynamic Notes (`dynamic_note`)
+
+Allows for the creation of togglable note sections in your content.
+
+- Type: Boolean
+- Default: true
+- Usage: `dynamic_note = true`
+
+When enabled, you can create expandable/collapsible note sections in your blog posts.
+
+## Source code (`repo_view`)
+
+Do you want to link to the source code of your blog post? You can turn on the `repo_view` inside the `[extra]` section of your blog post.
+
+```toml
+[extra]
+repo_view = true
+repo_url = "https://github.com/not-matthias/apollo/tree/main/content"   # Alternatively add the repo here
+```
+
+The `repo_url` can be set in the `[extra]` section or in your `config.toml`.
+
+## Anchor Links
+
+You can add anchor links by adding the following to your `_index.md`:
+```toml
+insert_anchor_links = "heading"
+```
--- a/content/posts/markdown.md
+++ b/content/posts/markdown.md
@ -0,0 +1,84 @@
+++
+title = "Markdown Test"
+date = "2022-01-01"
+updated = "2022-05-01"
+
+[taxonomies]
+tags=["example"]
+++
+
+# H1
+## H2
+### H3
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet sagittis id consectetur purus ut. In pellentesque massa placerat duis ultricies. Neque laoreet suspendisse interdum consectetur libero id. Justo nec ultrices dui sapien eget mi proin. Nunc consequat interdum varius sit amet mattis vulputate. Sollicitudin tempor id eu nisl nunc mi ipsum. Non odio euismod lacinia at quis. Sit amet nisl suscipit adipiscing. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Sit amet consectetur adipiscing elit pellentesque habitant. Ac placerat vestibulum lectus mauris. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. [Google](https://www.google.com)
+
+![Markdown Logo](https://markdown-here.com/img/icon256.png)
+
+## Code Block
+
+```rust
+fn main() {
+    println!("Hello World");
+}
+```
+
+
+```rust,hl_lines=2,linenos
+fn main() {
+    println!("Hello World");
+}
+```
+
+## Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+## Unordered List
+
+- List item
+- Another item
+- And another item
+
+## Nested list
+
+- Fruit
+  - Apple
+  - Orange
+  - Banana
+- Dairy
+  - Milk
+  - Cheese
+
+## Quote
+
+> Two things are infinite: the universe and human stupidity; and I'm not sure about the
+> universe.<br>
+> — <cite>Albert Einstein</cite>
+
+
+## Table Inline Markdown
+
+| Italics   | Bold     | Code   | StrikeThrough     |
+| --------- | -------- | ------ | ----------------- |
+| *italics* | **bold** | `code` | ~~strikethrough~~ |
+
+## Foldable Text
+
+<details>
+    <summary>Title 1</summary>
+    <p>IT'S A SECRET TO EVERYBODY.</p>
+</details>
+
+<details>
+    <summary>Title 2</summary>
+    <p>Stay awhile, and listen!</p>
+</details>
+
+## Code tags
+
+Lorem ipsum `dolor` sit amet, `consectetur adipiscing` elit. 
+`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
--- a/content/posts/math-symbol.md
+++ b/content/posts/math-symbol.md
@ -0,0 +1,22 @@
+++
+title = "Math Symbol Example"
+date = "2023-01-06"
+
+[taxonomies]
+tags=["example"]
+++
+
+Note: This requires the `mathjax` and `mathjax_dollar_inline_enable` option set to `true`.
+
+# Inline Math
+
+-   $(a+b)^2$ = $a^2 + 2ab + b^2$
+-   A polynomial P of degree d over $\mathbb{F}_p$ is an expression of the form
+    $P(s) = a_0 + a_1 . s + a_2 . s^2 + ... + a_d . s^d$ for some
+    $a_0,..,a_d \in \mathbb{F}_p$
+
+# Displayed Math
+
+$$
+p := (\sum_{k∈I}{c_k.v_k} + \delta_v.t(x))·(\sum_{k∈I}{c_k.w_k} + \delta_w.t(x)) − (\sum_{k∈I}{c_k.y_k} + \delta_y.t(x))
+$$
--- a/content/posts/shortcode.md
+++ b/content/posts/shortcode.md
@ -0,0 +1,78 @@
+++
+title = "Shortcode Example"
+date = "2024-06-14"
+
+[taxonomies]
+tags=["example"]
+++
+
+
+## Note
+ 
+Here is an example of the `note` shortcode:
+
+This one is static!
+{{ note(header="Note!", body="This blog assumes basic terminal maturity") }}
+
+This one is clickable!
+{{ note(clickable=true, hidden = true, header="Quiz!", body="The answer to the quiz!") }}
+
+
+Syntax:
+```
+{{/* note(header="Note!", body="This blog assumes basic terminal maturity") */}}
+{{/* note(clickable=true, hidden = true, header="Quiz!", body="The answer to the quiz!") */}}
+```
+
+You can also use some HTML in the text:
+{{ note(header="Note!", body="<h1>This blog assumes basic terminal maturity</h1>") }}
+
+
+Literal shortcode:
+```
+{{/* note(header="Note!", body="<h1>This blog assumes basic terminal maturity</h1>") */}}
+```
+
+Pretty cool, right?
+
+Finally, you can do something like this (hopefully):
+
+{% note(clickable=true, header="Quiz!") %}
+
+# Hello this is markdown inside a note shortcode
+
+```rust
+fn main() {
+    println!("Hello World");
+}
+```
+
+We can't call another shortcode inside a shortcode, but this is good enough.
+
+{% end %}
+
+Here is the raw markdown:
+
+```markdown
+{{/* note(clickable=true, header="Quiz!") */}}
+
+# Hello this is markdown inside a note shortcode
+
+\`\`\`rust
+fn main() {
+    println!("Hello World");
+}
+\`\`\`
+
+We can't call another shortcode inside a shortcode, but this is good enough.
+
+{{/* end */}}
+```
+
+Finally, we have center
+{{ note(center=true, header="Centered Text", body="This is centered text") }}
+
+```markdown
+{{/* note(center=true, header="Centered Text", body="This is centered text") */}}
+```
+It works good enough for me!
--- a/content/posts/snippet-test.md
+++ b/content/posts/snippet-test.md
@ -0,0 +1,19 @@
+++
+title = 'testing snippets'
+author = 'Joost Agterhoek'
+date = 2024-09-11
+updated = 2024-09-11
+[taxonomies]
+tags = ['Neovim', 'LuaSnip', 'blogging']
+++
+
+This is my first test blog post (local only) where I setup the TOML front matter with a self-made LuaSnip snippet! 🤩 Of course the snippet was filled with errors, *but*, it did work! 🛠️
+
+All in all, I am really getting into the flow of my current setup for note taking and blogging. I would like to further integrate this site, which should soon be my [note taking test site](https://notes.joostagterhoek.nl)'s theme, into Obsidian.
+
+So far, `zola` has had no problem updating the locally served site when I edit a blog post like this, so it would be great for testing. I would like a keymap for emojis though, I should remember to set that up. Which is exactly what I do in my personal Obsidian vault (see the connection here? 🔗).
+
+
+
+
+
--- a/content/posts/test.md
+++ b/content/posts/test.md
@ -0,0 +1,11 @@
+++
+title = "testing"
+date = 2024-09-09
+++
+
+testing.
+
+![testing](/projects/project-1.jpg)
+
+[![testing remote image](https://images.pexels.com/photos/27774130/pexels-photo-27774130/free-photo-of-float.jpeg)](https://notes.joostagterhoek.nl)
+_[Photo by Mateo Servia from Pexels](https://www.pexels.com/photo/float-27774130/)_ 
--- a/content/projects/project-1.jpg
+++ b/content/projects/project-1.jpg
--- a/content/projects/project_1.md
+++ b/content/projects/project_1.md
@ -0,0 +1,11 @@
+++
+title = "Apollo"
+description = "Modern and minimalistic blog theme."
+weight = 1
+
+[extra]
+local_image = "/projects/project-1.jpg"
+link_to = "https://github.com/not-matthias/apollo"
+++
+
+Example project page
--- a/content/projects/project_2.md
+++ b/content/projects/project_2.md
@ -0,0 +1,11 @@
+++
+title = "Project 2"
+description = "Example description"
+weight = 1
+
+[extra]
+# You can also crop the image in the url by adjusting w=/h=
+remote_image = "https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
+++
+
+Example project page
--- a/content/projects/project_3.md
+++ b/content/projects/project_3.md
@ -0,0 +1,10 @@
+++
+title = "Project 3"
+description = "Example description"
+weight = 1
+
+[extra]
+remote_image = "https://images.unsplash.com/photo-1462556791646-c201b8241a94?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1465&q=80"
+++
+
+Example project page
--- a/content/projects/project_4.md
+++ b/content/projects/project_4.md
@ -0,0 +1,10 @@
+++
+title = "Project 4"
+description = "Example description with a lot of words but without any meaning. Why use lorem ipsum when you can just write a lot of text that has no underlying meaning?"
+weight = 1
+
+[extra]
+remote_image = "https://images.unsplash.com/photo-1620121692029-d088224ddc74?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
+++
+
+Example project page
--- a/content/projects/project_5.md
+++ b/content/projects/project_5.md
@ -0,0 +1,7 @@
+++
+title = "Project 4"
+description = "Example description" 
+weight = 1
+++
+
+Example project page
--- a/sass/fonts.scss
+++ b/sass/fonts.scss
@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'Jetbrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/JetbrainsMono/JetBrainsMono-Regular.ttf'), local('ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Jetbrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: url('fonts/JetbrainsMono/JetBrainsMono-Bold.ttf'), local('ttf');
+  font-display: swap
+}
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf'), local('ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  src: url('fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf'), local('ttf');
+  font-display: swap;
+}
--- a/sass/main.scss
+++ b/sass/main.scss
@ -0,0 +1,51 @@
+@import "parts/_cards.scss";
+@import "parts/_code.scss";
+@import "parts/_header.scss";
+@import "parts/_image.scss";
+@import "parts/_toc.scss";
+@import "parts/_note.scss";
+@import "parts/misc.scss";
+@import "parts/table.scss";
+@import "parts/tags.scss";
+
+:root {
+  /* Used for: block comment, hr, ... */
+  --border-color: var(--border-color);
+
+  /* Fonts */
+  --text-font: 'Jetbrains Mono';
+  --header-font: 'Space Grotesk', 'Helvetica', sans-serif;
+  --code-font: 'Jetbrains Mono';
+}
+
+html {
+  background-color: var(--bg-0);
+  color: var(--text-0);
+  font-family: var(--text-font);
+  line-height: 1.6em;
+}
+
+.content {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 24px;
+  word-wrap: break-word;
+}
+
+@media all and (min-width:640px) {
+  html {
+    font-size: 16.5px;
+  }
+}
+
+@media all and (min-width:720px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media all and (min-width:960px) {
+  html {
+    font-size: 18px;
+  }
+}
--- a/sass/parts/_cards.scss
+++ b/sass/parts/_cards.scss
@ -0,0 +1,55 @@
+.cards {
+    display: grid;
+    grid-template-rows: auto;
+    gap: 24px;
+    padding: 12px 0;
+}
+
+@media all and (min-width: 640px) {
+    .cards {
+        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    }
+}
+
+@media all and (max-width: 640px) {
+    .cards {
+        grid-template-columns: repeat(auto-fill, 1fr);
+    }
+}
+
+.card {
+    min-height: 100px;
+    background: var(--bg-1);
+    border: 2px solid var(--border-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.card-info {
+    padding: 0 24px 24px 24px;
+}
+
+.card-title {
+    margin-top: 0.7em;
+}
+
+.card-image {
+    border: unset;
+    width: 100%;
+}
+
+.card-image-placeholder {
+    height: 12px;
+    width: 100%;
+}
+
+.card-description {
+    margin-top: 0.5em;
+    overflow: hidden;
+}
+
+@media all and (max-width:720px) {
+    .cards {
+        gap: 18px;
+    }
+}
--- a/sass/parts/_code.scss
+++ b/sass/parts/_code.scss
@ -0,0 +1,159 @@
+// Define base colors and fonts for light and dark themes
+:root {
+    --code-font: 'Courier New', monospace;
+    --bg-primary: var(--bg-1);
+    --text-color: var(--text-0); // Color of the code text
+    --label-color: #f0f0f0; // Text color of the label
+
+    --hightlight-color: #f0f0f0;
+}
+
+:root.dark {
+    --hightlight-color: #204e8a;
+}
+
+
+// Define language colors map
+$language-colors: (
+    "js": (#f7df1e, "JavaScript"),
+    "yaml": (#f71e6a, "YAML"),
+    "shell": (#4eaa25, "Shell"),
+    // Updated to a more specific green shade
+    "json": (dodgerblue, "JSON"),
+    "python": (#3572A5, "Python"),
+    // Using the specific Python blue
+    "css": (#264de4, "CSS"),
+    "go": (#00ADD8, "Go"),
+    // Official Go color
+    "markdown": (#0000ff, "Markdown"),
+    "rust": (#ff4647, "Rust"),
+    // Adjusted to match Rust's branding
+    "java": (#f89820, "Java"),
+    // Oracle Java color
+    "csharp": (#178600, "C#"),
+    "ruby": (#701516, "Ruby"),
+    "swift": (#f05138, "Swift"),
+    "php": (#777bb4, "PHP"),
+    "typescript": (#3178c6, "TypeScript"),
+    "scala": (#c22d40, "Scala"),
+    "kotlin": (#F18E33, "Kotlin"),
+    "lua": (#000080, "Lua"),
+    "perl": (#0298c3, "Perl"),
+    "haskell": (#5e5086, "Haskell"),
+    "r": (#198ce7, "R"),
+    "dart": (#00d2b8, "Dart"),
+    "elixir": (#6e4a7e, "Elixir"),
+    "clojure": (#5881d8, "Clojure"),
+    "bash": (#4eaa25, "Bash"),
+    "default": (#333, "Code"),
+);
+
+@mixin base-label-style($bg-color, $text-color: var(--label-color)) {
+    background: $bg-color;
+    color: $text-color;
+    border-radius: 0 0 0.25rem 0.25rem;
+    font-size: 12px;
+    letter-spacing: 0.025rem;
+    padding: 0.1rem 0.5rem;
+    text-align: right;
+    text-transform: uppercase;
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin-top: 0.1rem;
+}
+
+// Example usage within a specific class for clarity
+.code-label {
+    @include base-label-style(#333); // Default background color
+}
+
+@each $lang, $color-info in $language-colors {
+    .label-#{$lang} {
+        @include base-label-style(nth($color-info, 1));
+    }
+}
+
+code {
+    background-color: var(--bg-primary);
+    padding: 0.1em 0.2em;
+    border-radius: 5px;
+    border: 1px solid var(--border-color);
+    font-family: var(--code-font);
+}
+
+pre {
+    background-color: var(--bg-primary) !important;
+    border-radius: 5px;
+    border: 1px solid var(--border-color);
+    line-height: 1.4;
+    overflow-x: auto;
+    padding: 1em;
+    position: relative;
+
+    mark {
+        background-color: var(--hightlight-color) !important; // Ensure mark uses the theme background
+        padding: 0;
+        border-radius: 0px;
+    }
+
+    code {
+        background-color: transparent !important;
+        color: var(--text-color);
+        font-size: 100%;
+        padding: 0;
+        border: none;
+        font-family: var(--code-font);
+
+        table {
+            margin: 0;
+            border-collapse: collapse;
+            font-family: var(--code-font);
+
+            mark {
+                display: block;
+                color: unset;
+                padding: 0;
+                background-color: var(--hightlight-color) !important;
+                filter: brightness(1.2); // Example to slightly increase brightness
+            }
+
+        }
+
+        td,
+        th,
+        tr {
+            padding: 0;
+            border-bottom: none;
+            border: none; // Ensure no borders around rows
+        }
+
+        tbody td:first-child {
+            text-align: center;
+            user-select: none;
+            min-width: 60px;
+            border-right: none,
+        }
+
+        tbody tr:nth-child(even),
+        thead tr {
+            background-color: unset;
+        }
+    }
+}
+
+.clipboard-button,
+.clipboard-button svg {
+    all: unset;
+    cursor: pointer;
+    position: absolute;
+    bottom: 5px;
+    /* 5px from the bottom */
+    right: 5px;
+    /* 5px from the right */
+    z-index: 10;
+    background-color: transparent;
+    border: none;
+    fill: #ef5350;
+    /* Sets the color of the SVG, assuming it's an SVG icon */
+}
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@ -0,0 +1,146 @@
+.page-header {
+    font-size: 2.5em;
+    line-height: 100%;
+    font-family: var(--header-font);
+    margin: 4rem 0px 1rem 0px;
+}
+
+.centered-header {
+    font-family: var(--header-font);
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    font-size: 4em;
+}
+
+header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 1em 0;
+}
+
+header .main {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+    font-size: 1.5rem;
+
+    /* Otherwise header and menu is too close on small screens*/
+    margin-bottom: 5px;
+}
+
+header .social img,
+header #dark-mode-toggle img {
+    width: 16px;
+    height: 16px;
+}
+
+header .socials {
+    margin-bottom: 10px;
+    /* Space between social icons and menu items */
+}
+
+#dark-mode-toggle {
+    justify-content: center;
+}
+
+.socials {
+    /* flex-child */
+    flex-grow: 0;
+    /* flex-container */
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: 6px;
+}
+
+.social {
+    border-bottom: unset;
+    background-image: unset;
+    padding: 2px;
+}
+
+.social>img {
+    border: unset;
+    width: 24px;
+    height: 24px;
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 600px) {
+    header {
+        flex-direction: column;
+        align-items: center;
+        padding: 1em 0;
+    }
+
+    header .main a {
+        font-size: 20px;
+    }
+}
+
+.meta {
+    color: #999;
+    display: flexbox;
+    /* This changes the meta class to use flexbox, which ensures inline display */
+    align-items: center;
+    /* Aligns items vertically in the middle */
+    flex-wrap: wrap;
+    /* Allows items to wrap as needed */
+}
+
+#dark-mode-toggle>img {
+    display: none;
+    width: 15px;
+    height: 15px;
+    border: unset;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 1.2rem;
+    margin-top: 2em;
+}
+
+h1::before {
+    color: var(--primary-color);
+    content: "# ";
+}
+
+h2::before {
+    color: var(--primary-color);
+    content: "## ";
+}
+
+h3::before {
+    color: var(--primary-color);
+    content: "### ";
+}
+
+h4::before {
+    color: var(--primary-color);
+    content: "#### ";
+}
+
+h5::before {
+    color: var(--primary-color);
+    content: "##### ";
+}
+
+h6::before {
+    color: var(--primary-color);
+    content: "###### ";
+}
--- a/sass/parts/_image.scss
+++ b/sass/parts/_image.scss
@ -0,0 +1,35 @@
+img {
+  border: 3px solid #ececec;
+  max-width: 100%;
+}
+
+figure {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  max-width: 100%;
+}
+
+figure img {
+  max-height: 500px;
+}
+
+@media screen and (min-width: 600px) {
+  figure {
+    padding: 0 40px;
+  }
+}
+
+figure h4 {
+  font-size: 1rem;
+  margin: 0;
+  margin-bottom: 1em;
+}
+
+figure h4::before {
+  content: "↳ ";
+}
+
+svg {
+  max-height: 15px;
+}
--- a/sass/parts/_misc.scss
+++ b/sass/parts/_misc.scss
@ -0,0 +1,132 @@
+.primary-color {
+  color: var(--primary-color);
+}
+
+.draft-label {
+  color: var(--hover-color);
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-left: 6px;
+  background-color: var(--primary-color);
+}
+
+::-moz-selection {
+  background: var(--primary-color);
+  color: var(--hover-color);
+  text-shadow: none;
+}
+
+::selection {
+  background: var(--primary-color);
+  color: var(--hover-color);
+}
+
+p {
+  line-height: 1.5;
+}
+
+hr {
+  border: 0;
+  border-top: 3px solid var(--border-color);
+  margin: 1em 0;
+}
+
+blockquote {
+  border-left: 3px solid var(--primary-color);
+  color: #737373;
+  margin: 0;
+  padding-left: 1em;
+}
+
+a {
+  border-bottom: 3px solid var(--primary-color);
+  color: inherit;
+  text-decoration: none;
+
+  // Make sure the underline is at the top
+  position: relative; // needed for z-index
+  z-index: 1;
+}
+
+a.zola-anchor {
+  border-bottom: none;
+}
+
+a:hover {
+  background-color: var(--primary-color);
+  color: var(--hover-color);
+}
+
+time {
+  color: grey;
+}
+
+/* Remove post list padding */
+.list>ul {
+  margin: 0;
+  padding: 1rem 0 0 0;
+}
+
+/* Post list */
+.list-item {
+  margin-bottom: 30px;
+  list-style-type: none;
+}
+
+// change the line-through color
+del {
+  text-decoration-color: var(--primary-color);
+  text-decoration-thickness: 3px;
+}
+
+@media all and (max-width: 640px) {
+  .post-header {
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    h1 {
+      margin-top: 0;
+      // font-size: 130%;
+
+      a {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+/* Post list */
+@media all and (min-width: 640px) {
+  .post-header {
+    display: grid;
+    gap: 1rem;
+    grid-row-gap: 1.5rem;
+    grid-template-columns: auto 1fr;
+
+    h1 {
+      margin: 0;
+      font-size: 130%;
+
+      a {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+/* Remove styling from theme toggle button */
+#dark-mode-toggle {
+  border-bottom: none;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.MathJax_Display,
+.MJXc-display,
+.MathJax_SVG_Display {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
--- a/sass/parts/_note.scss
+++ b/sass/parts/_note.scss
@ -0,0 +1,88 @@
+:root {
+  --note-header-bg: var(--bg-2);
+  --note-header-color: var(--text-0);
+  --note-content-bg: var(--bg-1);
+}
+
+
+.note-container {
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 1em 0;
+  position: relative;
+  border-left: 3px solid var(--primary-color);
+  font-family: var(--paragraph-font);
+}
+
+.note-toggle,
+.note-header {
+  color: var(--note-header-color);
+  background-color: var(--note-header-bg);
+  padding: 10px 25px;
+  text-align: left;
+  border: none;
+  width: 100%;
+  position: relative;
+  outline: none;
+  font-size: 1.2em;
+  transition: background-color 0.3s ease;
+
+  p {
+    margin: 0;
+  }
+
+  .note-center {
+    text-align: center;
+    padding-right: 50px;
+  }
+
+  .note-icon,
+  .note-icon {
+    padding-left: 25px;
+  }
+}
+
+.note-toggle {
+  cursor: pointer;
+  position: relative;
+}
+
+.note-toggle::before {
+  content: '▼';
+  position: absolute;
+  right: 20px;
+  /* Position the arrow to the right */
+  top: 50%;
+  /* Center vertically */
+  transform: translateY(-50%);
+  /* Center vertically */
+}
+
+.note-toggle:hover,
+.note-toggle:focus {
+  color: var(--note-header-color);
+  background-color: var(--note-header-bg);
+  outline: none;
+}
+
+.note-content {
+  padding: 10px 20px;
+  background-color: var(--note-content-bg);
+}
+
+.note-icon::before {
+  content: '✎';
+  color: var(--primary-color);
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+summary:hover,
+summary:focus {
+  color: var(--primary-color);
+  background-color: var(--note-header-bg);
+  outline: none;
+  padding: 10px;
+}
--- a/sass/parts/_table.scss
+++ b/sass/parts/_table.scss
@ -0,0 +1,15 @@
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table th {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+  font-size: large;
+}
+
+table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
--- a/sass/parts/_tags.scss
+++ b/sass/parts/_tags.scss
@ -0,0 +1,26 @@
+.tags {
+  ul {
+    margin-left: 0;
+    padding-left: 0;
+  }
+
+  li {
+    list-style-type: none;
+  }
+
+  a {
+    border-bottom: 3px solid var(--primary-color);
+    font-family: var(--text-font);
+  }
+
+  a:hover {
+    color: var(--hover_color);
+    background-color: var(--primary-color);
+  }
+
+  a::before {
+    content: "🏷 "; /* Ensure there's a space after the emoji for spacing */
+    display: inline;
+    white-space: nowrap !important;
+  }
+}
--- a/sass/parts/_toc.scss
+++ b/sass/parts/_toc.scss
@ -0,0 +1,24 @@
+.toc-container {
+  .toc-title {
+    cursor: pointer;
+    position: relative;
+    padding-left: 20px; // Space for the arrow
+
+    &:before {
+      content: '▼'; // Down arrow
+      position: absolute;
+      left: 0;
+      transition: transform 0.3s ease; // Smooth transformation
+    }
+
+    &:hover:before,
+    &.expanded:before {
+      transform: rotate(180deg); // Arrow points up when expanded or on hover
+    }
+  }
+
+  .toc-list {
+    display: none; // ToC is hidden by default
+    // Removed transition on display, not effective
+  }
+}
--- a/sass/theme/dark.scss
+++ b/sass/theme/dark.scss
@ -0,0 +1,26 @@
+$bg-0: #121212;
+
+// Dark theme needs a bigger contrast compared to the white theme.
+$bg-1: lighten($bg-0, 5%);
+$bg-2: lighten($bg-1, 10%);
+
+$text-0: lighten($bg-0, 87%);
+$text-1: lighten($bg-0, 60%);
+
+:root.dark {
+  --text-0: #{$text-0};
+  --text-1: #{$text-1};
+
+  --bg-0: #{$bg-0};
+  --bg-1: #{$bg-1};
+  --bg-2: #{$bg-2};
+
+  --border-color: var(--bg-2);
+
+  --primary-color: #ef5350;
+  --hover-color: white;
+
+  .social>img {
+    filter: invert(1);
+  }
+}
--- a/sass/theme/light.scss
+++ b/sass/theme/light.scss
@ -0,0 +1,25 @@
+$bg-0: #fff;
+$bg-1: darken($bg-0, 2%);
+$bg-2: darken($bg-1, 8%);
+
+$text-0: darken($bg-0, 87%);
+$text-1: darken($bg-0, 60%);
+
+:root.light {
+  --text-0: #{$text-0};
+  --text-1: #{$text-1};
+
+  --bg-0: #{$bg-0};
+  --bg-1: #{$bg-1};
+  --bg-2: #{$bg-2};
+
+  --border-color: var(--bg-2);
+
+  --primary-color: #ef5350;
+  --hover-color: white;
+
+  // invert colour on hover for consistency 
+  .social :hover {
+    filter: invert(1)
+  }
+}
--- a/static/feather/moon.svg
+++ b/static/feather/moon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
--- a/static/feather/sun.svg
+++ b/static/feather/sun.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
--- a/static/fonts/.gitkeep
+++ b/static/fonts/.gitkeep
--- a/static/fonts/JetbrainsMono/JetBrainsMono-Bold.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-Bold.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-BoldItalic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-BoldItalic.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-ExtraBold.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-ExtraBold.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-ExtraBoldItalic.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-ExtraLight.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-ExtraLight.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-ExtraLightItalic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-ExtraLightItalic.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-Italic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-Italic.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-Light.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-Light.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-LightItalic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-LightItalic.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-Medium.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-Medium.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-MediumItalic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-MediumItalic.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-SemiBold.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-SemiBold.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-SemiBoldItalic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-SemiBoldItalic.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-Thin.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-Thin.ttf
--- a/static/fonts/JetbrainsMono/JetBrainsMono-ThinItalic.ttf
+++ b/static/fonts/JetbrainsMono/JetBrainsMono-ThinItalic.ttf
--- a/static/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf
+++ b/static/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf
--- a/static/fonts/SpaceGrotesk/SpaceGrotesk-Light.ttf
+++ b/static/fonts/SpaceGrotesk/SpaceGrotesk-Light.ttf
--- a/static/fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf
+++ b/static/fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf
--- a/static/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf
+++ b/static/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf
--- a/static/fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.ttf
+++ b/static/fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.ttf
--- a/static/js/codeblock.js
+++ b/static/js/codeblock.js
@ -0,0 +1,103 @@
+const successIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-check-lg" viewBox="0 0 16 16">
+            <path d="M13.485 1.85a.5.5 0 0 1 1.065.02.75.75 0 0 1-.02 1.065L5.82 12.78a.75.75 0 0 1-1.106.02L1.476 9.346a.75.75 0 1 1 1.05-1.07l2.74 2.742L12.44 2.92a.75.75 0 0 1 1.045-.07z"/>
+        </svg>`;
+const errorIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-x-lg" viewBox="0 0 16 16">
+            <path d="M2.293 2.293a1 1 0 0 1 1.414 0L8 6.586l4.293-4.293a1 1 0 0 1 1.414 1.414L9.414 8l4.293 4.293a1 1 0 0 1-1.414 1.414L8 9.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L6.586 8 2.293 3.707a1 1 0 0 1 0-1.414z"/>
+        </svg>`;
+const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-clipboard" viewBox="0 0 16 16">
+                <path d="M10 1.5a.5.5 0 0 1 .5-.5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h2a.5.5 0 0 1 .5.5V3h3V1.5zM6.5 3V2h3v1h-3zm4 0v1h2a1 1 0 0 0-1-1h-2V3zm-5 0H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5.5V3z"/>
+            </svg>`;
+
+// Function to change icons after copying
+const changeIcon = (button, isSuccess) => {
+    button.innerHTML = isSuccess ? successIcon : errorIcon;
+    setTimeout(() => {
+        button.innerHTML = copyIcon; // Reset to copy icon
+    }, 2000);
+};
+
+// Function to get code text from tables, skipping line numbers
+const getCodeFromTable = (codeBlock) => {
+    return [...codeBlock.querySelectorAll('tr')]
+        .map(row => row.querySelector('td:last-child')?.innerText ?? '')
+        .join('');
+};
+
+// Function to get code text from non-table blocks
+const getNonTableCode = (codeBlock) => {
+    return codeBlock.textContent.trim();
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Select all `pre` elements containing `code`
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            const pre = entry.target.parentNode;
+            const clipboardBtn = pre.querySelector('.clipboard-button');
+            const label = pre.querySelector('.code-label');
+
+            if (clipboardBtn) {
+                // Adjust the position of the clipboard button when the `code` is not fully visible
+                clipboardBtn.style.right = entry.isIntersecting ? '5px' : `-${entry.boundingClientRect.right - pre.clientWidth + 5}px`;
+            }
+
+            if (label) {
+                // Adjust the position of the label similarly
+                label.style.right = entry.isIntersecting ? '0px' : `-${entry.boundingClientRect.right - pre.clientWidth}px`;
+            }
+        });
+    }, {
+        root: null, // observing relative to viewport
+        rootMargin: '0px',
+        threshold: 1.0 // Adjust this to control when the callback fires
+    });
+
+    document.querySelectorAll('pre code').forEach(codeBlock => {
+        const pre = codeBlock.parentNode;
+        pre.style.position = 'relative'; // Ensure parent `pre` can contain absolute elements
+
+        // Create and append the copy button
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'clipboard-button';
+        copyBtn.innerHTML = copyIcon;
+        copyBtn.setAttribute('aria-label', 'Copy code to clipboard');
+        pre.appendChild(copyBtn);
+
+        // Attach event listener to copy button
+        copyBtn.addEventListener('click', async () => {
+            // Determine if the code is in a table or not
+            const isTable = codeBlock.querySelector('table');
+            const codeToCopy = isTable ? getCodeFromTable(codeBlock) : getNonTableCode(codeBlock);
+            try {
+                await navigator.clipboard.writeText(codeToCopy);
+                changeIcon(copyBtn, true); // Show success icon
+            } catch (error) {
+                console.error('Failed to copy text: ', error);
+                changeIcon(copyBtn, false); // Show error icon
+            }
+        });
+
+        const langClass = codeBlock.className.match(/language-(\w+)/);
+        const lang = langClass ? langClass[1] : 'default';
+
+        // Create and append the label
+        const label = document.createElement('span');
+        label.className = 'code-label label-' + lang; // Use the specific language class
+        label.textContent = lang.toUpperCase(); // Display the language as label
+        pre.appendChild(label);
+
+        let ticking = false;
+        pre.addEventListener('scroll', () => {
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    copyBtn.style.right = `-${pre.scrollLeft}px`;
+                    label.style.right = `-${pre.scrollLeft}px`;
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        });
+
+    });
+});
--- a/static/js/count.js
+++ b/static/js/count.js
@ -0,0 +1,270 @@
+// GoatCounter: https://www.goatcounter.com
+// This file (and *only* this file) is released under the ISC license:
+// https://opensource.org/licenses/ISC
+;(function() {
+	'use strict';
+
+	if (window.goatcounter && window.goatcounter.vars)  // Compatibility with very old version; do not use.
+		window.goatcounter = window.goatcounter.vars
+	else
+		window.goatcounter = window.goatcounter || {}
+
+	// Load settings from data-goatcounter-settings.
+	var s = document.querySelector('script[data-goatcounter]')
+	if (s && s.dataset.goatcounterSettings) {
+		try         { var set = JSON.parse(s.dataset.goatcounterSettings) }
+		catch (err) { console.error('invalid JSON in data-goatcounter-settings: ' + err) }
+		for (var k in set)
+			if (['no_onload', 'no_events', 'allow_local', 'allow_frame', 'path', 'title', 'referrer', 'event'].indexOf(k) > -1)
+				window.goatcounter[k] = set[k]
+	}
+
+	var enc = encodeURIComponent
+
+	// Get all data we're going to send off to the counter endpoint.
+	var get_data = function(vars) {
+		var data = {
+			p: (vars.path     === undefined ? goatcounter.path     : vars.path),
+			r: (vars.referrer === undefined ? goatcounter.referrer : vars.referrer),
+			t: (vars.title    === undefined ? goatcounter.title    : vars.title),
+			e: !!(vars.event || goatcounter.event),
+			s: [window.screen.width, window.screen.height, (window.devicePixelRatio || 1)],
+			b: is_bot(),
+			q: location.search,
+		}
+
+		var rcb, pcb, tcb  // Save callbacks to apply later.
+		if (typeof(data.r) === 'function') rcb = data.r
+		if (typeof(data.t) === 'function') tcb = data.t
+		if (typeof(data.p) === 'function') pcb = data.p
+
+		if (is_empty(data.r)) data.r = document.referrer
+		if (is_empty(data.t)) data.t = document.title
+		if (is_empty(data.p)) data.p = get_path()
+
+		if (rcb) data.r = rcb(data.r)
+		if (tcb) data.t = tcb(data.t)
+		if (pcb) data.p = pcb(data.p)
+		return data
+	}
+
+	// Check if a value is "empty" for the purpose of get_data().
+	var is_empty = function(v) { return v === null || v === undefined || typeof(v) === 'function' }
+
+	// See if this looks like a bot; there is some additional filtering on the
+	// backend, but these properties can't be fetched from there.
+	var is_bot = function() {
+		// Headless browsers are probably a bot.
+		var w = window, d = document
+		if (w.callPhantom || w._phantom || w.phantom)
+			return 150
+		if (w.__nightmare)
+			return 151
+		if (d.__selenium_unwrapped || d.__webdriver_evaluate || d.__driver_evaluate)
+			return 152
+		if (navigator.webdriver)
+			return 153
+		return 0
+	}
+
+	// Object to urlencoded string, starting with a ?.
+	var urlencode = function(obj) {
+		var p = []
+		for (var k in obj)
+			if (obj[k] !== '' && obj[k] !== null && obj[k] !== undefined && obj[k] !== false)
+				p.push(enc(k) + '=' + enc(obj[k]))
+		return '?' + p.join('&')
+	}
+
+	// Show a warning in the console.
+	var warn = function(msg) {
+		if (console && 'warn' in console)
+			console.warn('goatcounter: ' + msg)
+	}
+
+	// Get the endpoint to send requests to.
+	var get_endpoint = function() {
+		var s = document.querySelector('script[data-goatcounter]')
+		if (s && s.dataset.goatcounter)
+			return s.dataset.goatcounter
+		return (goatcounter.endpoint || window.counter)  // counter is for compat; don't use.
+	}
+
+	// Get current path.
+	var get_path = function() {
+		var loc = location,
+			c = document.querySelector('link[rel="canonical"][href]')
+		if (c) {  // May be relative or point to different domain.
+			var a = document.createElement('a')
+			a.href = c.href
+			if (a.hostname.replace(/^www\./, '') === location.hostname.replace(/^www\./, ''))
+				loc = a
+		}
+		return (loc.pathname + loc.search) || '/'
+	}
+
+	// Run function after DOM is loaded.
+	var on_load = function(f) {
+		if (document.body === null)
+			document.addEventListener('DOMContentLoaded', function() { f() }, false)
+		else
+			f()
+	}
+
+	// Filter some requests that we (probably) don't want to count.
+	goatcounter.filter = function() {
+		if ('visibilityState' in document && document.visibilityState === 'prerender')
+			return 'visibilityState'
+		if (!goatcounter.allow_frame && location !== parent.location)
+			return 'frame'
+		if (!goatcounter.allow_local && location.hostname.match(/(localhost$|^127\.|^10\.|^172\.(1[6-9]|2[0-9]|3[0-1])\.|^192\.168\.|^0\.0\.0\.0$)/))
+			return 'localhost'
+		if (!goatcounter.allow_local && location.protocol === 'file:')
+			return 'localfile'
+		if (localStorage && localStorage.getItem('skipgc') === 't')
+			return 'disabled with #toggle-goatcounter'
+		return false
+	}
+
+	// Get URL to send to GoatCounter.
+	window.goatcounter.url = function(vars) {
+		var data = get_data(vars || {})
+		if (data.p === null)  // null from user callback.
+			return
+		data.rnd = Math.random().toString(36).substr(2, 5)  // Browsers don't always listen to Cache-Control.
+
+		var endpoint = get_endpoint()
+		if (!endpoint)
+			return warn('no endpoint found')
+
+		return endpoint + urlencode(data)
+	}
+
+	// Count a hit.
+	window.goatcounter.count = function(vars) {
+		var f = goatcounter.filter()
+		if (f)
+			return warn('not counting because of: ' + f)
+
+		var url = goatcounter.url(vars)
+		if (!url)
+			return warn('not counting because path callback returned null')
+
+		var img = document.createElement('img')
+		img.src = url
+		img.style.position = 'absolute'  // Affect layout less.
+		img.style.bottom = '0px'
+		img.style.width = '1px'
+		img.style.height = '1px'
+		img.loading = 'eager'
+		img.setAttribute('alt', '')
+		img.setAttribute('aria-hidden', 'true')
+
+		var rm = function() { if (img && img.parentNode) img.parentNode.removeChild(img) }
+		img.addEventListener('load', rm, false)
+		document.body.appendChild(img)
+	}
+
+	// Get a query parameter.
+	window.goatcounter.get_query = function(name) {
+		var s = location.search.substr(1).split('&')
+		for (var i = 0; i < s.length; i++)
+			if (s[i].toLowerCase().indexOf(name.toLowerCase() + '=') === 0)
+				return s[i].substr(name.length + 1)
+	}
+
+	// Track click events.
+	window.goatcounter.bind_events = function() {
+		if (!document.querySelectorAll)  // Just in case someone uses an ancient browser.
+			return
+
+		var send = function(elem) {
+			return function() {
+				goatcounter.count({
+					event:    true,
+					path:     (elem.dataset.goatcounterClick || elem.name || elem.id || ''),
+					title:    (elem.dataset.goatcounterTitle || elem.title || (elem.innerHTML || '').substr(0, 200) || ''),
+					referrer: (elem.dataset.goatcounterReferrer || elem.dataset.goatcounterReferral || ''),
+				})
+			}
+		}
+
+		Array.prototype.slice.call(document.querySelectorAll("*[data-goatcounter-click]")).forEach(function(elem) {
+			if (elem.dataset.goatcounterBound)
+				return
+			var f = send(elem)
+			elem.addEventListener('click', f, false)
+			elem.addEventListener('auxclick', f, false)  // Middle click.
+			elem.dataset.goatcounterBound = 'true'
+		})
+	}
+
+	// Add a "visitor counter" frame or image.
+	window.goatcounter.visit_count = function(opt) {
+		on_load(function() {
+			opt        = opt        || {}
+			opt.type   = opt.type   || 'html'
+			opt.append = opt.append || 'body'
+			opt.path   = opt.path   || get_path()
+			opt.attr   = opt.attr   || {width: '200', height: (opt.no_branding ? '60' : '80')}
+
+			opt.attr['src'] = get_endpoint() + 'er/' + enc(opt.path) + '.' + enc(opt.type) + '?'
+			if (opt.no_branding) opt.attr['src'] += '&no_branding=1'
+			if (opt.style)       opt.attr['src'] += '&style=' + enc(opt.style)
+			if (opt.start)       opt.attr['src'] += '&start=' + enc(opt.start)
+			if (opt.end)         opt.attr['src'] += '&end='   + enc(opt.end)
+
+			var tag = {png: 'img', svg: 'img', html: 'iframe'}[opt.type]
+			if (!tag)
+				return warn('visit_count: unknown type: ' + opt.type)
+
+			if (opt.type === 'html') {
+				opt.attr['frameborder'] = '0'
+				opt.attr['scrolling']   = 'no'
+			}
+
+			var d = document.createElement(tag)
+			for (var k in opt.attr)
+				d.setAttribute(k, opt.attr[k])
+
+			var p = document.querySelector(opt.append)
+			if (!p)
+				return warn('visit_count: append not found: ' + opt.append)
+			p.appendChild(d)
+		})
+	}
+
+	// Make it easy to skip your own views.
+	if (location.hash === '#toggle-goatcounter') {
+		if (localStorage.getItem('skipgc') === 't') {
+			localStorage.removeItem('skipgc', 't')
+			alert('GoatCounter tracking is now ENABLED in this browser.')
+		}
+		else {
+			localStorage.setItem('skipgc', 't')
+			alert('GoatCounter tracking is now DISABLED in this browser until ' + location + ' is loaded again.')
+		}
+	}
+
+	if (!goatcounter.no_onload)
+		on_load(function() {
+			// 1. Page is visible, count request.
+			// 2. Page is not yet visible; wait until it switches to 'visible' and count.
+			// See #487
+			if (!('visibilityState' in document) || document.visibilityState === 'visible')
+				goatcounter.count()
+			else {
+				var f = function(e) {
+					if (document.visibilityState !== 'visible')
+						return
+					document.removeEventListener('visibilitychange', f)
+					goatcounter.count()
+				}
+				document.addEventListener('visibilitychange', f)
+			}
+
+			if (!goatcounter.no_events)
+				goatcounter.bind_events()
+		})
+})();
+
--- a/static/js/imamu.js
+++ b/static/js/imamu.js
@ -0,0 +1 @@
+!function(){"use strict";!function(t){var e=t.screen,n=e.width,r=e.height,a=t.navigator.language,i=t.location,o=t.localStorage,u=t.document,c=t.history,f=i.hostname,s=i.pathname,l=i.search,d=u.currentScript;if(d){var m="data-",h=d.getAttribute.bind(d),v=h(m+"website-id"),p=h(m+"host-url"),g="false"!==h(m+"auto-track"),y=h(m+"do-not-track"),b=h(m+"domains")||"",S=b.split(",").map((function(t){return t.trim()})),k=(p?p.replace(/\/$/,""):d.src.split("/").slice(0,-1).join("/"))+"/api/send",w=n+"x"+r,N=/data-umami-event-([\w-_]+)/,T=m+"umami-event",j=300,A=function(t,e,n){var r=t[e];return function(){for(var e=[],a=arguments.length;a--;)e[a]=arguments[a];return n.apply(null,e),r.apply(t,e)}},x=function(){return{website:v,hostname:f,screen:w,language:a,title:M,url:I,referrer:J}},E=function(){return o&&o.getItem("umami.disabled")||y&&function(){var e=t.doNotTrack,n=t.navigator,r=t.external,a="msTrackingProtectionEnabled",i=e||n.doNotTrack||n.msDoNotTrack||r&&a in r&&r[a]();return"1"==i||"yes"===i}()||b&&!S.includes(f)},O=function(t,e,n){n&&(J=I,(I=function(t){try{return new URL(t).pathname}catch(e){return t}}(n.toString()))!==J&&setTimeout(D,j))},L=function(t,e){if(void 0===e&&(e="event"),!E()){var n={"Content-Type":"application/json"};return void 0!==K&&(n["x-umami-cache"]=K),fetch(k,{method:"POST",body:JSON.stringify({type:e,payload:t}),headers:n}).then((function(t){return t.text()})).then((function(t){return K=t})).catch((function(){}))}},D=function(t,e){return L("string"==typeof t?Object.assign({},x(),{name:t,data:"object"==typeof e?e:void 0}):"object"==typeof t?t:"function"==typeof t?t(x()):x())};t.umami||(t.umami={track:D,identify:function(t){return L(Object.assign({},x(),{data:t}),"identify")}});var K,P,_,q,C,I=""+s+l,J=u.referrer,M=u.title;if(g&&!E()){c.pushState=A(c,"pushState",O),c.replaceState=A(c,"replaceState",O),C=function(t){var e=t.getAttribute.bind(t),n=e(T);if(n){var r={};return t.getAttributeNames().forEach((function(t){var n=t.match(N);n&&(r[n[1]]=e(t))})),D(n,r)}return Promise.resolve()},u.addEventListener("click",(function(t){var e=t.target,n="A"===e.tagName?e:function(t,e){for(var n=t,r=0;r<e;r++){if("A"===n.tagName)return n;if(!(n=n.parentElement))return null}return null}(e,10);if(n){var r=n.href,a="_blank"===n.target||t.ctrlKey||t.shiftKey||t.metaKey||t.button&&1===t.button;if(n.getAttribute(T)&&r)return a||t.preventDefault(),C(n).then((function(){a||(i.href=r)}))}else C(e)}),!0),_=new MutationObserver((function(t){var e=t[0];M=e&&e.target?e.target.text:void 0})),(q=u.querySelector("head > title"))&&_.observe(q,{subtree:!0,characterData:!0,childList:!0});var R=function(){"complete"!==u.readyState||P||(D(),P=!0)};u.addEventListener("readystatechange",R,!0),R()}}}(window)}();
--- a/static/js/main.js
+++ b/static/js/main.js
--- a/static/js/note.js
+++ b/static/js/note.js
@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('.note-toggle').forEach(function(toggleButton) {
+    var content = toggleButton.nextElementSibling;
+    var isHidden = content.style.display === 'none';
+    toggleButton.setAttribute('aria-expanded', !isHidden);
+
+    toggleButton.addEventListener('click', function() {
+      var expanded = this.getAttribute('aria-expanded') === 'true';
+      this.setAttribute('aria-expanded', !expanded);
+      content.style.display = expanded ? 'none' : 'block';
+    });
+  });
+});
+
--- a/static/js/themetoggle.js
+++ b/static/js/themetoggle.js
@ -0,0 +1,57 @@
+function setTheme(mode) {
+    localStorage.setItem("theme-storage", mode);
+}
+
+// Functions needed for the theme toggle
+// 
+
+function toggleTheme() {
+    if (localStorage.getItem("theme-storage") === "light") {
+        setTheme("dark");
+        updateItemToggleTheme();
+    } else if (localStorage.getItem("theme-storage") === "dark") {
+        setTheme("light");
+        updateItemToggleTheme();
+    }
+}
+
+function updateItemToggleTheme() {
+    let mode = getSavedTheme();
+
+    const darkModeStyle = document.getElementById("darkModeStyle");
+    if (darkModeStyle) {
+        darkModeStyle.disabled = (mode === "light");
+    }
+    
+    const sunIcon = document.getElementById("sun-icon");
+    const moonIcon = document.getElementById("moon-icon");
+    if (sunIcon && moonIcon) {
+        sunIcon.style.display = (mode === "dark") ? "inline-block" : "none";
+        moonIcon.style.display = (mode === "light") ? "inline-block" : "none";
+    }
+
+    let htmlElement = document.querySelector("html");
+    if (mode === "dark") {
+        htmlElement.classList.remove("light")
+        htmlElement.classList.add("dark")
+    } else if (mode === "light") {
+        htmlElement.classList.remove("dark")
+        htmlElement.classList.add("light")
+    }
+}
+
+function getSavedTheme() {
+    let currentTheme = localStorage.getItem("theme-storage");
+    if(!currentTheme) {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            currentTheme = "dark";
+        } else {
+            currentTheme = "light";
+        }
+    }
+
+    return currentTheme;
+}
+
+// Update the toggle theme on page load
+updateItemToggleTheme();
--- a/static/js/toc.js
+++ b/static/js/toc.js
@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const tocTitle = document.querySelector('.toc-title');
+    const tocList = document.querySelector('.toc-list');
+
+    if (tocTitle && tocList) {
+        const toggleToC = () => {
+            const isExpanded = tocList.style.display === 'block' || window.getComputedStyle(tocList).display === 'block';
+            tocList.style.display = isExpanded ? 'none' : 'block';
+            tocTitle.classList.toggle('expanded', !isExpanded);
+        };
+
+        tocTitle.addEventListener('click', toggleToC);
+    }
+});
+
--- a/static/social_icons/LICENSE
+++ b/static/social_icons/LICENSE
@ -0,0 +1 @@
+All icons in this directory are downloaded from [FontAwesome](https://fontawesome.com/). They are part of the [free offer](https://fontawesome.com/license/free) and are licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).
--- a/static/social_icons/apple.svg
+++ b/static/social_icons/apple.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>
--- a/static/social_icons/bitcoin.svg
+++ b/static/social_icons/bitcoin.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zm-141.651-35.33c4.937-32.999-20.191-50.739-54.55-62.573l11.146-44.702-27.213-6.781-10.851 43.524c-7.154-1.783-14.502-3.464-21.803-5.13l10.929-43.81-27.198-6.781-11.153 44.686c-5.922-1.349-11.735-2.682-17.377-4.084l.031-.14-37.53-9.37-7.239 29.062s20.191 4.627 19.765 4.913c11.022 2.751 13.014 10.044 12.68 15.825l-12.696 50.925c.76.194 1.744.473 2.829.907-.907-.225-1.876-.473-2.876-.713l-17.796 71.338c-1.349 3.348-4.767 8.37-12.471 6.464.271.395-19.78-4.937-19.78-4.937l-13.51 31.147 35.414 8.827c6.588 1.651 13.045 3.379 19.4 5.006l-11.262 45.213 27.182 6.781 11.153-44.733a1038.209 1038.209 0 0 0 21.687 5.627l-11.115 44.523 27.213 6.781 11.262-45.128c46.404 8.781 81.299 5.239 95.986-36.727 11.836-33.79-.589-53.281-25.004-65.991 17.78-4.098 31.174-15.792 34.747-39.949zm-62.177 87.179c-8.41 33.79-65.308 15.523-83.755 10.943l14.944-59.899c18.446 4.603 77.6 13.717 68.811 48.956zm8.417-87.667c-7.673 30.736-55.031 15.12-70.393 11.292l13.548-54.327c15.363 3.828 64.836 10.973 56.845 43.035z"/></svg>
--- a/static/social_icons/deviantart.svg
+++ b/static/social_icons/deviantart.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M320 93.2l-98.2 179.1 7.4 9.5H320v127.7H159.1l-13.5 9.2-43.7 84c-.3 0-8.6 8.6-9.2 9.2H0v-93.2l93.2-179.4-7.4-9.2H0V102.5h156l13.5-9.2 43.7-84c.3 0 8.6-8.6 9.2-9.2H320v93.1z"/></svg>
--- a/static/social_icons/diaspora.svg
+++ b/static/social_icons/diaspora.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M251.64 354.55c-1.4 0-88 119.9-88.7 119.9S76.34 414 76 413.25s86.6-125.7 86.6-127.4c0-2.2-129.6-44-137.6-47.1-1.3-.5 31.4-101.8 31.7-102.1.6-.7 144.4 47 145.5 47 .4 0 .9-.6 1-1.3.4-2 1-148.6 1.7-149.6.8-1.2 104.5-.7 105.1-.3 1.5 1 3.5 156.1 6.1 156.1 1.4 0 138.7-47 139.3-46.3.8.9 31.9 102.2 31.5 102.6-.9.9-140.2 47.1-140.6 48.8-.3 1.4 82.8 122.1 82.5 122.9s-85.5 63.5-86.3 63.5c-1-.2-89-125.5-90.9-125.5z"/></svg>
--- a/static/social_icons/discord.svg
+++ b/static/social_icons/discord.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
--- a/static/social_icons/discourse.svg
+++ b/static/social_icons/discourse.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"/></svg>
--- a/static/social_icons/email.svg
+++ b/static/social_icons/email.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
--- a/static/social_icons/ethereum.svg
+++ b/static/social_icons/ethereum.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M311.9 260.8L160 353.6 8 260.8 160 0l151.9 260.8zM160 383.4L8 290.6 160 512l152-221.4-152 92.8z"/></svg>
--- a/static/social_icons/etsy.svg
+++ b/static/social_icons/etsy.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M384 348c-1.75 10.75-13.75 110-15.5 132-117.879-4.299-219.895-4.743-368.5 0v-25.5c45.457-8.948 60.627-8.019 61-35.25 1.793-72.322 3.524-244.143 0-322-1.029-28.46-12.13-26.765-61-36v-25.5c73.886 2.358 255.933 8.551 362.999-3.75-3.5 38.25-7.75 126.5-7.75 126.5H332C320.947 115.665 313.241 68 277.25 68h-137c-10.25 0-10.75 3.5-10.75 9.75V241.5c58 .5 88.5-2.5 88.5-2.5 29.77-.951 27.56-8.502 40.75-65.251h25.75c-4.407 101.351-3.91 61.829-1.75 160.25H257c-9.155-40.086-9.065-61.045-39.501-61.5 0 0-21.5-2-88-2v139c0 26 14.25 38.25 44.25 38.25H263c63.636 0 66.564-24.996 98.751-99.75H384z"/></svg>
--- a/static/social_icons/facebook.svg
+++ b/static/social_icons/facebook.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
--- a/static/social_icons/github.svg
+++ b/static/social_icons/github.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
--- a/static/social_icons/gitlab.svg
+++ b/static/social_icons/gitlab.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/></svg>
--- a/static/social_icons/google.svg
+++ b/static/social_icons/google.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>
--- a/static/social_icons/hacker-news.svg
+++ b/static/social_icons/hacker-news.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 32v448h448V32H0zm21.2 197.2H21c.1-.1.2-.3.3-.4 0 .1 0 .3-.1.4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z"/></svg>
--- a/static/social_icons/instagram.svg
+++ b/static/social_icons/instagram.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
--- a/static/social_icons/linkedin.svg
+++ b/static/social_icons/linkedin.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
--- a/static/social_icons/mastodon.svg
+++ b/static/social_icons/mastodon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
--- a/static/social_icons/matrix.svg
+++ b/static/social_icons/matrix.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 520 520" style="enable-background:new 0 0 520 520;" xml:space="preserve">
+<path d="M13.7,11.9v496.2h35.7V520H0V0h49.4v11.9H13.7z"/>
+<path d="M166.3,169.2v25.1h0.7c6.7-9.6,14.8-17,24.2-22.2c9.4-5.3,20.3-7.9,32.5-7.9c11.7,0,22.4,2.3,32.1,6.8  c9.7,4.5,17,12.6,22.1,24c5.5-8.1,13-15.3,22.4-21.5c9.4-6.2,20.6-9.3,33.5-9.3c9.8,0,18.9,1.2,27.3,3.6c8.4,2.4,15.5,6.2,21.5,11.5  c6,5.3,10.6,12.1,14,20.6c3.3,8.5,5,18.7,5,30.7v124.1h-50.9V249.6c0-6.2-0.2-12.1-0.7-17.6c-0.5-5.5-1.8-10.3-3.9-14.3  c-2.2-4.1-5.3-7.3-9.5-9.7c-4.2-2.4-9.9-3.6-17-3.6c-7.2,0-13,1.4-17.4,4.1c-4.4,2.8-7.9,6.3-10.4,10.8c-2.5,4.4-4.2,9.4-5,15.1  c-0.8,5.6-1.3,11.3-1.3,17v103.3h-50.9v-104c0-5.5-0.1-10.9-0.4-16.3c-0.2-5.4-1.3-10.3-3.1-14.9c-1.8-4.5-4.8-8.2-9-10.9  c-4.2-2.7-10.3-4.1-18.5-4.1c-2.4,0-5.6,0.5-9.5,1.6c-3.9,1.1-7.8,3.1-11.5,6.1c-3.7,3-6.9,7.3-9.5,12.9c-2.6,5.6-3.9,13-3.9,22.1  v107.6h-50.9V169.2H166.3z"/>
+<path d="M506.3,508.1V11.9h-35.7V0H520v520h-49.4v-11.9H506.3z"/>
+</svg>
--- a/static/social_icons/paypal.svg
+++ b/static/social_icons/paypal.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z"/></svg>
--- a/static/social_icons/pinterest.svg
+++ b/static/social_icons/pinterest.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>
--- a/static/social_icons/quora.svg
+++ b/static/social_icons/quora.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M440.5 386.7h-29.3c-1.5 13.5-10.5 30.8-33 30.8-20.5 0-35.3-14.2-49.5-35.8 44.2-34.2 74.7-87.5 74.7-153C403.5 111.2 306.8 32 205 32 105.3 32 7.3 111.7 7.3 228.7c0 134.1 131.3 221.6 249 189C276 451.3 302 480 351.5 480c81.8 0 90.8-75.3 89-93.3zM297 329.2C277.5 300 253.3 277 205.5 277c-30.5 0-54.3 10-69 22.8l12.2 24.3c6.2-3 13-4 19.8-4 35.5 0 53.7 30.8 69.2 61.3-10 3-20.7 4.2-32.7 4.2-75 0-107.5-53-107.5-156.7C97.5 124.5 130 71 205 71c76.2 0 108.7 53.5 108.7 157.7.1 41.8-5.4 75.6-16.7 100.5z"/></svg>
--- a/static/social_icons/reddit.svg
+++ b/static/social_icons/reddit.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"/></svg>
--- a/static/social_icons/rss.svg
+++ b/static/social_icons/rss.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM128 416c0 35.3-28.7 64-64 64s-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
--- a/static/social_icons/skype.svg
+++ b/static/social_icons/skype.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M424.7 299.8c2.9-14 4.7-28.9 4.7-43.8 0-113.5-91.9-205.3-205.3-205.3-14.9 0-29.7 1.7-43.8 4.7C161.3 40.7 137.7 32 112 32 50.2 32 0 82.2 0 144c0 25.7 8.7 49.3 23.3 68.2-2.9 14-4.7 28.9-4.7 43.8 0 113.5 91.9 205.3 205.3 205.3 14.9 0 29.7-1.7 43.8-4.7 19 14.6 42.6 23.3 68.2 23.3 61.8 0 112-50.2 112-112 .1-25.6-8.6-49.2-23.2-68.1zm-194.6 91.5c-65.6 0-120.5-29.2-120.5-65 0-16 9-30.6 29.5-30.6 31.2 0 34.1 44.9 88.1 44.9 25.7 0 42.3-11.4 42.3-26.3 0-18.7-16-21.6-42-28-62.5-15.4-117.8-22-117.8-87.2 0-59.2 58.6-81.1 109.1-81.1 55.1 0 110.8 21.9 110.8 55.4 0 16.9-11.4 31.8-30.3 31.8-28.3 0-29.2-33.5-75-33.5-25.7 0-42 7-42 22.5 0 19.8 20.8 21.8 69.1 33 41.4 9.3 90.7 26.8 90.7 77.6 0 59.1-57.1 86.5-112 86.5z"/></svg>
--- a/static/social_icons/slack.svg
+++ b/static/social_icons/slack.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"/></svg>
--- a/static/social_icons/snapchat.svg
+++ b/static/social_icons/snapchat.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M384,32H64A64,64,0,0,0,0,96V416a64,64,0,0,0,64,64H384a64,64,0,0,0,64-64V96A64,64,0,0,0,384,32Zm-3.907,319.309-.083.1a32.364,32.364,0,0,1-8.717,6.823,90.26,90.26,0,0,1-20.586,8.2,12.694,12.694,0,0,0-3.852,1.76c-2.158,1.909-2.1,4.64-4.4,8.55a23.137,23.137,0,0,1-6.84,7.471c-6.707,4.632-14.244,4.923-22.23,5.23-7.214.274-15.39.581-24.729,3.669-3.761,1.245-7.753,3.694-12.377,6.533-11.265,6.9-26.68,16.353-52.3,16.353s-40.925-9.4-52.106-16.279c-4.657-2.888-8.675-5.362-12.543-6.64-9.339-3.08-17.516-3.4-24.729-3.67-7.986-.307-15.523-.6-22.231-5.229a23.085,23.085,0,0,1-6.01-6.11c-3.2-4.632-2.855-7.8-5.254-9.895a13.428,13.428,0,0,0-4.1-1.834,89.986,89.986,0,0,1-20.313-8.127,32.905,32.905,0,0,1-8.3-6.284c-6.583-6.757-8.276-14.776-5.686-21.824,3.436-9.338,11.571-12.111,19.4-16.262,14.776-8.027,26.348-18.055,34.433-29.884a68.236,68.236,0,0,0,5.985-10.567c.789-2.158.772-3.329.241-4.416a7.386,7.386,0,0,0-2.208-2.217c-2.532-1.676-5.113-3.353-6.882-4.5-3.27-2.141-5.868-3.818-7.529-4.98-6.267-4.383-10.65-9.04-13.4-14.245a28.4,28.4,0,0,1-1.369-23.584c4.134-10.924,14.469-17.706,26.978-17.706a37.141,37.141,0,0,1,7.845.83c.689.15,1.37.307,2.042.482-.108-7.43.058-15.357.722-23.119,2.358-27.261,11.912-41.589,21.874-52.994a86.836,86.836,0,0,1,22.28-17.931C188.254,100.383,205.312,96,224,96s35.828,4.383,50.944,13.016a87.169,87.169,0,0,1,22.239,17.9c9.961,11.406,19.516,25.709,21.874,52.995a231.194,231.194,0,0,1,.713,23.118c.673-.174,1.362-.332,2.051-.481a37.131,37.131,0,0,1,7.844-.83c12.5,0,22.82,6.782,26.971,17.706a28.37,28.37,0,0,1-1.4,23.559c-2.74,5.2-7.123,9.861-13.39,14.244-1.668,1.187-4.258,2.864-7.529,4.981-1.835,1.187-4.541,2.947-7.164,4.682a6.856,6.856,0,0,0-1.951,2.034c-.506,1.046-.539,2.191.166,4.208a69.015,69.015,0,0,0,6.085,10.792c8.268,12.1,20.188,22.313,35.454,30.407,1.486.772,2.98,1.5,4.441,2.258.722.332,1.569.763,2.491,1.3,4.9,2.723,9.2,6.01,11.455,12.153C387.821,336.915,386.269,344.7,380.093,351.309Zm-16.719-18.461c-50.313-24.314-58.332-61.918-58.689-64.749-.431-3.379-.921-6.035,2.806-9.472,3.594-3.328,19.541-13.19,23.965-16.278,7.33-5.114,10.534-10.219,8.16-16.495-1.66-4.316-5.686-5.976-9.961-5.976a18.5,18.5,0,0,0-3.993.448c-8.035,1.743-15.838,5.769-20.354,6.857a7.1,7.1,0,0,1-1.66.224c-2.408,0-3.279-1.071-3.088-3.968.564-8.783,1.759-25.925.373-41.937-1.884-22.032-8.99-32.948-17.432-42.6-4.051-4.624-23.135-24.654-59.536-24.654S168.53,134.359,164.479,139c-8.434,9.654-15.531,20.57-17.432,42.6-1.386,16.013-.141,33.147.373,41.937.166,2.756-.68,3.968-3.088,3.968a7.1,7.1,0,0,1-1.66-.224c-4.507-1.087-12.31-5.113-20.346-6.856a18.494,18.494,0,0,0-3.993-.449c-4.25,0-8.3,1.636-9.961,5.977-2.374,6.276.847,11.381,8.168,16.494,4.425,3.088,20.371,12.958,23.966,16.279,3.719,3.437,3.237,6.093,2.805,9.471-.356,2.79-8.384,40.394-58.689,64.749-2.946,1.428-7.96,4.45.88,9.331,13.88,7.628,23.111,6.807,30.3,11.43,6.093,3.927,2.5,12.394,6.923,15.449,5.454,3.76,21.583-.266,42.335,6.6,17.433,5.744,28.116,22.015,58.963,22.015s41.788-16.3,58.938-21.973c20.795-6.865,36.89-2.839,42.336-6.6,4.433-3.055.822-11.522,6.923-15.448,7.181-4.624,16.411-3.8,30.3-11.472C371.36,337.355,366.346,334.333,363.374,332.848Z"/></svg>
--- a/static/social_icons/soundcloud.svg
+++ b/static/social_icons/soundcloud.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2.8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1.6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7.6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3.1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"/></svg>
--- a/static/social_icons/spotify.svg
+++ b/static/social_icons/spotify.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>
--- a/static/social_icons/stack-exchange.svg
+++ b/static/social_icons/stack-exchange.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M17.7 332.3h412.7v22c0 37.7-29.3 68-65.3 68h-19L259.3 512v-89.7H83c-36 0-65.3-30.3-65.3-68v-22zm0-23.6h412.7v-85H17.7v85zm0-109.4h412.7v-85H17.7v85zM365 0H83C47 0 17.7 30.3 17.7 67.7V90h412.7V67.7C430.3 30.3 401 0 365 0z"/></svg>
--- a/static/social_icons/stack-overflow.svg
+++ b/static/social_icons/stack-overflow.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"/></svg>
--- a/static/social_icons/steam.svg
+++ b/static/social_icons/steam.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M496 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5v1.2L176.6 279c-15.5-.9-30.7 3.4-43.5 12.1L0 236.1C10.2 108.4 117.1 8 247.6 8 384.8 8 496 119 496 256zM155.7 384.3l-30.5-12.6a52.79 52.79 0 0 0 27.2 25.8c26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3.1-40.3-5.4-13-15.5-23.2-28.5-28.6-12.9-5.4-26.7-5.2-38.9-.6l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.8 21zm173.8-129.9c-34.4 0-62.4-28-62.4-62.3s28-62.3 62.4-62.3 62.4 28 62.4 62.3-27.9 62.3-62.4 62.3zm.1-15.6c25.9 0 46.9-21 46.9-46.8 0-25.9-21-46.8-46.9-46.8s-46.9 21-46.9 46.8c.1 25.8 21.1 46.8 46.9 46.8z"/></svg>
--- a/static/social_icons/telegram.svg
+++ b/static/social_icons/telegram.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg>
--- a/static/social_icons/twitter.svg
+++ b/static/social_icons/twitter.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
--- a/static/social_icons/vimeo.svg
+++ b/static/social_icons/vimeo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"/></svg>
--- a/static/social_icons/whatsapp.svg
+++ b/static/social_icons/whatsapp.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
--- a/static/social_icons/x-twitter.svg
+++ b/static/social_icons/x-twitter.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
--- a/static/social_icons/youtube.svg
+++ b/static/social_icons/youtube.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
--- a/templates/404.html
+++ b/templates/404.html
@ -0,0 +1,8 @@
+{% extends "page.html" %}
+
+{% block main_content %}
+    <main class="centered-header">
+        {{ post_macros::page_header(title="404")}}
+        <span>Page not found :(</span>
+    </main>
+{% endblock main_content %}
--- a/templates/cards.html
+++ b/templates/cards.html
@ -0,0 +1,35 @@
+{% extends "base.html" %}
+
+{% block main_content %}
+    {% if section.extra.section_path -%}
+        {% set section = get_section(path=section.extra.section_path) %}
+    {% endif -%}
+
+    {{ post_macros::page_header(title=section.title) }}
+
+    <main>
+        {%- if paginator %}
+            {%- set show_pages = paginator.pages -%}
+        {% else %}
+            {%- set show_pages = section.pages -%}
+        {% endif -%}
+
+        {{ post_macros::cards_posts(pages=show_pages) }}
+    </main>
+
+    {% if paginator %}
+        <ul class="pagination">
+            {% if paginator.previous %}
+                <span class="page-item page-prev">
+                    <a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
+                </span>
+            {% endif %}
+
+            {% if paginator.next %}
+                <span class="page-item page-next">
+                    <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
+                </span>
+            {% endif %}
+        </ul>
+    {% endif %}
+{% endblock main_content %}
--- a/templates/homepage.html
+++ b/templates/homepage.html
@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block main_content %}
+    {{ post_macros::home_page(section=section) }}
+{% endblock main_content %}
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@ -0,0 +1,248 @@
+{% macro list_tag_posts(pages, tag_name=false) %}
+    {% if tag_name %}
+    <div class="page-header">
+        Entries tagged :: {{ tag_name }}<span class="primary-color" style="font-size: 1.6em">.</span>
+    </div>
+    {% else %}
+    <div class="page-header">
+        All articles<span class="primary-color" style="font-size: 1.6em">.</span>
+    </div>
+    {% endif %}
+
+    <main class="list">
+    {{ post_macros::list_posts(pages=pages) }}
+    </main>
+{% endmacro %}
+
+{% macro list_posts(pages) %}
+<ul>
+    {%- for page in pages %}
+    <li class="list-item">
+    <section>
+        <div class="post-header">
+            <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+
+            <div>
+                <h1 class="title">
+                    <a href={{ page.permalink }}>{{page.title}}</a>
+
+                    {% if page.draft %}
+                    <span class="draft-label">DRAFT</span>
+                    {% endif %}
+                </h1>
+
+                <div class="meta">
+                    <div class="description">
+                        {% if page.description %}
+                        {{ page.description }}
+                        {% elif page.summary %}
+                        {{ page.summary | safe }}&hellip;
+                        {% else %}
+                        {% set hide_read_more = true %}
+                        {% endif %}
+                    </div>
+
+                    {% if not hide_read_more %}
+                    <a class="readmore" href={{ page.permalink }}>Read more ⟶</a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </section>
+  </li>
+    {% endfor -%}
+</ul>
+{% endmacro list_posts %}
+
+{% macro list_terms(terms) %}
+    <ul>
+    {%- for term in terms %}
+        <section class="list-item">
+            <h1 class="title">
+                <a href={{ term.permalink }}>{{term.name}}</a>
+            </h1>
+        </section>
+
+    {% endfor -%}
+    </ul>
+{% endmacro list_terms %}
+
+{% macro tags(page, short=false) %}
+    {%- if page.taxonomies and page.taxonomies.tags %}
+        <span class="post-tags-inline">
+            {%- if short %}
+                ::
+                {%- set sep = "," -%}
+            {% else %}
+                :: tags:&nbsp;
+                {%- set sep = "&nbsp;" -%}
+            {% endif -%}
+            {%- for tag in page.taxonomies.tags %}
+                <a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
+                {%- if not loop.last %}{{ sep | safe }}{% endif -%}
+            {% endfor -%}
+        </span>
+    {% endif -%}
+{% endmacro tags %}
+
+{% macro page_header(title) %}
+    <div class="page-header">
+        {{ title }}<span class="primary-color" style="font-size: 1.6em">.</span>
+    </div>
+{% endmacro content %}
+
+{% macro home_page(section) %}
+<main>
+    <article>
+        <section class="body">
+            {{post_macros::page_header(title=section.title)}}
+            {{ section.content | safe }}
+        </section>
+    </article>
+</main>
+{% endmacro home_page %}
+
+{% macro content(page) %}
+<main>
+    <article>
+        <div class="title">
+            {#<h1 class="title">{{ page.title }}</h1>#}
+            {{ post_macros::page_header(title=page.title) }}
+
+                <div class="meta">
+                    {% if page.date %}
+                        Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+                    {% endif %}
+
+                    {% if page.updated %}
+                        :: Updated on <time>{{ page.updated | date(format="%Y-%m-%d") }}</time>
+                    {% endif %}
+
+                    {% if page.extra.read_time %}
+                        :: <time>{{ page.reading_time }}</time> Min Read
+                    {% endif %}
+
+                    {# Inline display of tags directly after the date #}
+                    {% if page.taxonomies and page.taxonomies.tags %}
+                            <span class="tags-label"> :: Tags:</span>
+                            <span class="tags">
+                                {%- for tag in page.taxonomies.tags %}
+                                    <a href="{{ get_taxonomy_url(kind='tags', name=tag) }}" class="post-tag">{{ tag }}</a>{% if not loop.last %}, {% endif %}
+                                {% endfor %}
+                            </span>
+                    {% endif %}
+
+                    {# View the page on GitHub #}
+                    {% if page.extra.repo_view | default(value=false) %}
+                        {# Use the page's repo_url if defined, otherwise use the global edit_repo_url #}
+                        {% if page.extra.repo_url is defined %}
+                            {% set repo_url = page.extra.repo_url %}
+                        {% elif config.extra.repo_url is defined %}
+                            {% set repo_url = config.extra.repo_url %}
+                        {% else %}
+                            {% set repo_url = false %}
+                        {% endif %}
+
+                        {% if repo_url %}
+                            {% set final_url = repo_url ~ page.relative_path %}
+                            :: <a href="{{ final_url }}" target="_blank" rel="noopener noreferrer"> Source Code</a>
+                        {% endif %}
+                    {% endif %}
+
+                    {% if page.draft %}
+                        <span class="draft-label">DRAFT</span>
+                    {% endif %}
+
+                </div>
+        </div>
+
+        {% if page.extra.tldr %}
+            <div class="tldr">
+                <strong>tl;dr:</strong>
+                {{ page.extra.tldr }}
+            </div>
+        {% endif %}
+
+        {# Optional table of contents #}
+        {% if config.extra.toc | default(value=false) %}
+        {% if page.toc %}
+            <div class="toc-container">
+                <h1 class="toc-title">Table of Contents</h1>
+                <ul class="toc-list">
+                    {% for h1 in page.toc %}
+                        <li>
+                            <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+                            {% if h1.children %}
+                                <ul>
+                                    {% for h2 in h1.children %}
+                                        <li>
+                                            <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+                                        </li>
+
+                                        {% if h2.children %}
+                                            <ul>
+                                                {% for h3 in h2.children %}
+                                                    <li>
+                                                        <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
+                                                    </li>
+                                                {% endfor %}
+                                            </ul>
+                                        {% endif %}
+                                    {% endfor %}
+                                </ul>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endif %}
+        {% endif %}
+
+        <section class="body">
+            {{ page.content | safe }}
+        </section>
+    </article>
+</main>
+{% endmacro content %}
+
+{% macro cards_posts(pages) %}
+    <div class="cards">
+    {%- for page in pages %}
+        <div class="card">
+            {% if page.extra.local_image %}
+                <img class="card-image" alt={{ page.extra.local_image }} src="{{ get_url(path=page.extra.local_image) }}" />
+            {% elif page.extra.remote_image %}
+                <img class="card-image" alt={{ page.extra.remote_image }} src="{{ page.extra.remote_image }}" />
+            {% else %}
+                <div class="card-image-placeholder"></div>
+            {% endif %}
+
+            <div class="card-info">
+                <h1 class="card-title">
+                    {% if page.extra.link_to %}
+                    <a href={{ page.extra.link_to }}>{{page.title}}</a>
+                    {% else %}
+                    <a href={{ page.permalink }}>{{page.title}}</a>
+                    {% endif %}
+                </h1>
+
+                <div class="meta">
+                    {%- if page.date %}
+                        <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
+                    {% endif -%}
+                    {% if page.draft %}
+                        <span class="draft-label">DRAFT</span>
+                    {% endif %}
+                </div>
+
+                <div class="card-description">
+                    {% if page.description %}
+                        {{ page.description }}
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+    {% endfor -%}
+    </div>
+{% endmacro cards_posts %}
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@ -0,0 +1,182 @@
+{% import "macros/macros.html" as post_macros %}
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    {% if page.extra.meta %}
+         <!-- the meta data config goes here  -->
+         {% for data in page.extra.meta %}
+             <meta
+                 {% for key, value in data%}
+                     {% if key == "property" and value == "og:title"%}
+                         {% set_global page_has_og_title = true -%}
+                     {% endif %}
+                     {% if key == "property" and value == "og:description"%}
+                         {% set_global page_has_og_description = true -%}
+                     {% endif %}
+                     {% if key == "name" and value == "description"%}
+                         {% set_global page_has_description = true -%}
+                     {% endif %}
+                     {{ key }}="{{ value }}"
+                {% endfor %}
+            />
+        {% endfor %}
+    {% endif %}
+
+    {# Site title #}
+    {% set current_path = current_path | default(value="/") %}
+    {% if current_path == "/" %}
+    <title>
+        {{ config.title | default(value="Home") }}
+    </title>
+    {% if not page_has_og_title %}
+        <meta property="og:title" content="{{ config.title | default(value="Home") }}" />
+    {% endif %}
+
+    {% else %}
+    <title>
+        {% if page.title %} {{ page.title }}
+        {% elif section.title %} {{ section.title }}
+        {% elif config.title %} {{ config.title }}
+        {% else %} Post {% endif %}
+    </title>
+
+        {% if not page_has_og_title %}
+            <meta property="og:title" content="{% if page.title -%}{{ page.title }}{% elif config.title -%}{{ config.title }}{% else -%}Post{% endif -%}" />
+        {% endif %}
+     {% endif %}
+
+     {% if not page_has_og_description %}
+         {% if page.description %}
+             <meta property="og:description" content="{{ page.description }}" />
+         {% elif config.description %}
+             <meta property="og:description" content="{{ config.description }}" />
+         {% endif %}
+     {% endif %}
+
+     {% if not page_has_description %}
+         {% if page.description %}
+             <meta name="description" content="{{ page.description }}" />
+         {% elif config.description %}
+             <meta name="description" content="{{ config.description }}" />
+         {% endif %}
+    {% endif %}
+
+    {# Favicon #}
+    {% if config.extra.favicon %}
+        <link rel="icon" type="image/png" href={{ config.extra.favicon }} />
+    {% endif %}
+
+    {# Font from cdn or disk #}
+    {% if config.extra.use_cdn | default(value=false) %}
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jetbrains-mono@1.0.6/css/jetbrains-mono.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@4.5.8/index.min.css">
+    {% else %}
+        <link href={{ get_url(path="fonts.css") }} rel="stylesheet" />
+    {% endif %}
+
+    {# Analytics #}
+    {% if config.extra.analytics.enabled %}
+        {% if config.extra.analytics.umami.website_id %}
+            {% set website_id = config.extra.analytics.umami.website_id %}
+            {% set host_url = config.extra.analytics.umami.host_url | default(value="https://analytics.eu.umami.is") %}
+
+            <script>
+                (function () {
+                  var el = document.createElement('script');
+                  el.setAttribute('src', '/js/imamu.js');
+                  el.setAttribute('data-website-id', '{{ website_id }}');
+                  el.setAttribute('data-host-url', '{{ host_url }}');
+                  document.body.appendChild(el);
+                })();
+              </script>
+            <script async src="/js/imamu.js" data-website-id="{{ website_id }}" data-host-url="{{ host_url }}"></script>
+        {% endif %}
+
+        {% if config.extra.analytics.goatcounter.user %}
+            {% set user = config.extra.analytics.goatcounter.user %}
+            {% set host = config.extra.analytics.goatcounter.host | default(value="goatcounter.com") %}
+
+            <script data-goatcounter="https://{{ user }}.{{ host }}/count" async src="{{ get_url(path="js/count.js") }}"></script>
+            <noscript>
+                {# EasyList blocks '.com/count?', so we have to use '.com//count' #}
+                <img src="https://{{ user }}.{{ host }}//count?p={{ current_path }}&t={{ page.title | default(value=config.title) }}">
+            </noscript>
+        {% endif %}
+    {% endif %}
+
+    {# Fancy Codeblock #}
+    {% if config.extra.fancy_code %}
+        <script src={{ get_url(path="js/codeblock.js") }}></script>
+    {% endif %}
+
+    {# Table of contents #}
+    {% if config.extra.toc | default(value=false) %}
+        <script src={{ get_url(path="js/toc.js") }}></script>
+    {% endif %}
+    
+    {# Dynamic Note #}
+    {% if config.extra.dynamic_note | default(value=false) %}
+        <script src={{ get_url(path="js/note.js") }}></script>
+    {% endif %}
+
+    {% if config.extra.mathjax | default(value=false) %}
+        {% if config.extra.mathjax_dollar_inline_enable | default(value=false) %}
+            <script>
+            MathJax = {
+              tex: {
+                inlineMath: [['$', '$'], ['\\(', '\\)']]
+              }
+            };
+            </script>
+        {% endif %}
+        <script type="text/javascript" id="MathJax-script" async
+          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+        </script>
+    {% endif %}
+
+    {# RSS #}
+    <link rel="alternate" type="application/atom+xml" title="{{ config.title }}" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
+
+
+    {% set theme = config.extra.theme | default(value="toggle") %}
+    {% if theme == "dark" %}
+        <link rel="stylesheet" type="text/css" href="{{ get_url(path='theme/dark.css') }}" />
+    {% elif theme == "light" %}
+        <link rel="stylesheet" type="text/css" href={{ get_url(path="theme/light.css") }} />
+    {% elif theme == "auto" %}
+        <link rel="stylesheet" type="text/css" href={{ get_url(path="theme/light.css") }} />
+        <link rel="stylesheet" type="text/css" href="{{ get_url(path='theme/dark.css') }}" media="(prefers-color-scheme: dark)" />
+    {% elif theme == "toggle" %}
+        <link rel="stylesheet" type="text/css" href={{ get_url(path="theme/light.css") }} />
+        <link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ get_url(path='theme/dark.css') }}" />
+    {% endif %}
+
+    <!-- Set the correct theme in the script -->
+    <script src={{ get_url(path="js/themetoggle.js") }}></script>
+    {% if theme == "dark" %}
+        <script>setTheme("dark");</script>
+    {% elif theme == "light" %}
+        <script>setTheme("light");</script>
+    {% elif theme == "auto" %}
+        <script>
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                setTheme("dark");
+            } else {
+                setTheme("light");
+            }
+        </script>
+    {% else %}
+        <script>setTheme(getSavedTheme());</script>
+    {% endif %}
+
+    <link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css") }} />
+
+    {% if config.extra.stylesheets %}
+        {% for stylesheet in config.extra.stylesheets %}
+            <link rel="stylesheet" href="{{ get_url(path=stylesheet) }}">
+        {% endfor %}
+    {% endif %}
+</head>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
				`@ -0,0 +1 @@`
				!function(){"use strict";!function(t){var e=t.screen,n=e.width,r=e.height,a=t.navigator.language,i=t.location,o=t.localStorage,u=t.document,c=t.history,f=i.hostname,s=i.pathname,l=i.search,d=u.currentScript;if(d){var m="data-",h=d.getAttribute.bind(d),v=h(m+"website-id"),p=h(m+"host-url"),g="false"!==h(m+"auto-track"),y=h(m+"do-not-track"),b=h(m+"domains")\|\|"",S=b.split(",").map((function(t){return t.trim()})),k=(p?p.replace(/\/$/,""):d.src.split("/").slice(0,-1).join("/"))+"/api/send",w=n+"x"+r,N=/data-umami-event-([\w-_]+)/,T=m+"umami-event",j=300,A=function(t,e,n){var r=t[e];return function(){for(var e=[],a=arguments.length;a--;)e[a]=arguments[a];return n.apply(null,e),r.apply(t,e)}},x=function(){return{website:v,hostname:f,screen:w,language:a,title:M,url:I,referrer:J}},E=function(){return o&&o.getItem("umami.disabled")\|\|y&&function(){var e=t.doNotTrack,n=t.navigator,r=t.external,a="msTrackingProtectionEnabled",i=e\|\|n.doNotTrack\|\|n.msDoNotTrack\|\|r&&a in r&&r[a]();return"1"==i\|\|"yes"===i}()\|\|b&&!S.includes(f)},O=function(t,e,n){n&&(J=I,(I=function(t){try{return new URL(t).pathname}catch(e){return t}}(n.toString()))!==J&&setTimeout(D,j))},L=function(t,e){if(void 0===e&&(e="event"),!E()){var n={"Content-Type":"application/json"};return void 0!==K&&(n["x-umami-cache"]=K),fetch(k,{method:"POST",body:JSON.stringify({type:e,payload:t}),headers:n}).then((function(t){return t.text()})).then((function(t){return K=t})).catch((function(){}))}},D=function(t,e){return L("string"==typeof t?Object.assign({},x(),{name:t,data:"object"==typeof e?e:void 0}):"object"==typeof t?t:"function"==typeof t?t(x()):x())};t.umami\|\|(t.umami={track:D,identify:function(t){return L(Object.assign({},x(),{data:t}),"identify")}});var K,P,_,q,C,I=""+s+l,J=u.referrer,M=u.title;if(g&&!E()){c.pushState=A(c,"pushState",O),c.replaceState=A(c,"replaceState",O),C=function(t){var e=t.getAttribute.bind(t),n=e(T);if(n){var r={};return t.getAttributeNames().forEach((function(t){var n=t.match(N);n&&(r[n[1]]=e(t))})),D(n,r)}return Promise.resolve()},u.addEventListener("click",(function(t){var e=t.target,n="A"===e.tagName?e:function(t,e){for(var n=t,r=0;r<e;r++){if("A"===n.tagName)return n;if(!(n=n.parentElement))return null}return null}(e,10);if(n){var r=n.href,a="_blank"===n.target\|\|t.ctrlKey\|\|t.shiftKey\|\|t.metaKey\|\|t.button&&1===t.button;if(n.getAttribute(T)&&r)return a\|\|t.preventDefault(),C(n).then((function(){a\|\|(i.href=r)}))}else C(e)}),!0),_=new MutationObserver((function(t){var e=t[0];M=e&&e.target?e.target.text:void 0})),(q=u.querySelector("head > title"))&&_.observe(q,{subtree:!0,characterData:!0,childList:!0});var R=function(){"complete"!==u.readyState\|\|P\|\|(D(),P=!0)};u.addEventListener("readystatechange",R,!0),R()}}}(window)}();
				`@ -0,0 +1 @@`
				`All icons in this directory are downloaded from [FontAwesome](https://fontawesome.com/). They are part of the [free offer](https://fontawesome.com/license/free) and are licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/).`