Fix rss.xml form.

kao-banner, the CLASS, NOT element...

.gitignore

@@ -1 +1,2 @@
-
+**/target
+**/__pycache__

CODE_OF_CONDUCT.adoc

@@ -0,0 +1,128 @@
+
+= Contributor Covenant Code of Conduct
+
+== Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+== Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+== Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+== Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+== Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+mailto:olivia.a.brooks77@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+== Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+=== 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+=== 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+=== 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+=== 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+== Attribution
+
+This Code of Conduct is adapted from the
+link:https://www.contributor-covenant.org/[Contributor Covenant], version 2.1,
+available at
+link:https://www.contributor-covenant.org/version/2/1/code_of_conduct/[https://www.contributor-covenant.org/version/2/1/code_of_conduct/].
+
+Community Impact Guidelines were inspired by
+link:https://github.com/mozilla/inclusion[Mozilla's code of conduct enforcement ladder].
+
+For answers to common questions about this code of conduct, see the FAQ at
+link:https://www.contributor-covenant.org/faq/[https://www.contributor-covenant.org/faq/]. Translations are available at
+link:https://www.contributor-covenant.org/translations/[https://www.contributor-covenant.org/translations/].

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+mailto:olivia.a.brooks77@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the
+[Contributor Covenant](https://www.contributor-covenant.org/), version 2.1,
+available at
+<https://www.contributor-covenant.org/version/2/1/code_of_conduct/>.
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/inclusion).
+
+For answers to common questions about this code of conduct, see the FAQ at
+<https://www.contributor-covenant.org/faq/>. Translations are available at
+<https://www.contributor-covenant.org/translations/>.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Olivia Bridie Alexandria Millicent Ivette Brooks
+Copyright (c) 2025 Olivia Brooks
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -0,0 +1,10 @@
+# Cutieguwu Site
+
+![Transware](https://pride-badges.pony.workers.dev/static/v1?label=Transware&labelColor=%23555&stripeWidth=6&stripeColors=5BCEFA%2CF5A9B8%2CFFFFFF%2CF5A9B8%2C5BCEFA)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md)
+
+## Prelude
+
+The Cutieguwu website.
+
+With distinctly no JavaScript written by me.

SECURITY.md

@@ -0,0 +1,9 @@
+# Security Policy
+
+## Versioning
+
+I follow the [Semantic Versioning (Semver) 2.0 scheme](https://semver.org/).
+
+## Reporting a Vulnerability
+
+Please see the website's [security.txt](./src/.well-known/security.txt).

balloon.py

@@ -0,0 +1,132 @@
+from __future__ import annotations
+
+from dataclasses import dataclass
+from types import NoneType
+from typing import Optional
+from result import Result, Ok, Err
+import os
+import sys
+
+from typing import TYPE_CHECKING
+if TYPE_CHECKING:
+    from _typeshed import StrPath
+
+WORK_DIR: StrPath = os.getcwd() + '/'
+
+@dataclass
+class Tag:
+    value: str
+    trail: Optional[str]
+
+    def __post_init__(self) -> None:
+        self.trail = self.trail if (self.trail is not None) and (self.trail.strip() != '') else None
+
+    # Returns the type of tag.
+    def type(self) -> str:
+        type = str()
+
+        for c in self.value:
+            if c.isspace():
+                break
+
+            type += c
+
+        return type
+
+    def get_param(self, param: str) -> Optional[str]:
+        pos = self.value.find(param) + param.__len__() + len('="')
+
+        if pos == -1:
+            return None
+
+        param_value = str()
+
+        for idx in range(pos, (self.value.__len__() - param.__len__())):
+            param_value += self.value[idx]
+
+        return param_value
+
+    def write(self) -> str:
+        return f'<{self.value}>{self.trail if self.trail != None else ""}'
+
+@dataclass
+class HTML:
+    value: str
+
+    # Returns all tags in order in the html file.
+    def tags(self) -> list[Tag]:
+        tag = str()
+        trail: Optional[str] = str()
+        tags = list()
+        record = False
+
+        for c in self.value:
+            if c == '<' and tag != '':
+                tags.append(Tag(tag, trail))
+                tag = str()
+                trail = str()
+
+            if c == '<' or c == '>':
+                record = not record # why can't I have ! operator...
+            elif record == True:
+                tag += c
+            else:
+                trail += c
+
+        tags.append(Tag(tag, trail))
+        return tags
+
+    def inflate(self) -> Result[str, str]:
+        file = str()
+
+        for tag in self.tags():
+            if tag.type() == 'include':
+                chunk = tag.get_param('src')
+                if isinstance(chunk, NoneType):
+                    return Err('FileNotFoundError')
+
+                html = HTML(open(str(WORK_DIR) + '/src/' + chunk, 'rt').read())
+                file += html.inflate().expect('FileNotFoundError')
+            else:
+                file += tag.write()
+
+        return Ok(file)
+
+    # Convert the HTML obj into a str to write to file.
+    def write(self) -> str:
+        return self.inflate().unwrap()
+
+
+def main() -> None:
+    # If:
+    #   Incorrect number of arguments
+    #   Long help flag
+    #   Short help flag
+    if len(sys.argv) != 3 or (
+        sys.argv[0] == '--help'
+        or sys.argv[0] == '-h'
+    ):
+        help()
+        return
+
+    with open(str(WORK_DIR) + sys.argv[1], 'rt') as f:
+        html_src = HTML(f.read())
+
+    # Patch to make sure that target paths are available.
+    try:
+        os.makedirs(str(WORK_DIR) + os.path.dirname(sys.argv[2]))
+    except FileExistsError:
+        pass
+
+    with open(str(WORK_DIR) + sys.argv[2], 'w') as f:
+        f.write(html_src.write())
+
+def help() -> None:
+    print('Usage: python balloon.py [OPTIONS] <SOURCE> <DESTINATION>')
+    print()
+    print()
+    print('Options:')
+    print('-h, --help       Print help')
+
+if __name__ == '__main__':
+    main()

build.sh

@@ -0,0 +1,150 @@
+#!/usr/bin/bash
+#
+# I'm new to bash scripting, so give me a break.
+# I know that this is probably crap, but it's cheap, dirty, and does the job.
+
+green='\e[32m'
+cyan='\e[36m'
+
+src_prefix='src/'
+
+# The "a" is just to make this work if no characters are present in $@
+args=$@
+args+=('a')
+
+if [ $(expr length "$args") -gt 1 ]
+then
+    args=$@
+else
+    args='inflate style copy conv-img'
+fi
+
+# Cheap patch for copying in case the paths aren't present.
+mkdir -p target
+
+for x in $args
+do
+    files=()
+
+    target_ext=''
+    target_opt=''
+
+    if [ "$x" == 'inflate' ]
+    then
+        cmd='python balloon.py'
+
+        files=(`
+            find src -not\
+                \(\
+                    \(\
+                        -path "src/.well-known/*" -o\
+                        -path "src/feed/*" -o\
+                        -path "src/img/*" -o\
+                        -path "src/includes/*" -o\
+                        -path "src/partials/*" -o\
+                        -path "src/templates/*"\
+                    \)\
+                -prune \)\
+                -a\
+                -type f\
+                -name "*.html"\
+                -print
+        `)
+
+        target_ext='.html'
+
+        action=Inflating...
+
+    elif [ "$x" == 'style' ]
+    then
+        cmd='sass --update'
+
+        files=(`
+            find src -not\
+            \(\
+                \(\
+                    -path "src/.well-known/*" -o\
+                    -path "src/feed/*" -o\
+                    -path "src/img/*" -o\
+                    -path "src/includes/*" -o\
+                    -path "src/partials/*" -o\
+                    -path "src/templates/*"\
+                \)\
+            -prune \)\
+            -a\
+            -type f\
+            -name "*.scss"\
+            -print
+        `)
+
+        target_ext='.css'
+
+        action=Styling...
+
+    elif [ "$x" == 'copy' ]
+    then
+        mkdir -p target/.well-known
+        mkdir -p target/feed
+
+        cp 'src/feed/rss.xml' 'target/feed/rss.xml'
+        cp 'src/robots.txt' 'target/robots.txt'
+        cp 'src/.well-known/security.txt' 'target/.well-known/security.txt'
+
+        action=Copying...
+
+    elif [ "$x" == 'conv-img' ]
+    then
+        cmd='cwebp -z 9 -m 6'
+
+        files=(`find src/img -type f`)
+
+        target_ext='.webp'
+        target_opt='-o'
+
+        mkdir -p target/img/blog/posts
+
+        action='Converting Images...'
+
+    elif [ "$x" == 'clean' ]
+    then
+        echo -e "$green"Cleaning...
+
+        rm -Rv target
+
+        break
+
+    else
+        echo -e "$green"Usage:"$cyan" build.sh [OPTIONS] [COMMAND]
+        echo
+        echo -e "$green"Options:"$cyan"
+        echo '  -h, --help          Print help'
+        echo
+        echo
+        echo -e "$green"Commands:"$cyan"
+        echo '  conv-img            Convert images to target'
+        echo '  copy                Copy assets to target'
+        echo '  inflate             Inflate the HTML source'
+        echo '  style               Compile SCSS to CSS'
+
+        echo
+        echo '  clean               Wipe the target directory'
+
+        break
+    fi
+
+    echo -e "$green$action"
+
+    for src in "${files[@]}"
+    do
+        filename=$(basename $src)
+        path="${src//$src_prefix}"
+        path="${path//$filename}"
+        target="target/$path${filename%.*}$target_ext"
+
+        echo -e "$cyan  $src -> $target"
+
+        eval "$cmd $src $target_opt $target"
+    done
+done
+
+echo -e "$green"Done.

errors/400.html

@@ -1,86 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>400 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>400</h1>
-            <h2>Bad Request!</h2>
-            <hr />
-            <p>
-                The server cannot or will not process this request due to apparent client-side error
-                or deception.
-            </p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/401.html

@@ -1,81 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>401 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>401</h1>
-            <h2>Unauthorized!</h2>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/403.html

@@ -1,83 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>403 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>403</h1>
-            <h2>Forbidden!</h2>
-            <hr />
-            <p>The server is refusing to act upon your request.</p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/404.html

@@ -1,81 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>404 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>404</h1>
-            <h2>Page not found!</h2>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/500.html

@@ -1,83 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>500 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>500</h1>
-            <h2>Internal Server Error!</h2>
-            <hr />
-            <p>The server has no clue WTF happened here.</p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/501.html

@@ -1,83 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>501 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>501</h1>
-            <h2>Not Implemented!</h2>
-            <hr />
-            <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/502.html

@@ -1,83 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>502 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>502</h1>
-            <h2>Bad Gateway!</h2>
-            <hr />
-            <p>This service may be offline.</p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/503.html

@@ -1,83 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>503 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>503</h1>
-            <h2>Service Unavailable!</h2>
-            <hr />
-            <p>The server may be overloaded or down for maintenance.</p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

errors/504.html

@@ -1,86 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>504 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="error_pane">
-            <h1>504</h1>
-            <h2>Gateway Timeout!</h2>
-            <hr />
-            <p>
-                The server acted as a proxy and didn't receive a timely response from the upstream
-                server.
-            </p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

index.html

@@ -1,82 +0,0 @@
-<!doctype html>
-<html lang="en-ca">
-    <head>
-        <meta charset="utf-8" />
-
-        <title>Home | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
-        <meta name="keywords" content="cutieguwu" />
-    </head>
-    <body class="viewport">
-        <nav class="nav_pane">
-            <h2 class="nav_logo">Cutieguwu</h2>
-
-            <ul class="nav_menu">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">About</a>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title" href="#">Minecraft</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="#">Bearock SMP</a>
-                        <a class="nav_title" href="#">Rebirth SMP</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-                        <a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
-                        <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-                        <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-                    </div>
-                </li>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
-        </nav>
-        <div class="main_pane">
-            <p>lorem ipsum etc idk what else there is in this latin phrase</p>
-        </div>
-        <script
-            type="module"
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
-        ></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
-    </body>
-</html>

src/.well-known/public.asc

@@ -0,0 +1,13 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+xjMEaNawyhYJKwYBBAHaRw8BAQdARXZA94pLJ9NqMFGi2g4mgC+JhsDccsjC5YZL
+FFrXyVfNK09saXZpYSBCcm9va3MgPG9saXZpYS5hLmJyb29rczc3QGdtYWlsLmNv
+bT7CiQQTFggAMRYhBNHb+MmfTznTILS7fUanaquYTswnBQJo1rDKAhsDBAsJCAcF
+FQgJCgsFFgIDAQAACgkQRqdqq5hOzCdoOQEAwF3dlYsoaiAKuD1xv2R45QAWobHG
+hI41JuUnAGPHWh4BAPilFDXQv3PbYOIS/fVqrNVZI9ZPbNpT0ZlQeLCFm48AzjgE
+aNawyxIKKwYBBAGXVQEFAQEHQPMiRn06nv5gWZNYHjtKmshLWKlcnwOcOH1WRWE7
+VREvAwEIB8J4BBgWCAAgFiEE0dv4yZ9POdMgtLt9Rqdqq5hOzCcFAmjWsMsCGwwA
+CgkQRqdqq5hOzCfc9wD5AV4m9zFPoipKQNfZpll62bdI9zdtAT3QYS5XzwGCz1EA
+/1Km4cYgieqk10A7X1Zpz2tP5miNyaAW48D5QiWd7GUD
+=jPqw
+-----END PGP PUBLIC KEY BLOCK-----

src/.well-known/security.txt

@@ -0,0 +1,5 @@
+Contact: mailto:olivia.a.brooks77@gmail.com
+Encryption: https://www.cutieguwu.ca/.well-known/public.asc
+Acknowledgments: https://www.cutieguwu.ca/acknowledgements.html
+Preferred-Languages: en, fr
+Expires: 2027-01-01T04:00:00.000Z

src/about.html

@@ -0,0 +1,29 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>About | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">About</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/acknowledgements.html

@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Acknowledgements | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Acknowledgements</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body">
+                <p>There are currently no acknowledgements</p>
+                <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
+                <p>
+                    I will get my thanks to various open projects in here in time, but I'm still
+                    busy getting the basics handled.
+                </p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Blog | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body">
+                <header>
+                    <h1 class="title">Blog</h1>
+                    <p class="date">Last Edited: 03 August, 2025</p>
+                </header>
+                <div class="body">
+                    <h2>I have an RSS feed!</h2>
+                    <p>Just look for the RSS Quick Link in the Navigation pane.</p>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/0_divergent_pathways.html

@@ -0,0 +1,123 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Divergent Pathways | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog - Divergent Pathways</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane blog">
+            <div class="body">
+                <header>
+                    <h1 class="title">Divergent Pathways</h1>
+                    <p class="date">Posted: 29 July, 2025</p>
+                    <p class="date">Last Edited: 29 July, 2025</p>
+                </header>
+                <div class="body">
+                    <p>I can't say that this is how I wanted to start my blog.</p>
+                    <p>
+                        Although, in all honesty, I didn't really have an idea for how I wanted it
+                        to start. That's not to say I didn't know what I *didn't* want. A
+                        meaningless 'Welcome to my Blog' filled with my hopes and aspirations that
+                        inevitably would never come to light was something I knew I didn't want. I
+                        figured it more likely for me to have a semi-respectful rant about
+                        whatever's causing me to 'crash out' on that particular day. That would
+                        certainly be in character for me.
+                    </p>
+                    <p>
+                        But no. Instead, I'm starting my blog on one of the last things I ever
+                        expected to write about.
+                    </p>
+                    <p>Love.</p>
+                    <p>Or rather, the passing of it due to life.</p>
+                    <p>
+                        I've been in two relationships now. Both ended mutually, although what I
+                        consider mutual may not be everyone else's. We came to see the same side of
+                        things, and we understood that we couldn't sustain our lives together. We're
+                        all still friends at the end.
+                    </p>
+                    <p>
+                        Me and my ex-boyfriend were struggling a lot with being able to see each
+                        other. It's not like this relationship was geographically long distance; we
+                        went to the same school. The distance came more from our schedules and
+                        pathways. I have always been a relatively heavy academic. My parents and
+                        teachers certainly made sure of that, and ultimately helped lead me down a
+                        path of being the teacher's pet. Maybe I'll talk about my experiences and
+                        struggles related to that another time, but the short of it is that I am a
+                        high-achieving workaholic as a result. My ex-boyfriend on the other hand,
+                        didn't have that kind of an experience, and ultimately was led down the
+                        college-level course stream in high school.
+                    </p>
+                    <p>
+                        Now, as I began to struggle in my fourth year, particularly with my
+                        mathematics continuing their downwards trend, I decided that the life of a
+                        software engineer wasn't for me. I turned around, almost on a dime, and set
+                        myself towards a career in Psychology. Now, on the surface, this may look
+                        like it would help with our scheduling issues, but no. While I was studying
+                        at school, and desperately trying to keep up my grades, my boyfriend would
+                        be doing a co-op elsewhere. Even when that ended at the end of the term, the
+                        problem remained. I was too much of a workaholic.
+                    </p>
+                    <p>
+                        Ultimately, the break-up that I've just had has left me intent on not
+                        spiralling downward. My first was rough on me, and I was not in a good place
+                        for about a week. This time, we both kind of saw this coming. Perhaps that
+                        makes it easier, but it still sucks for both of us. And, why squander the
+                        motivation I have to better my self care, my habits, and thus myself? I'm
+                        about to go into my first year of university. Normally, I'm either scared of
+                        my inevitable death, or some past regret of my life that chooses to grip me.
+                        But now, I'm also anxious for the life ahead.
+                    </p>
+                    <p>
+                        So what does this all mean in terms of dating for me? Well, it leaves me
+                        considering the idea that some people are meant to walk through life alone.
+                        I'm at a point in my life where dating is probably not a great idea for me.
+                        I struggle enough with burnout spells that adding heartbreak on top would
+                        likely kill my education.
+                    </p>
+                    <p>
+                        On top of that are my concerns with online dating. Aside from data privacy,
+                        breaches, and otherwise disgusting people who can't leave these projects to
+                        be a good part of the internet, are the risks with being trans. There are
+                        far too many stories, even if most of them are probably from the US, of
+                        people 'trying it out' with a trans person. Ignoring how slimy and
+                        disgusting you have to be to even do that without considering the effects of
+                        those actions, the point of dating is for love (and to meet societal
+                        expectations while seeking a dual income for the household, among other
+                        things).
+                    </p>
+                    <p>
+                        To make it extra clear, love != sex. The point at the end of it isn't so you
+                        can run home and shag every night--this isn't some 1960s Bond film.
+                    </p>
+                    <p>
+                        If you want to have kids, some trans people who are on HRT, may still be
+                        able to if they've gone to the really awkward and expensive effort of
+                        cryopreservation.
+                    </p>
+                    <p>
+                        Anyway, being someone who was a 'test run' is crushing. I certainly don't
+                        want to run that risk, and other people are in the same boat.
+                    </p>
+                    <p>Given all this, I'll probably tough it out on my own for a while.</p>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/1_unsure_u.html

@@ -0,0 +1,121 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Unsure U. | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog - Unsure U.</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane blog">
+            <div class="body">
+                <header>
+                    <h1 class="title">Unsure U.</h1>
+                    <p class="date">Posted: 09 August, 2025</p>
+                    <p class="date">Last Edited: 09 August, 2025</p>
+                </header>
+                <div class="body">
+                    <img
+                        alt="A Coaster which reads 'focus on the good,' placed in front of a window."
+                        src="/img/blog/posts/1_unsure_u.webp"
+                    />
+                    <p>The little things, it's the little things that count.</p>
+                    <p>Or so I'm told.</p>
+                    <p>
+                        All around me, all my friends are super excited for university, or college,
+                        or appreticeship, or--post-secondary in general. They're excited about
+                        meeting new [like-minded] people, clubs, increased autonomy, the future
+                        promises of post-secondary education, and of course, parties (within
+                        reason). They look to the hopeful side of things.
+                    </p>
+                    <p>
+                        Now, I have this set of coasters which I got a year or so ago at a local
+                        market. They're meant to keep me in a more positive headspace, but half the
+                        time they're covered up by drinks... Anyway, one of them advises me to
+                        "focus on the good".
+                    </p>
+                    <p>
+                        And boy, do I try hard to do that. But without a job, I'm left to my
+                        hyperfixation and burnout routine. If I'm lucky, I just start going a bit
+                        stir-crazy from sitting in my room, doing things that I consider productive,
+                        with only the occasional break for the loo and another cup of bean juice.
+                        Then, it's back to work, dawn until dinner, then maybe I'll play a game
+                        briefly, but not until working some more.
+                    </p>
+                    <p>
+                        There are of course plenty of things that I'd like to blame for why I'm like
+                        this, but that's not the purpose of this post, nor more than speculation.
+                    </p>
+                    <p>
+                        Anyway, I'm currently writing this in a cheerful little café after an
+                        appointment so that I take a break to process, and perhaps understand, some
+                        emotions, while taking in this little thing. So, back to university, since
+                        that's my academic trajectory.
+                    </p>
+                    <p>I'm terrified.</p>
+                    <p>
+                        I've struggled a lot to plan and get course selections which will allow me
+                        to fulfill my degree, only to fail rather badly. Seriously, I will probably
+                        do poorly in philosophy, and it doesn't help me with just about any of my
+                        requirements. On top of that, I'm worried about the teachers that I'll get.
+                        It was bad enough in grade 5, and I'd had a few years to anticipate that
+                        teacher. In university, I have no knowledge going into first year. The best
+                        resource I have is something like RateMyProf which honestly kinda sucks and
+                        probably makes things worse unless there's a resoundingly poor overall
+                        rating.
+                    </p>
+                    <p>
+                        That's not to say that all of my course selections are bad; I still have the
+                        ones within the interest of my degree and some in my hobbies, that also
+                        contribute directly to the degree. One friend and I were also able to get
+                        some courses together since I had to take them, and they wanted to. This may
+                        sound silly given the struggles with course availabilities, but I promise
+                        these decisions were made following a lot of logical consideration of both
+                        of our degrees' completion.
+                    </p>
+                    <p>
+                        Another concern is the fact that I know so little, and I get my orientation
+                        the day before I need to use it... that's not a lot of time to figure out if
+                        you're missing something. That then contributes to my concerns about being
+                        able to move around campus fast enough to not miss classes, on top of the
+                        fatigue that I'll have from waking up at 5h30.
+                    </p>
+                    <p>
+                        Finally, because otherwise I could keep going on, are my concerns regarding
+                        the ever-shoved-down-our-gullets AIs. I write oddly. This blog, my poetry,
+                        and all of my past essays and analyses. My teachers can attest, especially
+                        my grade 9 & 12 English teacher who had to consult two other teachers and
+                        myself to fully understand
+                        <a href="https://gitea.cutieguwu.ca/cutieguwu/falling_down_building_up"
+                            >Building Up</a
+                        >, a poem I wrote with the rust programming language for symbology.
+                    </p>
+                    <p>
+                        The concerns about having to prove that I don't use AI were bad enough in
+                        High School. Universities have far more strict policies, which likely
+                        utilize a guilty until proven innocent model.
+                    </p>
+                    <p>
+                        At the end of the day, I'm trying to take in the little things and not worry
+                        too much.
+                    </p>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/2_buyers_anxiety.html

@@ -0,0 +1,162 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Buyer's Anxiety | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog - Buyer's Anxiety</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane blog">
+            <div class="body">
+                <header>
+                    <h1 class="title">Buyer's Anxiety</h1>
+                    <p class="date">Posted: 11 September, 2025</p>
+                    <p class="date">Last Edited: 14 September, 2025</p>
+                </header>
+                <div class="body">
+                    <img
+                        alt="Katie's old laptop, seated upon her clean desk, struggling on. Although, you can't tell how broken the hinge is or the parts that her kitten chewed. I swear, it's in worse condition than it looks."
+                        src="/img/blog/posts/2_buyers_anxiety.webp"
+                    />
+                    <p>
+                        I can't say that I'm thrilled that my blog posts have only been when I'm
+                        down or struggling with something. But, here we are: the third one.
+                    </p>
+                    <p>
+                        I'm stuck with an internal conflict. It feels like remorse, but before the
+                        poor choice has happened, as opposed to fear? But it is fear.
+                    </p>
+                    <p>
+                        It's no secret that I love my Framework 16, the company's values, and Linux.
+                    </p>
+                    <p>I also want to support my friends whenever and however I can.</p>
+                    <p>But what if those two things clash?... Spoiler: they have.</p>
+                    <p>
+                        To preface this whole thing, my friend is looking for a new laptop. She
+                        bought her old one because it was in her price range. Four years later,
+                        it's... struggling. The enshittification of the tech industry took hold, one
+                        hinge died a couple years ago, the whole body is weak, the system is
+                        relatively underpowered for her needs, and it's not going to survive
+                        university in any good condition, if even that. As a two-time published
+                        author, she needs to be able to type and open this system a lot. That means
+                        a good keyboard and good hinges. She also wants to play Minecraft, Roblox,
+                        and probably Uno on it too. Thus, GPU demands aren't high and she'll want at
+                        least a 15" display. She treats her devices well and cares for their
+                        longevity.
+                    </p>
+                    <p>
+                        To me, this sounds like a great place for a Framework laptop. Expensive
+                        upfront, sure. But the 16" model has an iGPU that runs Minecraft and Roblox
+                        just fine, has a super easy to replace input module system to replace the
+                        keyboard, good hinges, a CPU that's total overkill (even for the stuff I do;
+                        I wanted a six-core), and it wears like a tank. A guy at our high school
+                        proved that unintentionally. I have the dent in the lid and the pristene
+                        display to prove it. It also has some added benefits, like the hardware
+                        switches for the camera and mic, overall modular design, repairability, and
+                        the upgrade paths, which save her from spending more money to buy a full
+                        tower or another laptop. Framework recently announced the new generation
+                        boards for the FW 16, and knocked down the price of the 7040 series boards
+                        slightly, but that's a nice-to-have. Even if you're a non-techie, you won't
+                        need to get into the hardware unless you're building it or repairing
+                        something, and Framework's guides have only gotten better. Even when trying
+                        to replace the liquid metal, or solve an issue that I thought was a loose
+                        display cable (it was a linux software issue of some kind), the guides got
+                        me through the wholly unknown to me.
+                    </p>
+                    <p>This makes it sound perfect.</p>
+                    <p>
+                        The downside? Well, I feel like I'm just succumbing to brand loyalty. A
+                        total shill. The whole above paragraph sounds like a sales pitch without the
+                        company's values explicitly spouted. The one thing I envy of Apple fans, is
+                        their ability to convince others that Apple is great and feel no conflict.
+                    </p>
+                    <p>
+                        Is this what a parent feels like when buying for a child? Probably not?
+                        After all, the child likely isn't knowledgeable upon the context, or doesn't
+                        care enough to question the rationale leading to the purchase. But here, I'm
+                        buying for a friend. Someone smart (Before someone starts, I'm not saying
+                        that a child can't be smart or that the rest of my friends are dumb). Sure,
+                        she's not a techie the way I am, but she is more than capable of questioning
+                        things for herself. What's the price? What's the rationale? Are you just
+                        pushing me into an ecosystem that you love? Are you buying my friendship?
+                        ...and so on down the rabbit hole my train of thought hops.
+                    </p>
+                    <p>
+                        I've already convinced two friends to try Linux, but their hardware and
+                        personal needs caused too many problems. I also convinced a family member of
+                        mine, who was an Apple fan, to shift to a Framework 13 running Linux.
+                    </p>
+                    <p>
+                        I feel like a manipulator. I left my proud, cheerful "switch to Linux"
+                        chanting phase a while ago. But did I really? Am I so moral-driven that I'm
+                        blind? Is this really a selfless gift to a friend? Is this because I'm
+                        afraid of losing my friends? Or do I subconciously hold an agenda to migrate
+                        everyone to Framework and Linux? As stupid as it sounds, I mean this
+                        literally.
+                    </p>
+                    <p>
+                        Even if you consider the idea that "only a good person would think like
+                        that, because a bad person would know it," it doesn't help.
+                    </p>
+                    <p>
+                        To make things worse again, I've long spouted buying something with the
+                        intent to run it long term, instead of buying a bunch of cheap somethings
+                        that die super fast. My previous laptop, which I got from my father, ran for
+                        nearly 12 years before the display started dying; now it's a server. So
+                        imagine a teenager with that kind of a background in keeping a computer
+                        running for so long, sees a 3-year old laptop already in a far worse
+                        condition than their 10/11-year old one (with comparable specs). I was that
+                        teenager, and I started a "joke" once I got my new laptop, about it's easily
+                        replaceable hinges... and so on. Of course, I was prideful in a sense, and I
+                        kept that "joke" going too long... So how will it look when the laptop who's
+                        death I foretold gets replaced by the exact laptop that it was compared to?
+                        (Assuming that I didn't start the "joke" about the purchase decisions, age,
+                        and condition of my previous one.)
+                    </p>
+                    <p>
+                        The only consolation I get for now, is that I have a few days to see how
+                        Katie likes the FW 13, which is loaned off the aforementioned family member
+                        of mine. The trouble, because of course there's more, is that I need to
+                        discern between her impressions of the computer, and the OS, since it's
+                        Manjaro Linux. Because of that, my plan is to dual boot the gifted system.
+                        That way she can finish her computer science stuff in the same environment,
+                        and then decide whether or not to scrap the Linux partition.
+                    </p>
+                    <p>
+                        Of course, as always, my troubles start just after having had a counselling
+                        session. So, I'm left to deal with this myself for a few weeks.
+                    </p>
+                    <p>Sometimes I wonder why things can't just be simple for me in life...</p>
+                    <hr />
+                    <p>
+                        Now, as a note, I'm not saying that Framework is perfect. They've had, and
+                        continue to have, their issues. The difference is that they actually listen
+                        and work on them. The guides, the incorrect QR codes, the support system,
+                        FW16 keyboard deflection, late UEFI updates, the FW16 keyboard wake-up issue
+                        with the screen closed, the first-gen display expansion cards power draw
+                        issue, and so on. And sure, they can be slow. But they're small, and they
+                        try to do it right the first time. They release the software and hardware
+                        patches to affected systems, and listen on to further critique in the
+                        interest of improving.
+                    </p>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/3_closing_chapters.html

@@ -0,0 +1,142 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Closing Chapters | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog - Closing Chapters</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane blog">
+            <div class="body">
+                <header>
+                    <h1 class="title">Closing Chapters</h1>
+                    <p class="date">Posted: 18 December, 2025</p>
+                    <p class="date">Last Edited: 18 December, 2025</p>
+                </header>
+                <div class="body">
+                    <p>
+                        I'm not sure why I'm suddenly writing another blog post. Particularly when I
+                        still have an exam to do, for which I need to read two chapters of the
+                        textbook.
+                    </p>
+                    <p>
+                        Perhaps it's because I've just come out of a counselling session, and once
+                        again, find something I need to talk about <em>after</em> it's finished.
+                    </p>
+                    <p>
+                        Perhaps it's because I feel a need to prove to myself that I'm still a good
+                        writer, even if I barely pass my Creative Writing course...
+                    </p>
+                    <p>
+                        Maybe it's because I'm just generally tired but I've been awake long enough
+                        that I've progressed into my first period of creative brain waves. Yes,
+                        apparently that's a thing.
+                    </p>
+                    <p>
+                        Anyway, this post's idea stems from the sentiments I've been experiencing
+                        since graduating high school.
+                    </p>
+                    <p>
+                        I feel like I keep wanting to run back to my childhood, as awful as it was
+                        in many respects. It's not just my overwhelming fear of death, and general
+                        existential dread, it's my nostalgia.
+                    </p>
+                    <p>
+                        Yesterday, I went to see my old high school band and jazz band perform their
+                        annual Holiday Concert. It was great getting to see my old buddies, have a
+                        couple laughs while berating the Audio-Visual equipment team for their awful
+                        cable management in the few months that I've been gone now.
+                    </p>
+                    <p>
+                        But, as I listened to them play the biggest set list the band has done since
+                        the pandemic, I found myself melancholy. I wanted to be back with them,
+                        playing in the pink lighting, learning solos that I couldn't as a result of
+                        COVID, setting up equipment, taping cables down to comply with safety
+                        policies, digging into the hows and whys of DMX-512, managing my old tech
+                        team, shooting the shit.
+                    </p>
+                    <p>I can't really do that now.</p>
+                    <p>
+                        Picking up the hobbies again, joining a music group on Campus, finding an
+                        A/V equipment team to join... it just wouldn't be the same.
+                    </p>
+                    <p>
+                        I have more demanding courses to come, and I just don't have the time
+                        anymore. I, like many others, already treat the Carleton Cybersecurity Club
+                        as an extra course.
+                    </p>
+                    <p>The workshops; our lectures.</p>
+                    <p>The weekly challenges; our quizzes and textbook readings.</p>
+                    <p>The competitions; our midterms.</p>
+                    <p>
+                        After my showing in the past semester alone, it's likely that I'll take on
+                        running a couple workshops in the future.
+                    </p>
+                    <p>
+                        I can keep going back to the band's events, and catch up with old profs
+                        during reading week, but for how long?
+                    </p>
+                    <p>
+                        How long until everyone has moved on? How long until all the staff rotate,
+                        and nothing but the U-shape of the building remains?
+                    </p>
+                    <p>
+                        Even if I step back and question why, why am I so attached to these
+                        memories, I don't know.
+                    </p>
+                    <p>
+                        I know a lot of people who, like myself, left this school having experienced
+                        the absolute worst periods of their life.
+                    </p>
+                    <p>They never went back. Not for anything.</p>
+                    <p>
+                        But I'm practically desperate to return, to jump back in time to grade 9 and
+                        fuck everything up again, run through depression, experience the worst days
+                        of my dysphoria, and tolerate every bitch and asshole who decided to spend
+                        their time splinkling on a bit more shit all the while.
+                    </p>
+                    <p>
+                        I've run out of things to say at this point. I wish this was better
+                        structured than just a brain dump, but I'm too tired and emotional to work
+                        on it further.
+                    </p>
+                    <p>
+                        So, with the loss of my non-existent PG-13 rating, I shall conclude this
+                        post, and begin [hopefully] immediately on another post that will outline
+                        what I hope to do over the winter break, and what posts I hope to have lined
+                        up.
+                    </p>
+                    <p>
+                        So, to my only reader, stay tuned! I want to get out of the doom and gloom
+                        real soon.
+                    </p>
+                    <hr />
+                    <p>
+                        OKAY, so, as per usual, I know a guy, FOR EVERYTHING. He's directed me
+                        towards contacting another guy on campus who works with A/V stuff. So, maybe
+                        I can find a way to keep that chapter open, despite everything else I have
+                        going on these days. It also seems that there might be a way to take an
+                        elective course that looks into A/V equipment. I will have to hunt around
+                        and see if I can fit that into my program
+                    </p>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/4_pointless_plans.html

@@ -0,0 +1,149 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Pointless Plans | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog - Pointless Plans</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane blog">
+            <div class="body">
+                <header>
+                    <h1 class="title">Pointless Plans</h1>
+                    <p class="date">Posted: 18 December, 2025</p>
+                    <p class="date">Last Edited: 18 December, 2025</p>
+                </header>
+                <div class="body">
+                    <p>
+                        So... remember my first post where I said that "a meaningless 'Welcome to my
+                        Blog' filled with my hopes and aspirations that inevitably would never come
+                        to light was something I knew I didn't want." Well...
+                    </p>
+                    <p>
+                        I've been stuck in a doom and gloom phase here, and with me hopefully
+                        concluding my counselling soon, I definitely don't want to dwell in it.
+                    </p>
+                    <p>
+                        As a result, I'm making a little list of things that I'd love to write
+                        about, and that you can hopefully expect to read about sometime soon!
+                    </p>
+                    <ul>
+                        <li>
+                            <p>CyberSci</p>
+                            <ul>
+                                <li>
+                                    I had the fortune to participate at the Regional level,
+                                    representing Carleton University. (Spoiler: We won, barely)
+                                </li>
+                                <li>
+                                    This will probably have a follow up once Nationals happens in
+                                    the summer.
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <p>Creative Writing Work</p>
+                            <ul>
+                                <li>
+                                    I've written some good things and some really bad things for the
+                                    Creative Writing course this term. Obviously, I'll only publish
+                                    works that I believe are well polished.
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <p>Poetry</p>
+                            <ul>
+                                <li>
+                                    I want to get back to writing poetry, but for now I have some
+                                    things that are still unpublished.
+                                </li>
+                                <li>
+                                    They're nothing like Building Up, so if you can't read [bad]
+                                    Rust, don't worry. They're also far less whacky than Falling
+                                    Down.
+                                </li>
+                                <li>
+                                    <a
+                                        href="https://gitea.cutieguwu.ca/cutieguwu/falling_down_building_up"
+                                        >Falling Down & Building Up</a
+                                    >
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                    <p>
+                        Also, I've come to realise that I have a thing for memoirs. I never actually
+                        realised it because I usually read book series, but I now have four memoirs
+                        in my library.
+                    </p>
+                    <ol>
+                        <li>
+                            <em>Fatty Legs</em> by Christy Jordan-Fenton and Margaret Pokiak-Fenton
+                        </li>
+                        <li>its sequel, <em>A Stranger At Home</em></li>
+                        <li><em>The Glass Castle</em> by Jeannette Walls</li>
+                        <li><em>Tomboy Survival Guide</em> by Ivan Coyote</li>
+                    </ol>
+                    <p>
+                        So, after a creative non-fiction flash writing assignment just didn't work
+                        out well, even after reworking it heavily for the exam, I decided that I
+                        should actually take it in the direction of a full memoir, rather than the
+                        poetic form that it currently has.
+                    </p>
+                    <p>
+                        The problem is that I mean, a <em>full</em> memoir. And the problem with
+                        that is that memory is a complex thing. Many important and relevant things
+                        for a memoir are episodic, iconic, flashbulb memories, which can be
+                        difficult to just retrieve on the spot. (Yes, I referenced my textbook, no I
+                        am not a credible source for interpreting this information.)
+                    </p>
+                    <p>
+                        A lot of the time, my writing, particularly my poetry, comes from what can
+                        best be described as state-dependent memory. If I'm lucky, some random
+                        stimulus or set of stimuli will trigger a recollection of these memories,
+                        and give me an image from which to write. The problem is that this also
+                        means I cannot write sequentially.
+                    </p>
+                    <p>
+                        And just to make things even more difficult, memory is unreliable and easily
+                        influenced. So I need to review and consider how much I trust my own
+                        recollection of events, and work to mitigate my biases whenever possible by
+                        asking someone else to recount the event and compare details.
+                    </p>
+                    <p>
+                        So, in the background, I'm going to start working on that. Almost like
+                        forgetting to write in a diary for a week, then trying to catch up while you
+                        still remember.
+                    </p>
+                    <p>
+                        Hopefully this will have the added benefit of holding back some of the
+                        future doom and gloom from the blog.
+                    </p>
+                    <p>
+                        And finally, I'm going to try to finish up my blog generator,
+                        <a href="https://gitea.cutieguwu.ca/cutieguwu/cutinews">cutinews</a>. It's
+                        about time I got back and actually finished a programming project. Chances
+                        are that I'll be live on Twitch (yes, eww, ik) working on the code.
+                    </p>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/5_optical_recovery.html

@@ -0,0 +1,144 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Optical Recovery | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog - Optical Recovery</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane blog">
+            <div class="body">
+                <header>
+                    <h1 class="title">Optical Recovery</h1>
+                    <p class="date">Posted: 10 January, 2026</p>
+                    <p class="date">Last Edited: 10 January, 2026</p>
+                </header>
+                <div class="body">
+                    <p>
+                        Data preservation is increasingly threatened in the digital age. That almost
+                        sounds backwards, until you dig into modern architecture.
+                    </p>
+                    <p>
+                        Once upon a time, the greatest threat to information preservation was nature
+                        and memory retrieval errors. The digital age introduced denser,
+                        longer-lasting forms of data storage. As we progressed from punch card, to
+                        tape, to 8 inch floppies, to flash and optical, and ever denser forms of
+                        all, we got better at preventing data loss. Quality control, error
+                        correction techniques bundled with file systems, and redundancy (parity) in
+                        storage virtualizations, like RAID.
+                    </p>
+                    <p>
+                        But in the modern age, the Enshittocene<sup>1</sup>, some would call it,
+                        consumers are ever strongarmed into corporate-controlled cloud storage. With
+                        that, comes a lack of ownership.
+                    </p>
+                    <p>
+                        Now, normally that's the lead-up to advocating for homelabbing, FOSS, and
+                        de-Googling. However, in this instance, it's the lead up to optical media
+                        preservation. Why? Because optical media remains a great storage medium
+                        today. Even if you don't believe that, many old games in their original
+                        form, or other preserved media, are still only available on discs.
+                    </p>
+                    <p>
+                        However, discs are subject to natural degradation through scratches,
+                        delamination, and disc rot. Especially as the quality control on these discs
+                        dwindles. Thus, there must be additional work put into caring for this
+                        medium.
+                    </p>
+                    <p>
+                        RAID arrays are great as alternatives too, as they already have parity,
+                        ddrescue, and error-correcting filesystems available. The problem is that
+                        the arrays themselves are not. At least not right now. Once again, partly
+                        thanks to AI datacentres demanding obscene amounts of resources, the cost of
+                        hard drives has gone up significantly since the pandemic.
+                    </p>
+                    <p>
+                        With that, we segue into my latest project, temporarily named
+                        <em>Kramer</em>. I know I did some research to come up with that name, but I
+                        genuinely don't recall who it was in reference to. In fact, having tried
+                        tracking down who it's in reference to, I may have messed up when I picked
+                        the name. My best guess is that it's in reference to Kane Kramer, but he
+                        helped design the Digital Audio Player, not optical media.
+                    </p>
+                    <p>
+                        Regardless, it's always been a working name while I figure out if I can
+                        finish the project.
+                    </p>
+                    <p>So, what is Kramer?</p>
+                    <p>
+                        Kramer is a recovery utility. Conceptually, it's meant to be akin to
+                        ddrescue<sup>2</sup>, but optimized for recovering data from optical media.
+                    </p>
+                    <p>
+                        There are two main problems I've experienced while trying to use ddrescue
+                        with optical drives, and both stem from the drive's firmware. Now, I don't
+                        know if me using the <code>--reset-slow</code> flag is contributing to these
+                        issues or not, but I experience more problems without it.
+                    </p>
+                    <p>
+                        If you've ever tried working with optical media in Linux, you may be
+                        familiar with <em>The Sleep Bug</em>. Normally, this is when a drive's
+                        firmware decides to sleep after two minutes, and never wakes. In the case of
+                        ddrescue, I've noticed that the drive often sleeps after read errors. When
+                        this happens, I can't kill ddrescue, and it just hangs. Even if I forcefully
+                        disconnect the drive, it just hangs, awaiting a response from the block
+                        device.
+                    </p>
+                    <p>
+                        For the record, Kramer still has this issue. I've only recently gotten
+                        mapping working alongside directIO to get around the Linux kernel's read
+                        poisoning.
+                    </p>
+                    <p>
+                        Keep in mind that I know very little C, and I don't play this low in the
+                        system much yet. So, I don't know why, but without the
+                        <code>O_DIRECT</code> flag to bypass the kernel's buffer (and whatever else
+                        directIO technically bypasses), after a single IO error, the kernel will
+                        refuse to return anything but that same IO error until the parent process is
+                        restarted. I tried doing the C calls directly through FFI, since poisoning
+                        is something that Rust employs in some places for safety. That didn't work,
+                        so I tried spawning a child process to execute the read, but that also
+                        didn't work. Thankfully, I know a guy, and with his help I was able to track
+                        down not only how to implement directIO, but also without using FFI to call
+                        <code>posix_memalign</code>.
+                    </p>
+                    <p>
+                        Back on track, the other issue is the spin-down. As ddrescue reads smaller
+                        clusters and/or starts hitting a particularly poor section of the disc, some
+                        drives' firmware is too quick to spin down, causing the spindle to
+                        constantly speed up and slow down, increasing wear.
+                    </p>
+                    <hr />
+                    <ol>
+                        <li>
+                            I would recommend reading <em>Enshittification</em> by Cory Doctorow.
+                        </li>
+                        <li>
+                            As I'm writing Kramer in Rust, I also have to stress the point that this
+                            project is not intended as a ddrescue rewrite in rust, for the sake of a
+                            rewrite in rust. I'm not trying to clone or replace ddrescue. Kramer has
+                            a different target, and ddrescue is a resource for me to learn from and
+                            use as a guide while I dig deeper into the system than I ever have.
+                        </li>
+                    </ol>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/style.scss

@@ -0,0 +1,3 @@
+@use "../../partials/a_common";
+
+@use "../../partials/pane_blog";

src/blog/style.scss

@@ -0,0 +1 @@
+@use "../partials/a_common";

src/disclosure.html

@@ -0,0 +1,294 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Disclosure | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Disclosure</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body">
+                <header>
+                    <h1 class="title">Disclosure</h1>
+                    <p class="date">Last Edited: 01 August, 2025</p>
+                </header>
+                <div class="body">
+                    <div class="layout_row">
+                        <div class="item">
+                            <h2 class="title">Website Security</h2>
+                            <p>
+                                This website uses a number of security features, most of which are
+                                built into your browser, to protect my and your:
+                            </p>
+                            <ul>
+                                <li>Infrastructure</li>
+                                <li>Data, and</li>
+                                <li>Experience</li>
+                            </ul>
+                            <p>
+                                You can see some of the main methods that this website uses below:
+                            </p>
+                            <div class="section_list">
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Anubis</h3>
+                                            <span class="subtitle"
+                                                >AI Scraper Screening Utility</span
+                                            >
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>
+                                            This website is protected by a screening utility known
+                                            as
+                                            <a href="https://anubis.techaro.lol/"
+                                                ><cite>Anubis</cite></a
+                                            >. You may also have heard of this program as
+                                            <cite>BotStopper</cite> for those who purchase a
+                                            commercial license because they somehow can't live with
+                                            a cute anime girl showing up on their websites. UNESCO
+                                            notably don't have a problem with that, and proudly
+                                            present an anime girl as of writing this.
+                                        </p>
+                                        <p>
+                                            I do not have a commercial license and do not pay in any
+                                            way for Anubis. If I had money to spare, I would
+                                            actively fund the project.
+                                        </p>
+                                        <p>
+                                            Despite what some fools at the FSF figure, Anubis IS NOT
+                                            malware. See:
+                                            <a href="https://www.youtube.com/watch?v=YisGpdPjYM8"
+                                                ><cite
+                                                    >I Platformed A Linux "Cyber Criminal"</cite
+                                                ></a
+                                            >. It does have <em>similar</em> behaviour due to its
+                                            proof-of-work scheme, which asks your browser to run a
+                                            throwaway calculation in an effort to block or dissuade
+                                            AI scrapers. Many, if not nearly all clients, are
+                                            subject to screening based on various filters around
+                                            your browser's user agent string.
+                                        </p>
+                                        <p>
+                                            Additionally, if you have concerns about the legality of
+                                            my use of Anubis, please see
+                                            <a href="https://github.com/TecharoHQ/anubis/issues/50"
+                                                >Anubis Issue #50</a
+                                            >
+                                            where concerns were looked into.
+                                        </p>
+                                        <p>
+                                            Now, if you have a moral issue with this project, you
+                                            may do one of two things (because adjusting your UA will
+                                            just make me block the UA, or add a complete catch-all
+                                            rule):
+                                        </p>
+                                        <ol>
+                                            <li>
+                                                Don't allow JavaScript to run. (Have fun making this
+                                                work)
+                                            </li>
+                                            <li>Just don't use my website.</li>
+                                        </ol>
+                                        <p>
+                                            If you experience issues with Anubis blocking you, which
+                                            presumably hasn't happened on your way to this page, you
+                                            can email me with details. DO NOT bother the main
+                                            project as it may be an issue with a screening rule that
+                                            I've invoked.
+                                        </p>
+                                        <p>
+                                            If you do wish to raise an issue with the Anubis dev(s),
+                                            PLEASE DO NOT DO SOMETHING LIKE THIS:
+                                        </p>
+                                        <ul>
+                                            <li>
+                                                <a
+                                                    href="https://github.com/TecharoHQ/anubis/issues/113"
+                                                    >Anubis Issue #113</a
+                                                >
+                                            </li>
+                                            <li>
+                                                <a
+                                                    href="https://github.com/TecharoHQ/anubis/discussions/114"
+                                                    >Anubis Discussion #114</a
+                                                >
+                                            </li>
+                                            <li>
+                                                <a
+                                                    href="https://github.com/TecharoHQ/anubis/discussions/117"
+                                                    >Anubis Discussion #117</a
+                                                >
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Content Security Policy (CSP)</h3>
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>
+                                            This website, unlike a scary number of sites (including
+                                            google.com and microsoft.com as of writing) has a CSP
+                                            configured. This helps prevent or mitigate a number of
+                                            possible attacks including cross-site scripting and
+                                            clickjacking.
+                                        </p>
+                                        <p>
+                                            Further Reading:
+                                            <a
+                                                href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP"
+                                                >https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP</a
+                                            >
+                                        </p>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">
+                                                HTTP Strict Transport Security (HSTS)
+                                            </h3>
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>
+                                            This website has a HSTS policy which indicates to your
+                                            browser to use a secure connection when connecting.
+                                        </p>
+                                        <p>
+                                            Additionally, the server will force redirect ALL
+                                            connections over to HTTPS for any browsers which do not
+                                            use this header or have a HTTPS-only mode enabled.
+                                        </p>
+                                        <p>
+                                            Further Reading:
+                                            <a
+                                                href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security"
+                                                >https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Strict-Transport-Security</a
+                                            >
+                                        </p>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Other Security Headers</h3>
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>Some include:</p>
+                                        <ul>
+                                            <li>X-Content-Type-Options</li>
+                                            <li>X-Frame-Options</li>
+                                            <li>X-XSS-Protection</li>
+                                            <li>Permissions-Policy</li>
+                                            <li>Referrer-Policy</li>
+                                        </ul>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Security.txt</h3>
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>
+                                            This file offers information to security researchers to
+                                            silently report any issues they find so that I can
+                                            resolve them.
+                                        </p>
+                                    </div>
+                                </section>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <h2 class="title">Cookies</h2>
+                            <p>
+                                This website only leaves cookies that are required for the website's
+                                functioning. I do not place any trackers on your system.
+                            </p>
+                            <p>
+                                Note: I cannot say what cookies may be left by services that I host
+                                (such as Gitea and Web Check). For more details, please see those
+                                projects' documentation.
+                            </p>
+                            <p>You can see all cookies that this website uses below:</p>
+                            <div class="section_list">
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Anubis</h3>
+                                            <span class="subtitle"
+                                                >AI Scraper Screening Utility</span
+                                            >
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>
+                                            This website does utilize a cookie. This cookie is made
+                                            by Anubis to keep your system from having to pass the
+                                            proof-of-work check every time you request a resource
+                                            from this site.
+                                        </p>
+                                        <p>
+                                            THEORETICALLY, this cookie, as with any JavaScript
+                                            cookie,
+                                            <em>can</em> be used to track you.
+                                        </p>
+                                        <p>
+                                            HOWEVER, I do not use it for tracking, Anubis does not
+                                            use it for tracking, and there is no evidence that 3rd
+                                            parties are abusing the cookie. There are far more
+                                            attractive targets.
+                                        </p>
+                                        <p>
+                                            IF this becomes an issue, until the lead developer(s)
+                                            and/or community can find a solution, Anubis will be
+                                            reconfigured to send out challenges even more
+                                            frequently, and an advisory notice to wipe your browser
+                                            cookies at the end of your session will be made.
+                                        </p>
+                                        <p>
+                                            Under the current configuration, Anubis' cookies are
+                                            valid for 24h. This does not mean that the cookie is
+                                            necessarily gone from your system.
+                                        </p>
+                                        <p>
+                                            <a href="https://github.com/TecharoHQ/anubis/issues/50"
+                                                >Anubis Issue #50</a
+                                            >
+                                            briefly looked into the possibility of abuse via the
+                                            cookie.
+                                        </p>
+                                    </div>
+                                </section>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/400.html

@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>400 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 400</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">400</h1>
+                    <h2>Bad Request!</h2>
+                </header>
+                <hr />
+                <p>
+                    The server cannot or will not process this request due to apparent client-side
+                    error or deception.
+                </p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/401.html

@@ -0,0 +1,34 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>401 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 401</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">401</h1>
+                    <h2>Unauthorized!</h2>
+                </header>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/403.html

@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>403 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 403</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">403</h1>
+                    <h2>Forbidden!</h2>
+                </header>
+                <hr />
+                <p>The server is refusing to act upon your request.</p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/404.html

@@ -0,0 +1,34 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>404 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 404</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">404</h1>
+                    <h2>Page not found!</h2>
+                </header>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/500.html

@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>500 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 500</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">500</h1>
+                    <h2>Internal Server Error!</h2>
+                </header>
+                <hr />
+                <p>The server has no clue WTF happened here.</p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/501.html

@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>501 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 501</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">501</h1>
+                    <h2>Not Implemented!</h2>
+                </header>
+                <hr />
+                <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/502.html

@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>502 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 502</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">502</h1>
+                    <h2>Bad Gateway!</h2>
+                </header>
+                <hr />
+                <p>This service may be offline.</p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/503.html

@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>503 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 503</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">503</h1>
+                    <h2>Service Unavailable!</h2>
+                </header>
+                <hr />
+                <p>The server may be overloaded or down for maintenance.</p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/504.html

@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>504 | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 504</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">504</h1>
+                    <h2>Gateway Timeout!</h2>
+                </header>
+                <hr />
+                <p>
+                    The server acted as a proxy and didn't receive a timely response from the
+                    upstream server.
+                </p>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/style.scss

@@ -0,0 +1,3 @@
+@use "../partials/a_common";
+
+@use "../partials/pane_error";

src/feed/rss.xml

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+    <title>Cutieguwu Yaps</title>
+    <link>https://www.cutieguwu.ca/</link>
+    <description>
+        Cutieguwu's blog where she discusses various things.
+    </description>
+    <language>en-ca</language>
+    <category>Technology/IT/Life/Mental Health/Health</category>
+    <item>
+        <title>Optical Recovery</title>
+        <pubDate>10 January, 2026</pubDate>
+        <link>https://www.cutieguwu.ca/blog/posts/5_optical_recovery.html</link>
+        <description>
+            Introducing my optical media recovery utility, and some challenges in development.
+        </description>
+        <category>Coding</category>
+        <category>Programming</category>
+        <category>Optical Media</category>
+        <category>Rust</category>
+    </item>
+    <item>
+        <title>Pointless Plans</title>
+        <pubDate>18 December, 2025</pubDate>
+        <link>https://www.cutieguwu.ca/blog/posts/4_pointless_plans.html</link>
+        <description>Winter Break plans</description>
+        <category>Life</category>
+        <category>Mental Health</category>
+        <category>Health</category>
+    </item>
+    <item>
+        <title>Closing Chapters</title>
+        <pubDate>18 December, 2025</pubDate>
+        <link>https://www.cutieguwu.ca/blog/posts/3_closing_chapters.html</link>
+        <description>
+            Things go, and others come in. Sometimes, we don't want to move forward, but we must.
+        </description>
+        <category>Life</category>
+        <category>Mental Health</category>
+        <category>Health</category>
+    </item>
+    <item>
+        <title>Buyer's Anxiety</title>
+        <pubDate>11 September, 2025</pubDate>
+        <link>https://www.cutieguwu.ca/blog/posts/2_buyers_anxiety.html</link>
+        <description>
+            Discussing my fears regarding a purchase for a friend.
+        </description>
+        <category>Life</category>
+        <category>Mental Health</category>
+        <category>Health</category>
+    </item>
+    <item>
+        <title>Unsure U.</title>
+        <pubDate>09 August, 2025</pubDate>
+        <link>https://www.cutieguwu.ca/blog/posts/1_unsure_u.html</link>
+        <description>Discussing my fears for University.</description>
+        <category>Life</category>
+        <category>Mental Health</category>
+        <category>Health</category>
+    </item>
+    <item>
+        <title>Splitting Pathways</title>
+        <pubDate>29 July, 2025</pubDate>
+        <link>
+            https://www.cutieguwu.ca/blog/posts/0_divergent_pathways.html
+        </link>
+        <description>Discussing my struggles in love.</description>
+        <category>Life</category>
+        <category>Mental Health</category>
+        <category>Health</category>
+    </item>
+</channel>
+
+</rss>

src/includes/_unused_menu_entries.html

@@ -0,0 +1,28 @@
+<!-- Minecraft -->
+<li class="nav_dropdown">
+    <div class="header nav_item">
+        <a class="nav_title" href="/minecraft/">Minecraft</a>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+    </div>
+    <div class="body">
+        <a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
+        <a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
+    </div>
+</li>
+
+<!-- Dropdown Pronoun Pages -->
+<li class="dropdown">
+    <header>
+        <a class="header item" href="https://pronouns.page/@Cutieguwu">
+            <p class="title">Pronoun Pages</p>
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+        </a>
+    </header>
+    <div class="body">
+        <a class="title" href="https://en.pronouns.page/@Cutieguwu">English</a>
+        <a class="title" href="https://pronoms.fr/@Cutieguwu">French</a>
+    </div>
+</li>
+
+<!-- Public Facing Webcheck -->
+<li><a class="title" href="https://webcheck.cutieguwu.ca">Web Check</a></li>

src/includes/blog_recent_posts.html

@@ -0,0 +1,59 @@
+<div class="spacer_container blog_recent_posts">
+    <h2>Recent Posts</h2>
+    <div class="section_list">
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Optical Recovery</h3>
+                    <span class="subtitle">10 January, 2026</span>
+                </div>
+                <a href="/blog/posts/5_optical_recovery.html" class="status">View</a>
+            </header>
+        </section>
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Pointless Plans</h3>
+                    <span class="subtitle">18 December, 2025</span>
+                </div>
+                <a href="/blog/posts/4_pointless_plans.html" class="status">View</a>
+            </header>
+        </section>
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Closing Chapters</h3>
+                    <span class="subtitle">18 December, 2025</span>
+                </div>
+                <a href="/blog/posts/3_closing_chapters.html" class="status">View</a>
+            </header>
+        </section>
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Buyer's Anxiety</h3>
+                    <span class="subtitle">11 September, 2025</span>
+                </div>
+                <a href="/blog/posts/2_buyers_anxiety.html" class="status">View</a>
+            </header>
+        </section>
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Unsure U.</h3>
+                    <span class="subtitle">09 August, 2025</span>
+                </div>
+                <a href="/blog/posts/1_unsure_u.html" class="status">View</a>
+            </header>
+        </section>
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Divergent Pathways</h3>
+                    <span class="subtitle">29 July, 2025</span>
+                </div>
+                <a href="/blog/posts/0_divergent_pathways.html" class="status">View</a>
+            </header>
+        </section>
+    </div>
+</div>

src/includes/footer.html

@@ -0,0 +1,3 @@
+<footer>
+    <p>Made with love in Canada 🇨🇦</p>
+</footer>

src/includes/meta.html

@@ -0,0 +1,16 @@
+<meta charset="utf-8" />
+
+<meta name="description" content="Cutieguwu's Official website" />
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
+<meta name="keywords" content="cutieguwu" />
+
+<!-- Explicitly stop Bing from additionally using content for AI -->
+<!-- See: https://github.com/ai-robots-txt/ai.robots.txt/issues/111 -->
+<meta name="bingbot" content="noarchive" />
+
+<!-- Mastodon Author Attribution -->
+<meta name="fediverse:creator" content="@OliveTheFemboy@mastodon.online" />
+
+<link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
+
+<link rel="stylesheet" type="text/css" href="style.css" />

src/includes/nav_header.html

@@ -0,0 +1,5 @@
+<input id="toggle_nav" type="checkbox" />
+<label for="toggle_nav" class="nav_header">
+    <h2 class="logo">Cutieguwu</h2>
+    <ion-icon name="menu-outline"></ion-icon>
+</label>

src/includes/nav_menu.html

@@ -0,0 +1,69 @@
+<ul class="menu">
+    <!-- Home -->
+    <li class="item">
+        <a class="title" href="/">Home</a>
+    </li>
+
+    <li class="item">
+        <a class="title" href="/blog/">Blog</a>
+    </li>
+
+    <li><hr /></li>
+
+    <!-- About -->
+    <li class="item"><a class="title" href="/about.html">About</a></li>
+
+    <!-- Pronoun Pages -->
+    <li class="item"><a class="title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a></li>
+
+    <!-- External Links -->
+    <li class="dropdown">
+        <input type="checkbox" id="toggle_ext_links" />
+        <label for="toggle_ext_links" class="item">
+            <p class="title">External Links</p>
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+        </label>
+        <ul>
+            <li><a class="title" href="https://github.com/Cutieguwu">Github (Mirror)</a></li>
+            <li><a class="title" href="https://play.picoctf.org/users/cutieguwu">picoCTF</a></li>
+            <li><a class="title" href="https://www.twitch.tv/cutieguwu">Twitch</a></li>
+            <li><a class="title" href="https://www.youtube.com/@Cutieguwu">YouTube</a></li>
+        </ul>
+    </li>
+
+    <li><hr /></li>
+
+    <!-- Public Services -->
+    <li class="dropdown">
+        <input type="checkbox" id="toggle_srv_pub" />
+        <label for="toggle_srv_pub" class="item">
+            <p class="title">Public Services</p>
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+        </label>
+        <ul>
+            <li><a class="title" href="https://cyberchef.cutieguwu.ca">CyberChef</a></li>
+        </ul>
+    </li>
+
+    <!-- Services -->
+    <li class="dropdown">
+        <input type="checkbox" id="toggle_srv_priv" />
+        <label for="toggle_srv_priv" class="item">
+            <p class="title">Services</p>
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+        </label>
+        <ul>
+            <li><a class="title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a></li>
+        </ul>
+    </li>
+
+    <li><hr /></li>
+
+    <!-- Website Disclosure -->
+    <li class="item">
+        <a class="title" href="/disclosure.html">Disclosure</a>
+    </li>
+    <li class="item">
+        <a class="title" href="/acknowledgements.html">Acknowledgements</a>
+    </li>
+</ul>

src/includes/nav_quick_links.html

@@ -0,0 +1,21 @@
+<div class="quick_links">
+    <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
+        <ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="green"></ion-icon>
+    </a>
+    <a
+        href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
+        title="MIT License"
+    >
+        <ion-icon name="book-outline" alt="MIT License" class="indigo"></ion-icon>
+    </a>
+    <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
+        <ion-icon name="alert-circle-outline" alt="Report Issues" class="magenta"></ion-icon>
+    </a>
+    <a href="https://www.cutieguwu.ca/feed/rss.xml" title="RSS Feed" download>
+        <ion-icon name="logo-rss" alt="RSS Feed" class="orange"></ion-icon>
+    </a>
+
+    <!-- Mastodon Verification -->
+    <!-- Doubles as the spacer -->
+    <a rel="me" href="https://mastodon.online/@OliveTheFemboy" class="phantom"></a>
+</div>

src/includes/scripts.html

@@ -0,0 +1,3 @@
+<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+<script src="https://keepandroidopen.org/banner.js"></script>

src/includes/tailer.html

@@ -0,0 +1 @@
+<footer><p class="tailer">Copyright (c) 2025 Olivia Brooks</p></footer>

src/index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Home | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Home</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body">
+                <header>
+                    <h1 class="title">Home</h1>
+                    <p class="date">Last Edited: 03 August, 2025</p>
+                </header>
+                <div class="body">
+                    <p>People, this is under development. Live with the lorem ipsum.</p>
+                    <p>lorem ipsum idk what else there is in this latin phrase</p>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex
+                        sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis
+                        convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus
+                        fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada
+                        lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti
+                        sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+                    </p>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/minecraft/bearock/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Bearock SMP | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Bearock SMP</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/minecraft/bearock/style.scss

@@ -0,0 +1 @@
+@use "../../partials/a_common";

src/minecraft/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Minecraft | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Minecraft</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/minecraft/rebirth/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Rebirth SMP | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Rebirth SMP</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/minecraft/rebirth/style.scss

@@ -0,0 +1 @@
+@use "../../partials/a_common";

src/minecraft/style.scss

@@ -0,0 +1 @@
+@use "../partials/a_common";

src/partials/_a_colours.css

@@ -0,0 +1,52 @@
+.red {
+    color: var(--accent-red);
+}
+
+.orange {
+    color: var(--accent-orange);
+}
+
+.yellow {
+    color: var(--accent-yellow);
+}
+
+.green {
+    color: var(--accent-green);
+}
+
+.cyan {
+    color: var(--accent-cyan);
+}
+
+.blue {
+    color: var(--accent-blue);
+}
+
+.indigo {
+    color: var(--accent-indigo);
+}
+
+.purple {
+    color: var(--accent-purple);
+}
+
+.magenta {
+    color: var(--accent-magenta);
+}
+
+.pink {
+    color: var(--accent-pink);
+}
+
+.white {
+    color: var(--white-0);
+}
+
+.docker {
+    /*
+    Docker is protective of their colours.
+    https://www.docker.com/company/newsroom/media-resources/
+    */
+
+    color: #1d63edff;
+}

src/partials/_a_common.scss

@@ -0,0 +1,149 @@
+@use "_a_colours.css";
+
+@use "a_footer";
+@use "a_layouts";
+@use "a_pane";
+@use "a_quick_links";
+@use "a_section_list";
+
+:root {
+    // 0: Base of an element. Example: the viewport class.
+    //
+    // The higher the integer, the lighter the colour, the higher
+    // it should be visually, meaning more nested in the cascade.
+    //
+    // Odd numbers should be used as intermediate colours between the
+    // fore and back elements.
+    //
+    // Eg. Current dropdown menu.
+
+    --accent-red: #cb4c4cff;
+    --accent-orange: #e18142ff;
+    --accent-yellow: #e4d281ff;
+    --accent-green: #c5e689ff;
+    --accent-cyan: #a7edefff;
+    --accent-blue: #5f62e2ff;
+    --accent-indigo: #874ac0ff;
+    --accent-purple: #a355d3ff;
+    --accent-magenta: #df67dfff;
+    --accent-pink: #ff9f9fff;
+
+    --background-0: #130b21ff;
+    --background-1: #170d28ff;
+    --background-2: #231833ff;
+    --background-3: #211635ff;
+    --background-4: #2a223eff;
+
+    --block-0: #0d0d0dff;
+    --block-1: #1a1a1aff;
+    --block-2: #272727ff;
+
+    --highlight-hover: #944db6ff;
+
+    --white-0: #bfbfbfff;
+    --white-1: #d9d9d9ff;
+    --white-2: #e5e5e5ff;
+    --white-3: #f5f5f5ff;
+
+    --font-size-generic: 1.85vh;
+
+    --font-family-generic: "Liberation Sans", Arial, Sans-Serif;
+    --font-family-title: "Liberation Serif", Arial, Sans-Serif;
+
+    --border-radius-small: calc(var(--border-radius-large) / 2);
+    --border-radius-large: 1rem;
+    --border-radius-leaf: var(--border-radius-small) var(--border-radius-large);
+
+    --spacing-small: 0.75rem; // Previously: --spacing-horizontal
+    --spacing-medium: 1rem; // Previously: --spacing-menu-gap
+    --spacing-large: 1.5rem; // Previously: --margin-pane
+    --spacing-thicc: calc(var(--spacing-large) * 4);
+
+    --transition-fade: 0.4s ease-out;
+    --transition-cut: none;
+
+    --transform-scale-x: scaleX(1.15);
+    --transform-scale-y: scaleY(1.15);
+
+    font-size: var(--font-size-generic);
+    color: var(--white-1);
+}
+
+body {
+    display: grid;
+    background-color: var(--background-0);
+    grid-template-rows: min-content auto;
+
+    // Adds a margin otherwise for some reason.
+    margin: 0;
+
+    .kao-banner {
+        grid-area: banner;
+    }
+}
+
+* {
+    color-scheme: dark;
+    box-sizing: border-box;
+
+    /* outline: 1px solid red; */
+}
+
+h1 {
+    font-size: 3.3vh;
+    font-family: var(--font-family-title);
+}
+
+h2 {
+    font-size: 2.5vh;
+    font-family: var(--font-family-title);
+}
+
+h3,
+h4,
+h5,
+h6,
+p,
+a {
+    font-family: var(--font-family-generic);
+}
+
+// Mobile
+@media (max-width: 600px) {
+    :root {
+        --spacing-large: var(--spacing-small);
+    }
+
+    body {
+        grid-template-columns: none;
+        grid-template-areas: "banner" "nav" "main" "spacer";
+
+        // Compress spacings to maximize useable area.
+        // padding: var(--spacing-small);
+        justify-items: center;
+    }
+
+    .pane.spacer,
+    .footer {
+        position: static;
+        top: auto;
+        left: auto;
+        right: auto;
+    }
+}
+
+// Tablets and Intermediary
+@media (min-width: 601px) and (max-width: 1023px) {
+    body {
+        grid-template-columns: min-content 1fr;
+        grid-template-areas: "banner banner" "nav main" "spacer main";
+    }
+}
+
+// Desktops and Laptops
+@media (min-width: 1024px) {
+    body {
+        grid-template-columns: min-content 1fr min-content;
+        grid-template-areas: "banner banner banner" "nav main spacer";
+    }
+}

src/partials/_a_footer.scss

@@ -0,0 +1,17 @@
+body > footer {
+    padding: var(--spacing-small);
+    width: min-content;
+
+    background-color: var(--background-2);
+    border-radius: 0 var(--border-radius-large) 0 0;
+
+    font-size: 1.65vh;
+    white-space: nowrap;
+
+    position: fixed;
+    bottom: 0;
+
+    > p {
+        margin: 0;
+    }
+}

src/partials/_a_layouts.scss

@@ -0,0 +1,26 @@
+.layout_row {
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--spacing-small);
+
+    > .item {
+        padding: calc(var(--spacing-small) * 2);
+
+        background-color: var(--background-1);
+        border-radius: var(--border-radius-leaf);
+
+        .title {
+            text-align: center;
+        }
+    }
+}
+
+.layout_row + .layout_row {
+    margin-top: var(--spacing-small);
+}
+
+@media (max-width: 600px) {
+    .layout_row {
+        grid-auto-flow: row;
+    }
+}

src/partials/_a_pane.scss

@@ -0,0 +1,23 @@
+@use "pane_main";
+@use "pane_nav";
+@use "pane_spacer";
+
+.pane {
+    margin: var(--spacing-large);
+}
+
+@media (max-width: 600px) {
+    .pane {
+        width: calc((50% - var(--spacing-small)) * 2);
+    }
+}
+
+@media (min-width: 601px) {
+    nav.pane,
+    .pane.spacer {
+        gap: var(--spacing-medium);
+
+        position: sticky;
+        top: var(--spacing-large);
+    }
+}

src/partials/_a_quick_links.scss

@@ -0,0 +1,34 @@
+.quick_links {
+    --item-padding: 0.35rem;
+    --item-size: calc(1rem + var(--item-padding));
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    > a,
+    > div {
+        display: grid;
+
+        background-color: var(--background-3);
+        border-radius: var(--border-radius-leaf);
+
+        padding: var(--item-padding);
+        gap: var(--item-padding);
+
+        align-items: center;
+        justify-content: center;
+
+        grid-auto-flow: column;
+
+        text-decoration: none;
+        color: var(--white-1);
+
+        > * {
+            margin: 0;
+            padding: 0;
+
+            font-size: var(--font-size-generic);
+        }
+    }
+}

src/partials/_a_section_list.scss

@@ -0,0 +1,89 @@
+.section_list {
+    display: grid;
+
+    width: 100%;
+
+    > section + section {
+        margin-top: var(--spacing-small);
+    }
+
+    > section {
+        width: inherit;
+
+        > header {
+            display: grid;
+            grid-auto-flow: row;
+            grid-template-columns: 1fr min-content;
+
+            column-gap: calc(var(--spacing-small) * 2);
+
+            background-color: var(--background-3);
+            border-radius: var(--border-radius-leaf);
+
+            padding: var(--spacing-small);
+
+            text-align: start;
+
+            width: inherit;
+
+            .name,
+            .subtitle,
+            .status {
+                margin: inherit;
+            }
+
+            .subtitle {
+                display: inline-block;
+
+                font-size: 0.85rem;
+                font-weight: normal;
+                font-style: italic;
+                font-family: var(--font-family-generic);
+            }
+
+            .status {
+                align-self: center;
+                white-space: nowrap;
+
+                text-decoration: none;
+                font-size: 1.17rem;
+                font-weight: bold;
+            }
+        }
+
+        > .body {
+            padding: 0 calc(var(--spacing-small) * 2);
+
+            ul {
+                font-family: var(--font-family-generic);
+
+                li + li {
+                    margin-top: 0.5em;
+                }
+            }
+        }
+    }
+}
+
+.spacer_container {
+    justify-content: start;
+
+    .section_list > section > header {
+        background-color: var(--background-1);
+
+        white-space: nowrap;
+    }
+}
+
+@media (max-width: 600px) {
+    .section_list section {
+        > header {
+            column-gap: var(--spacing-small);
+        }
+
+        > .body {
+            // Collapse the L/R padding to maximize usable space
+            padding: 0;
+        }
+    }
+}

src/partials/_nav_dropdown.scss

@@ -0,0 +1,62 @@
+.dropdown {
+    > label.item {
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        align-items: center;
+
+        > ion-icon {
+            align-self: center;
+            transition-duration: 0.25s;
+        }
+    }
+
+    > ul {
+        display: none;
+        border-bottom-left-radius: var(--border-radius-small);
+        border-bottom-right-radius: var(--border-radius-small);
+        background-color: var(--background-1);
+
+        // Remove default padding and style applied to ul for bullets.
+        padding: 0 var(--spacing-small);
+        list-style: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .dropdown {
+        > label.item > ion-icon {
+            margin-right: var(--padding-mobile);
+        }
+    }
+}
+
+// Use a toggle for menu entries on mobile and intermediary devices.
+@media (max-width: 1023px) {
+    .dropdown {
+        > input:checked + label {
+            color: var(--highlight-hover);
+
+            + ul {
+                display: grid;
+            }
+        }
+    }
+}
+
+// Use a hover state for menu entries on large screens.
+@media (min-width: 1024px) {
+    .dropdown:hover {
+        > label.item {
+            transform: var(--transform-scale-x);
+
+            > ion-icon {
+                rotate: 90deg;
+                transition-duration: 0.25s;
+            }
+        }
+
+        > ul {
+            display: grid;
+        }
+    }
+}

src/partials/_nav_header.scss

@@ -0,0 +1,36 @@
+nav.pane > .nav_header {
+    display: grid;
+    grid-template-columns: none;
+    grid-template-areas: "logo";
+
+    ion-icon {
+        grid-area: hamburger;
+
+        display: none;
+
+        align-self: center;
+        justify-self: center;
+
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+@media (max-width: 600px) {
+    nav.pane > .nav_header {
+        grid-template-columns: min-content 1fr min-content;
+        grid-template-areas: "logo blank hamburger";
+
+        ion-icon {
+            display: block;
+        }
+    }
+}
+
+nav .logo {
+    grid-area: logo;
+
+    font-family: var(--font-family-generic);
+    text-align: center;
+    margin: var(--spacing-small) 0;
+}

src/partials/_nav_location.scss

@@ -0,0 +1,16 @@
+.location {
+    margin: 0;
+    padding: var(--spacing-small);
+    background-color: var(--background-2);
+    border-radius: var(--border-radius-leaf);
+    text-align: center;
+
+    > header h4 {
+        font-weight: bold;
+        margin: 0 0 0.5rem;
+    }
+
+    .page {
+        margin: 0;
+    }
+}

src/partials/_nav_menu.scss

@@ -0,0 +1,60 @@
+@use "nav_dropdown";
+@use "nav_title";
+
+nav .menu {
+    // Remove default padding and style applied to ul for bullets.
+    padding: 0;
+    list-style: none;
+
+    display: grid;
+    grid-auto-flow: row;
+    gap: var(--spacing-medium);
+    align-self: center;
+    margin: 0;
+
+    hr {
+        border-color: var(--accent-pink);
+        margin: 0 var(--spacing-small);
+    }
+}
+
+.menu {
+    .item {
+        // Need to force inheritence, otherwise <a> would require
+        // overrides for all color states from base styling for element.
+        color: inherit;
+        text-decoration: none;
+
+        padding: 0 var(--spacing-small);
+
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-small);
+        transition: var(--transition-fade);
+    }
+
+    .item:hover,
+    .dropdown:hover .item {
+        transform: var(--transform-scale-x);
+        transition: var(--transition-cut);
+
+        .title,
+        ion-icon {
+            color: var(--highlight-hover);
+            transition: var(--transition-cut);
+        }
+    }
+}
+
+@media (max-width: 600px) {
+    .menu {
+        .item {
+            padding: var(--padding-mobile);
+            background-color: var(--background-1);
+        }
+
+        .item:hover,
+        .dropdown:hover .item {
+            transform: none;
+        }
+    }
+}

src/partials/_nav_quick_links.scss

@@ -0,0 +1,52 @@
+nav.pane .quick_links {
+    --item-padding: 0.25rem;
+
+    justify-content: space-between;
+
+    a {
+        background-color: var(--background-2);
+
+        transition: var(--transition-fade);
+
+        ion-icon {
+            width: var(--item-size);
+        }
+    }
+
+    a:hover {
+        transition: var(--transition-cut);
+        transform: var(--transform-scale-x) var(--transform-scale-y);
+    }
+
+    .phantom {
+        width: calc(var(--item-size) + calc(var(--item-padding) * 2));
+
+        // Fake hiding the element.
+        //
+        // Due to how flexboxes function, settings `display: none`
+        // will result in the box just scaling as if the element
+        // never existed.
+        //
+        // phantom needs to sit beside a element in hierarchy,
+        // otherwise phantom will inherit from <a> like this:
+        //
+        // .pane_nav > .quick_links > a > .phantom
+        background-color: inherit;
+    }
+}
+
+@media (max-width: 600px) {
+    nav.pane .quick_links {
+        margin-bottom: var(--spacing-small);
+
+        --item-padding: var(--padding-mobile);
+
+        > a {
+            background-color: var(--background-1);
+        }
+
+        > .phantom {
+            background-color: inherit;
+        }
+    }
+}

src/partials/_nav_title.scss

@@ -0,0 +1,27 @@
+.menu .title {
+    // Need to force inheritence, otherwise <a> would require
+    // overrides for all color states from base styling for element.
+    color: inherit;
+    text-decoration: inherit;
+
+    font-family: var(--font-family-generic);
+    font-weight: bold;
+    white-space: nowrap;
+    margin: inherit;
+    // padding: 0 var(--spacing-small);
+    transition: var(--transition-fade);
+    display: block;
+}
+
+@media (max-width: 600px) {
+    .nav_title {
+        padding: var(--padding-mobile);
+    }
+}
+
+@media (min-width: 1024px) {
+    .menu .title:hover {
+        color: var(--highlight-hover);
+        transition: var(--transition-cut);
+    }
+}

src/partials/_page_resume.scss

@@ -0,0 +1,46 @@
+.r90 {
+    rotate: 90deg;
+}
+
+.pane_details {
+    display: flex !important;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .spacer_container {
+        height: min-content !important;
+        width: 100%;
+        padding-top: 0 !important;
+    }
+}
+
+.about_me {
+    padding: 0 var(--spacing-thicc) var(--spacing-small);
+}
+
+.early_history {
+    justify-self: center;
+}
+
+.prog_languages,
+.software {
+    * {
+        margin: 0.5rem;
+    }
+}
+
+.software_row {
+    grid-template-columns: 60% auto;
+}
+
+@media (max-width: 600px) {
+    .awards,
+    .certifications,
+    .education,
+    .prog_languages,
+    .software,
+    .work_history {
+        width: 100%;
+    }
+}

src/partials/_pane_blog.scss

@@ -0,0 +1,34 @@
+.pane.blog {
+    flex: 1;
+    flex-direction: column;
+
+    justify-content: center;
+
+    > .body {
+        padding: var(--spacing-small) 0 0;
+
+        > header {
+            white-space: nowrap;
+        }
+
+        > .body {
+            text-align: start;
+
+            padding: 0 var(--spacing-thicc) var(--spacing-thicc);
+
+            img {
+                max-width: 100%;
+                max-height: 65vh;
+                display: block;
+                margin: 0 auto;
+                object-fit: contain;
+            }
+        }
+    }
+}
+
+@media (max-width: 600px) {
+    .pane.blog .body > .body {
+        padding: var(--spacing-small);
+    }
+}

src/partials/_pane_error.scss

@@ -0,0 +1,13 @@
+.pane.error {
+    width: max-content;
+    margin: auto;
+
+    text-align: center;
+}
+
+@media (max-width: 600px) {
+    .pane.error {
+        margin-top: var(--spacing-large);
+        margin-bottom: var(--spacing-large);
+    }
+}

src/partials/_pane_main.scss

@@ -0,0 +1,56 @@
+main.pane {
+    grid-area: main;
+
+    > .body,
+    > footer {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
+    }
+
+    > .body {
+        padding: var(--spacing-small);
+
+        > header {
+            text-align: center;
+            padding: var(--spacing-small);
+            width: max-content;
+
+            margin: 0 auto;
+
+            .title {
+                background-color: var(--background-1);
+                border-radius: var(--border-radius-leaf);
+                padding: var(--spacing-small);
+            }
+
+            .date {
+                display: block;
+
+                font-size: 0.85rem;
+                font-weight: normal;
+                font-style: italic;
+                font-family: var(--font-family-generic);
+            }
+        }
+
+        > .body {
+            text-align: start;
+        }
+    }
+
+    > footer {
+        margin: var(--spacing-large) auto 0;
+        width: min-content;
+
+        font-size: 1.65vh;
+        white-space: nowrap;
+
+        padding: var(--spacing-small);
+
+        text-align: center;
+
+        > p {
+            margin: 0;
+        }
+    }
+}

src/partials/_pane_nav.scss

@@ -0,0 +1,55 @@
+@use "nav_header";
+@use "nav_menu";
+@use "nav_location";
+@use "nav_quick_links";
+
+nav.pane {
+    grid-area: nav;
+
+    --padding-mobile: 0.35rem;
+
+    height: min-content;
+
+    display: flex;
+    flex-direction: column;
+
+    position: sticky;
+    top: var(--spacing-large);
+    left: var(--spacing-large);
+
+    color: var(--accent-pink);
+
+    input[type="checkbox"] {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    nav.pane {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
+        padding: 0 var(--spacing-small);
+
+        .menu,
+        .quick_links,
+        .location {
+            display: none;
+        }
+
+        > * {
+            width: 100%;
+        }
+    }
+
+    nav.pane > input:checked + label {
+        color: var(--highlight-hover);
+
+        + .menu {
+            display: grid;
+
+            + .location + .quick_links {
+                display: flex;
+            }
+        }
+    }
+}

src/partials/_pane_spacer.scss

@@ -0,0 +1,30 @@
+.pane.spacer {
+    grid-area: spacer;
+
+    width: min-content;
+    height: calc(100vh - calc(var(--spacing-large) * 2));
+
+    display: grid;
+    grid-auto-flow: row dense;
+
+    .spacer_container {
+        padding: var(--spacing-small);
+        background-color: var(--background-2);
+        height: 100%;
+        border-radius: var(--border-radius-leaf);
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        p {
+            margin: 0;
+            text-align: center;
+        }
+    }
+}
+
+.spacer_container.blog_recent_posts {
+    justify-content: start !important;
+}

src/quotes.txt

@@ -0,0 +1,2 @@
+A flower may only bloom once every three years, but that does not mean it is undeserving of watering. - Cutieguwu Sept. 11, 2025 14:39
+Don't wait for your future to happen. The time will never be just right. - Unknown

src/resume.html

@@ -0,0 +1,518 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Resume | Cutieguwu</title>
+        <meta name="robots" content="noindex" />
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Resume</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body">
+                <header>
+                    <h1 class="title">Olivia Brooks</h1>
+                    <p class="date">Last Edited: 21 February, 2026</p>
+                </header>
+                <div class="body">
+                    <div class="about_me">
+                        <p>
+                            Hello, I'm Olivia Brooks. I am a passionate, hard-working, and
+                            dependable individual with an innate interest in sharing and expanding
+                            my knowledge and expertise.
+                        </p>
+                        <p>
+                            For the better part of a decade, I've specced, built, identified and
+                            removed bottlenecks, and breathed new life into both desktops and
+                            laptops. I have experience with all major operating systems including
+                            Linux (which I've daily-driven for 5 years), Windows, MacOS, Android,
+                            and iOS.
+                        </p>
+                        <p>
+                            Over the years, my technical skills have branched to 3D printing, CNC
+                            machining, basic CAD modelling, programming, and homelabbing. These
+                            interests have garnered me experience with hardware and software from a
+                            variety of vendors, architectures, and ecosystems, big and niche.
+                        </p>
+                        <p>
+                            I have extensive experience in both leadership and non-leadership
+                            positions across a variety of contexts. This has allowed me to develop a
+                            wide range of skills which I draw upon daily to rapidly develop new
+                            understandings. This additionally gives me the capacity to interact and
+                            excel in unfamiliar situations and novel endeavours.
+                        </p>
+                        <p>
+                            I am always willing to lend a hand where I can, no matter the learning
+                            curve ahead.
+                        </p>
+                        <p>
+                            I sincerely appreciate your consideration of me as a candidate, and look
+                            forward to hearing from you.
+                        </p>
+                    </div>
+                    <!--
+                        Add a table of contents?... or just one disguised as a few shortcuts.
+                        Also make this look less long by making chunks into dropdowns.
+                        -->
+                    <div class="layout_row">
+                        <div class="item work_history">
+                            <h2 class="title">Work History</h2>
+                            <div class="section_list">
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">OTHS Tech Crew</h3>
+                                            <span class="subtitle">September 2024 - June 2025</span>
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>Project Manager</p>
+                                        <ul>
+                                            <li>
+                                                First year that the crew was entirely student-led.
+                                            </li>
+                                            <li>Identified project scope and requirements.</li>
+                                            <li>Ensured timely completion of tasks.</li>
+                                            <li>Coordinated crew setup and take-down efforts.</li>
+                                            <li>
+                                                Effectively worked around live program changes and
+                                                weather patterns.
+                                            </li>
+                                            <li>Additionally handled equipment maintenance.</li>
+                                            <li>Acted as administrative liaison.</li>
+                                        </ul>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Farmers' Market</h3>
+                                            <span class="subtitle"
+                                                >Wee Youngn' - 2020, Summer 2023</span
+                                            >
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>Volunteer - Various Roles</p>
+                                        <ul>
+                                            <li>
+                                                Started as a young child attracting customers to a
+                                                fudge stall by looking cute with divine, glorious
+                                                red hair.
+                                            </li>
+                                            <li>Handled the sale of goods.</li>
+                                            <li>Handled the preparation of farm-grown goods.</li>
+                                            <li>Stocked the displays.</li>
+                                            <li>Ran the Kids' Corner activities. (Summer 2023)</li>
+                                        </ul>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">MPS Audio-Visual Club</h3>
+                                            <span class="subtitle">September 2018 - 2020</span>
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>Supervisor</p>
+                                        <ul>
+                                            <li>Identified project scope and requirements.</li>
+                                            <li>Ensured timely completion of tasks.</li>
+                                            <li>Coordinated crew setup and take-down efforts.</li>
+                                        </ul>
+                                    </div>
+                                </section>
+                            </div>
+                        </div>
+                        <!-- Education -->
+                        <div class="item education">
+                            <h2 class="title">Education</h2>
+                            <div class="section_list">
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Carleton University</h3>
+                                            <span class="subtitle"
+                                                >September 2025 to Present - Ottawa, ON</span
+                                            >
+                                        </div>
+                                        <h3 class="status">IN PROGRESS</h3>
+                                    </header>
+                                    <div class="body">
+                                        <p>Bachelor of Arts (Honours)</p>
+                                        <ul>
+                                            <li>Major in Psychology</li>
+                                            <li>[Intended] Minor in Computer Science</li>
+                                            <li>Concentration in Social/Personality Psychology</li>
+                                        </ul>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Osgoode Township High School</h3>
+                                            <span class="subtitle"
+                                                >September 2021 to 2025 - Ottawa, ON</span
+                                            >
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>Gr. 9 to 12</p>
+                                        <ul>
+                                            <li>French Immersion Studies</li>
+                                        </ul>
+                                    </div>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Air Cadets, Squadron 742</h3>
+                                            <span class="subtitle"
+                                                >November 2019 to September 2022 - Ottawa, ON</span
+                                            >
+                                        </div>
+                                    </header>
+                                    <div class="body">
+                                        <p>Sergeant</p>
+                                        <ul>
+                                            <li>Drone Pilot Training Course (August 2022)</li>
+                                            <li>Cadet Actitivy Program (August 2022)</li>
+                                            <li>Poppy Drive (November 2021)</li>
+                                            <li>Music (June - July 2021)</li>
+                                            <li>Music (March 2021)</li>
+                                            <li>Music (August 2020)</li>
+                                            <li>Web Programming (April 2020)</li>
+                                            <li>Advanced Cybertraining Course (August 2020)</li>
+                                            <li>
+                                                Cadet Band Member (September 2020 - February 2022)
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </section>
+                                <h3 class="early_history">Earlier history available by request.</h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layout_row">
+                        <!-- Awards -->
+                        <div class="item awards">
+                            <h2 class="title">Awards</h2>
+                            <div class="section_list">
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Ontario Scholar</h3>
+                                            <span class="subtitle"
+                                                >Obtained an average of at least eighty percent in
+                                                any six applicable Grade 12 courses.</span
+                                            >
+                                        </div>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">Silver Medalist</h3>
+                                            <span class="subtitle">Average over 90%</span>
+                                        </div>
+                                        <h3 class="status">x2</h3>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <div>
+                                            <h3 class="name">CyberSci Regional Winner</h3>
+                                            <span class="subtitle"
+                                                >The Off-By-Ones - Ottawa, 2025</span
+                                            >
+                                        </div>
+                                    </header>
+                                </section>
+                                <h3 class="early_history">
+                                    Queries about other awards available by request.
+                                </h3>
+                            </div>
+                        </div>
+                        <!-- Certifications -->
+                        <div class="item certifications">
+                            <h2 class="title">Certifications and Diplomas</h2>
+                            <div class="section_list">
+                                <section>
+                                    <header>
+                                        <h3 class="name">Ontario Secondary School Diploma</h3>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <h3 class="name">DELF</h3>
+                                        <h3 class="status">Niveau B2</h3>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <h3 class="name">Red Cross Swimming</h3>
+                                        <h3 class="status">Level 10</h3>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <h3 class="name">Canadian Firearms Safety Course</h3>
+                                        <h3 class="status">PAL</h3>
+                                    </header>
+                                </section>
+                                <h3 class="early_history">
+                                    Queries about certifications available by request.
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layout_row software_row">
+                        <!-- Software and Prog. Languages -->
+                        <!-- Software -->
+                        <div class="item software">
+                            <h2 class="title">Software</h2>
+                            <div class="quick_links">
+                                <div>
+                                    <ion-icon name="cube-outline" class="magenta"></ion-icon>
+                                    <p>3D Printing</p>
+                                </div>
+                                <div>
+                                    <ion-icon name="logo-android" class="green"></ion-icon>
+                                    <p>Android</p>
+                                </div>
+                                <a href="https://anubis.techaro.lol/">
+                                    <ion-icon name="globe-outline" class="green"></ion-icon>
+                                    <p>Anubis</p>
+                                </a>
+                                <a href="https://www.blender.org/">
+                                    <ion-icon name="cube-outline" class="orange"></ion-icon>
+                                    <p>Blender</p>
+                                </a>
+                                <div>
+                                    <ion-icon
+                                        name="play-skip-forward-outline"
+                                        class="red r90"
+                                    ></ion-icon>
+                                    <p>CNC Machining</p>
+                                </div>
+
+                                <a href="https://www.docker.com/">
+                                    <ion-icon name="logo-docker" class="docker"></ion-icon>
+                                    <p>Docker</p>
+                                </a>
+                                <a href="https://www.gimp.org/">
+                                    <ion-icon name="image-outline" class="magenta"></ion-icon>
+                                    <p>GIMP</p>
+                                </a>
+                                <a href="https://git-scm.com/">
+                                    <ion-icon name="git-branch-outline" class="orange"></ion-icon>
+                                    <p>Git</p>
+                                </a>
+                                <a href="https://gitea.cutieguwu.ca">
+                                    <ion-icon name="cafe-outline" class="green"></ion-icon>
+                                    <p>Gitea</p>
+                                </a>
+                                <a href="https://github.com/Cutieguwu">
+                                    <ion-icon name="logo-github" class="blue"></ion-icon>
+                                    <p>Github</p>
+                                </a>
+                                <a href="https://www.apple.com/ca/os/ios/">
+                                    <ion-icon name="logo-apple" class="white"></ion-icon>
+                                    <p>iOS</p>
+                                </a>
+                                <a href="https://www.libreoffice.org/">
+                                    <ion-icon name="document-outline" class="green"></ion-icon>
+                                    <p>LibreOffice</p>
+                                </a>
+                                <a href="https://www.kernel.org/category/about.html">
+                                    <ion-icon name="logo-tux" class="white"></ion-icon>
+                                    <p>Linux</p>
+                                </a>
+                                <a href="https://www.apple.com/ca/os/macos/">
+                                    <ion-icon name="logo-apple" class="white"></ion-icon>
+                                    <p>MacOS</p>
+                                </a>
+                                <a href="https://www.office.com/">
+                                    <ion-icon name="apps-outline" class="orange"></ion-icon>
+                                    <p>MS Office</p>
+                                </a>
+                                <a href="https://www.microsoft.com/en-ca/windows">
+                                    <ion-icon name="logo-windows" class="blue"></ion-icon>
+                                    <p>MS Windows</p>
+                                </a>
+                                <a href="https://musescore.org/en">
+                                    <ion-icon name="musical-notes" class="cyan"></ion-icon>
+                                    <p>MuseScore Studio</p>
+                                </a>
+                                <a href="https://nextcloud.com/">
+                                    <ion-icon name="apps-outline" class="cyan"></ion-icon>
+                                    <p>Nextcloud</p>
+                                </a>
+                                <a href="https://nginx.org/en/">
+                                    <ion-icon name="globe-outline" class="green"></ion-icon>
+                                    <p>Nginx</p>
+                                </a>
+                                <a href="https://obsproject.com/">
+                                    <ion-icon name="aperture-outline" class="white"></ion-icon>
+                                    <p>OBS</p>
+                                </a>
+                                <a href="https://www.adobe.com/ca/products/photoshop.html">
+                                    <ion-icon name="image-outline" class="blue"></ion-icon>
+                                    <p>Photoshop</p>
+                                </a>
+                                <a href="https://www.prusa3d.com/page/prusaslicer_424/">
+                                    <ion-icon name="layers-outline" class="orange"></ion-icon>
+                                    <p>PrusaSlicer</p>
+                                </a>
+                                <a
+                                    href="https://shopbottools.com/support-resources/control-software/"
+                                >
+                                    <ion-icon name="keypad-outline" class="blue"></ion-icon>
+                                    <p>ShopBot Control Software</p>
+                                </a>
+                                <a href="https://www.vectric.com/products/aspire/">
+                                    <ion-icon
+                                        name="play-skip-forward-outline"
+                                        class="red r90"
+                                    ></ion-icon>
+                                    <p>Vectric Aspire</p>
+                                </a>
+                                <a href="https://www.zotero.org/">
+                                    <ion-icon
+                                        name="document-attach-outline"
+                                        class="orange"
+                                    ></ion-icon>
+                                    <p>Zotero</p>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- Prog. Languages -->
+                        <div class="item prog_languages">
+                            <h2 class="title">Prog. Languages</h2>
+                            <div class="quick_links">
+                                <a href="https://asciidoc.org/">
+                                    <ion-icon name="document-text-outline" class="cyan"></ion-icon>
+                                    <p>AsciiDoc</p>
+                                </a>
+                                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">
+                                    <ion-icon name="logo-css3" class="purple"></ion-icon>
+                                    <p>CSS</p>
+                                </a>
+                                <a href="https://docs.docker.com/compose/">
+                                    <ion-icon name="logo-docker" class="docker"></ion-icon>
+                                    <p>Docker Compose</p>
+                                </a>
+                                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">
+                                    <ion-icon name="logo-html5" class="orange"></ion-icon>
+                                    <p>HTML</p>
+                                </a>
+                                <a href="https://www.json.org/json-en.html">
+                                    <ion-icon name="shapes-outline" class="cyan"></ion-icon>
+                                    <p>JSON</p>
+                                </a>
+                                <a href="https://www.markdownguide.org/">
+                                    <ion-icon name="logo-markdown" class="indigo"></ion-icon>
+                                    <p>Markdown</p>
+                                </a>
+                                <a href="https://nginx.org/en/docs/">
+                                    <ion-icon name="globe-outline" class="green"></ion-icon>
+                                    <p>Nginx</p>
+                                </a>
+                                <a href="https://www.python.org/">
+                                    <ion-icon name="logo-python" class="blue"></ion-icon>
+                                    <p>Python</p>
+                                </a>
+                                <a href="https://github.com/ron-rs/ron">
+                                    <ion-icon name="shapes-outline" class="orange"></ion-icon>
+                                    <p>RON</p>
+                                </a>
+                                <a href="https://www.rust-lang.org/">
+                                    <ion-icon name="cog-outline" class="orange"></ion-icon>
+                                    <p>Rust</p>
+                                </a>
+                                <a href="https://sass-lang.com/">
+                                    <ion-icon name="logo-sass" class="magenta"></ion-icon>
+                                    <p>SCSS</p>
+                                </a>
+                                <a href="https://toml.io/en/">
+                                    <ion-icon name="shapes-outline" class="orange"></ion-icon>
+                                    <p>TOML</p>
+                                </a>
+                                <a href="https://www.gnu.org/software/bash/manual/bash.html">
+                                    <ion-icon name="terminal-outline" class="green"></ion-icon>
+                                    <p>[Bash] Shell</p>
+                                </a>
+                                <a href="https://yaml.org/">
+                                    <ion-icon name="shapes-outline" class="yellow"></ion-icon>
+                                    <p>YAML</p>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer pane_details">
+            <div class="spacer_container">
+                <h2>Contact Info</h2>
+                <div class="section_list">
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">
+                                    <a href="mailto:olivia.a.brooks77@gmail.com">Email</a>
+                                </h3>
+                                <span class="subtitle">olivia.a.brooks77@gmail.com</span>
+                            </div>
+                        </header>
+                    </section>
+                </div>
+            </div>
+            <div class="spacer_container">
+                <h2>Spoken Languages</h2>
+                <div class="section_list">
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">English</h3>
+                                <span class="subtitle">Fluent</span>
+                            </div>
+                        </header>
+                    </section>
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">Français</h3>
+                                <span class="subtitle">DELF B2</span>
+                            </div>
+                        </header>
+                    </section>
+                </div>
+            </div>
+            <div class="spacer_container">
+                <h2>References</h2>
+                <div class="section_list">
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">By Request</h3>
+                            </div>
+                        </header>
+                    </section>
+                </div>
+            </div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/robots.txt

@@ -0,0 +1 @@
+

src/style.scss

@@ -0,0 +1,3 @@
+@use "partials/a_common";
+
+@use "partials/page_resume";

style.css

@@ -1,157 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    /*outline: 1px solid red;*/
-}
-
-h1 {
-    font-size: 3.3vh;
-}
-
-h2 {
-    font-size: 2.5vh;
-}
-
-p {
-    font-size: 1.65vh;
-}
-
-a {
-    font-size: 1.65vh;
-}
-
-hr {
-    margin: 1.25vh;
-}
-
-.viewport {
-    height: 100vh;
-    width: 100vw;
-    background-image: url(img/background.png);
-    background-position: center;
-    background-size: cover;
-    background-blend-mode: multiply;
-    align-items: flex-start;
-    display: flex;
-    flex-flow: row wrap;
-}
-
-.nav_pane {
-    padding: 1em;
-    gap: 1em;
-    width: min-content;
-    align-content: start;
-    display: grid;
-    float: left;
-}
-
-.nav_logo {
-    color: lightpink;
-    font-family: Arial, Helvetica, sans-serif;
-    text-align: center;
-    height: fit-content;
-}
-
-.nav_menu {
-    list-style: none;
-    min-width: fit-content;
-    display: grid;
-    grid-auto-flow: row;
-    row-gap: 1em;
-}
-
-.nav_body {
-    background-color: rgba(0, 0, 0, 50%);
-    border-radius: 50cqh;
-    height: auto;
-    transition: 0.4s ease-out;
-}
-
-.nav_body:hover {
-    transform: scaleX(1.15);
-    transition: 0s ease-in;
-}
-
-.nav_body:hover * {
-    color: darkviolet;
-    transition: 0s ease-out;
-}
-
-.nav_title:hover {
-    color: darkviolet;
-    transition: 0s ease-out;
-}
-
-.nav_title {
-    text-decoration-line: none;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: bold;
-    white-space: nowrap;
-    font-size: 1.65vh;
-    padding-left: 1cqw;
-    padding-right: 1cqw;
-    transition: 0.4s ease-out;
-    float: left;
-    text-transform: uppercase;
-    color: lightpink;
-}
-
-.dropdown {
-    list-style: none;
-}
-
-.dropdown .dropdown_header {
-    display: grid;
-    grid-template-columns: 1fr min-content;
-    grid-auto-flow: column;
-}
-
-.dropdown_header ion-icon {
-    margin-right: 0.5vw;
-    align-self: center;
-    width: 1.65vh;
-    height: 1.65vh;
-    float: right;
-    color: lightpink;
-    transition-duration: 0.25s;
-}
-
-.dropdown_body {
-    display: none;
-    border-bottom-left-radius: 1em;
-    border-bottom-right-radius: 1em;
-    background-color: rgba(0, 0, 0, 50%);
-}
-
-.dropdown:hover .dropdown_body {
-    display: grid;
-}
-
-.dropdown:hover .dropdown_header {
-    transform: scaleX(1.15);
-}
-
-.dropdown:hover .dropdown_header ion-icon {
-    rotate: 90deg;
-    transition-duration: 0.25s;
-}
-
-.dropdown_body:hover {
-    display: grid;
-}
-
-.main_pane {
-    padding: 1rem;
-    background-color: rgba(0, 0, 0, 50%);
-    color: white;
-}
-
-.error_pane {
-    padding: 1rem;
-    width: max-content;
-    margin: auto; /* center object */
-    text-align: center;
-    background-color: rgba(0, 0, 0, 50%);
-    color: white;
-    border-radius: 1cqh;
-}

templates/colour_theme.svg

@@ -0,0 +1,345 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="390mm"
+   height="225mm"
+   viewBox="0 0 390 225"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="colour_theme.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.7"
+     inkscape:cx="602.85714"
+     inkscape:cy="397.14286"
+     inkscape:window-width="1920"
+     inkscape:window-height="1042"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="true" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Background"
+     style="fill:#ffffff;fill-opacity:1"
+     inkscape:highlight-color="#ffa7ec">
+    <rect
+       style="fill:#353535;fill-opacity:1;stroke:none;stroke-width:0.313829"
+       id="rect1"
+       width="225"
+       height="390"
+       x="-225"
+       y="7.0208336e-07"
+       transform="rotate(-90)"
+       inkscape:label="bg" />
+  </g>
+  <g
+     inkscape:label="Colour Swatches"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="fill:#ffffff;fill-opacity:1"
+     transform="translate(55,-55.000001)"
+     inkscape:highlight-color="#c6ff8b">
+    <rect
+       style="fill:#f5f5f5;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-0-2"
+       width="50"
+       height="50"
+       x="-275"
+       y="225"
+       transform="rotate(-90)"
+       inkscape:label="white-3" />
+    <rect
+       style="fill:#e5e5e5;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect3-9-3"
+       width="50"
+       height="50"
+       x="-220.00002"
+       y="225"
+       transform="rotate(-90)"
+       inkscape:label="white-2" />
+    <rect
+       style="fill:#d9d9d9;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect4-3-6"
+       width="50"
+       height="50"
+       x="-165.00002"
+       y="225"
+       transform="rotate(-90)"
+       inkscape:label="white-1" />
+    <rect
+       style="fill:#bfbfbf;fill-opacity:1;stroke:none;stroke-width:0.247;stroke-dasharray:none;stroke-opacity:1"
+       id="rect5-6-1"
+       width="50"
+       height="50"
+       x="-110"
+       y="225"
+       transform="rotate(-90)"
+       inkscape:label="white-0" />
+    <rect
+       style="fill:#944db6;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-35"
+       width="50"
+       height="50"
+       x="-110"
+       y="280.12329"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="highlight-hover" />
+    <rect
+       style="fill:#272727;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect3-5-6"
+       width="50"
+       height="50"
+       x="-220.00002"
+       y="170"
+       transform="rotate(-90)"
+       inkscape:label="block-2" />
+    <rect
+       style="fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect4-6-2"
+       width="50"
+       height="50"
+       x="-165.00002"
+       y="170"
+       transform="rotate(-90)"
+       inkscape:label="block-1" />
+    <rect
+       style="fill:#0d0d0d;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect5-2-6"
+       width="50"
+       height="50"
+       x="-110"
+       y="170"
+       transform="rotate(-90)"
+       inkscape:label="block-0" />
+    <rect
+       style="display:inline;fill:#2a223e;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-3-0"
+       width="50"
+       height="50"
+       x="-275"
+       y="170"
+       transform="rotate(-90)"
+       inkscape:label="background-4" />
+    <rect
+       style="fill:#211635;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect3-9"
+       width="50"
+       height="50"
+       x="-275"
+       y="115"
+       transform="rotate(-90)"
+       inkscape:label="background-3" />
+    <rect
+       style="fill:#231833;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect4-3"
+       width="50"
+       height="50"
+       x="-220.00002"
+       y="115"
+       transform="rotate(-90)"
+       inkscape:label="background-2" />
+    <rect
+       style="fill:#170d28;fill-opacity:1;stroke:none;stroke-width:0.247;stroke-dasharray:none"
+       id="rect5-6"
+       width="50"
+       height="50"
+       x="-165.00002"
+       y="115"
+       transform="rotate(-90)"
+       inkscape:label="background-1" />
+    <rect
+       style="fill:#130b21;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-0"
+       width="50"
+       height="50"
+       x="-110"
+       y="115"
+       transform="rotate(-90)"
+       inkscape:label="background-0" />
+    <rect
+       style="fill:#ff9f9f;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect5-2"
+       width="50"
+       height="50"
+       x="-165.00002"
+       y="60"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="accent-pink" />
+    <rect
+       style="fill:#df67df;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect4-6-2-9"
+       width="50"
+       height="50"
+       x="-110"
+       y="60"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="accent-magenta" />
+    <rect
+       style="fill:#a355d3;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect4"
+       width="50"
+       height="50"
+       x="-275"
+       y="5.0000033"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="accent-purple" />
+    <rect
+       style="fill:#874ac0;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2"
+       width="50"
+       height="50"
+       x="-220"
+       y="5.0000033"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="accent-indigo" />
+    <rect
+       style="fill:#5f62e2;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect3"
+       width="50"
+       height="50"
+       x="-165"
+       y="5.0000024"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="accent-blue" />
+    <rect
+       style="display:inline;fill:#a7edef;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-3"
+       width="50"
+       height="50"
+       x="-110"
+       y="5.0000024"
+       transform="rotate(-90)"
+       inkscape:label="accent-cyan" />
+    <rect
+       style="fill:#c5e689;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect5"
+       width="50"
+       height="50"
+       x="-275"
+       y="-50"
+       transform="rotate(-90)"
+       inkscape:label="accent-green" />
+    <rect
+       style="display:inline;fill:#e4d281;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect3-5"
+       width="50"
+       height="50"
+       x="-220"
+       y="-50"
+       transform="rotate(-90)"
+       inkscape:label="accent-yellow" />
+    <rect
+       style="display:inline;fill:#e18142;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect5-2-6-2"
+       width="50"
+       height="50"
+       x="-165"
+       y="-50"
+       transform="rotate(-90)"
+       inkscape:label="accent-orange" />
+    <rect
+       style="display:inline;fill:#cb4c4c;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect4-6"
+       width="50"
+       height="50"
+       x="-110"
+       y="-50"
+       transform="rotate(-90)"
+       inkscape:label="accent-red" />
+    <rect
+       style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-3-0-7-6"
+       width="50"
+       height="50"
+       x="-275"
+       y="280.12329"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="unused" />
+    <rect
+       style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect3-5-6-5-2"
+       width="50"
+       height="50"
+       x="-220"
+       y="280.12329"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="unused" />
+    <rect
+       style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect4-6-2-9-9"
+       width="50"
+       height="50"
+       x="-165"
+       y="280.12329"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="unused" />
+    <rect
+       style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-3-0-7"
+       width="50"
+       height="50"
+       x="-275"
+       y="60"
+       transform="rotate(-90)"
+       inkscape:label="unused" />
+    <rect
+       style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect3-5-6-5"
+       width="50"
+       height="50"
+       x="-220"
+       y="60"
+       transform="rotate(-90)"
+       inkscape:label="unused" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Separators"
+     inkscape:highlight-color="#ff9254">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       d="M 112.5,57.500015 V 277.50002"
+       id="path1"
+       inkscape:label="Accent/Background"
+       transform="translate(55.000001,-55.000001)" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       d="M 277.5,57.499996 V 277.50001"
+       id="path1-9"
+       inkscape:label="White/CSS States"
+       transform="translate(55.000001,-55.000001)" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       d="M 222.5,57.500001 V 277.50001"
+       id="path2"
+       inkscape:label="Block U Background/White"
+       transform="translate(55.000001,-55.000001)" />
+    <path
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       d="M 167.5,57.500001 V 222.5 h 55"
+       id="path3"
+       sodipodi:nodetypes="cc"
+       inkscape:label="Background/Block"
+       transform="translate(55.000001,-55.000001)" />
+  </g>
+</svg>

templates/device_queries.css

@@ -0,0 +1,11 @@
+/* Mobile Phone */
+@media (max-width: 600px) {
+}
+
+/* Tablets and other weird intermediary stuff. */
+@media (min-width: 601px) and (max-width: 1023) {
+}
+
+/* Desktops and Laptops */
+@media (min-width: 1024) {
+}