Fix rss.xml form.

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

.gitignore

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

balloon.py

@@ -3,9 +3,7 @@ from __future__ import annotations
 from dataclasses import dataclass
 from types import NoneType
 from typing import Optional
-from icecream.icecream import print_function
 from result import Result, Ok, Err
-from icecream import ic
 import os
 import sys
 
@@ -49,7 +47,7 @@ class Tag:
         return param_value
 
     def write(self) -> str:
-        return f'<{self.value}>{self.trail if self.trail != None else ''}'
+        return f'<{self.value}>{self.trail if self.trail != None else ""}'
 
 @dataclass
 class HTML:
@@ -104,30 +102,27 @@ def main() -> None:
     #   Incorrect number of arguments
     #   Long help flag
     #   Short help flag
-    if len(sys.argv) != 2 or (
+    if len(sys.argv) != 3 or (
         sys.argv[0] == '--help'
         or sys.argv[0] == '-h'
     ):
         help()
         return
 
-    file_name = sys.argv[1].removeprefix('src/')
+    with open(str(WORK_DIR) + sys.argv[1], 'rt') as f:
-
-    with open(str(WORK_DIR) + 'src/' + file_name, 'rt') as f:
         html_src = HTML(f.read())
 
+    # Patch to make sure that target paths are available.
     try:
-        os.makedirs(str(WORK_DIR) + 'target/' + os.path.dirname(file_name))
+        os.makedirs(str(WORK_DIR) + os.path.dirname(sys.argv[2]))
     except FileExistsError:
         pass
 
-    with open(str(WORK_DIR) + 'target/' + file_name, 'w') as f:
+    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>')
+    print('Usage: python balloon.py [OPTIONS] <SOURCE> <DESTINATION>')
-    print()
-    print('Note: balloon implicitly assumes that <SOURCE> is in src/, and should inflate into target/')
     print()
     print()
     print('Options:')

build.sh

@@ -1,12 +1,13 @@
-#! /usr/bin/bash
+#!/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.
 
-python=~/.pyenv/versions/3.12.9/bin/python
 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')
@@ -15,58 +16,135 @@ if [ $(expr length "$args") -gt 1 ]
 then
     args=$@
 else
-    args='inflate style copy'
+    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
-        echo -e "$green"Inflating...
+        cmd='python balloon.py'
 
-        files=(`ls src/*.html`)
+        files=(`
-        files+=(`ls src/errors/*.html`)
+            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
+        `)
 
-        for html in "${files[@]}"
+        target_ext='.html'
-        do
-            echo -e "  $cyan$html -> target/"
 
-            eval $python 'balloon.py' $html
+        action=Inflating...
-        done
 
     elif [ "$x" == 'style' ]
     then
-        echo -e "$green"Styling...
+        cmd='sass --update'
 
-        sass src/style.scss target/style.css
+        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
+        `)
 
-        echo -e "$cyan"'  src/style.scss -> target/style.css'
+        target_ext='.css'
+
+        action=Styling...
 
     elif [ "$x" == 'copy' ]
     then
-        echo -e "$green"Copying...
+        mkdir -p target/.well-known
+        mkdir -p target/feed
 
-        files=(
+        cp 'src/feed/rss.xml' 'target/feed/rss.xml'
-            '.well-known/security.txt'
+        cp 'src/robots.txt' 'target/robots.txt'
-            'img'
+        cp 'src/.well-known/security.txt' 'target/.well-known/security.txt'
-            'robots.txt'
-        )
 
-        for item in "${files[@]}"
+        action=Copying...
-        do
+
-            echo -e "$cyan  src/$item -> target/$item"
+    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
 
-            cp -R src/$item target/$item
-        done
     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 '  copy                Copy assets to target'
+
+        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.

colour_theme.svg

@@ -1,275 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="335mm"
-   height="225mm"
-   viewBox="0 0 335 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.7046647"
-     inkscape:cx="603.12373"
-     inkscape:cy="523.65331"
-     inkscape:window-width="1920"
-     inkscape:window-height="1042"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="Background Layer"
-     style="fill:#ffffff;fill-opacity:1">
-    <rect
-       style="fill:#353535;fill-opacity:1;stroke-width:0.290862"
-       id="rect1"
-       width="225"
-       height="335"
-       x="-280"
-       y="-55"
-       transform="rotate(-90,-2.9791666e-7,-55.000001)"
-       inkscape:label="bg" />
-  </g>
-  <g
-     inkscape:label="Foreground Layer"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="fill:#ffffff;fill-opacity:1"
-     transform="translate(55.000001,-55.000001)">
-    <rect
-       style="fill:#f5f5f5;fill-opacity:1;stroke-width:0.246609;stroke:none;stroke-opacity:1"
-       id="rect2-0-2"
-       width="50"
-       height="50"
-       x="-275"
-       y="170"
-       transform="rotate(-90)"
-       inkscape:label="white-3" />
-    <rect
-       style="fill:#e5e5e5;fill-opacity:1;stroke-width:0.246609;stroke:#000000;stroke-opacity:1"
-       id="rect3-9-3"
-       width="50"
-       height="50"
-       x="-220"
-       y="170"
-       transform="rotate(-90)"
-       inkscape:label="white-2" />
-    <rect
-       style="fill:#d9d9d9;fill-opacity:1;stroke-width:0.246609;stroke:#000000;stroke-opacity:1"
-       id="rect4-3-6"
-       width="50"
-       height="50"
-       x="-165"
-       y="170"
-       transform="rotate(-90)"
-       inkscape:label="white-1" />
-    <rect
-       style="fill:#944db6;fill-opacity:1;display:inline;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect2"
-       width="50"
-       height="50"
-       x="-110"
-       y="225"
-       transform="rotate(-90)"
-       inkscape:label="highlight-hover" />
-    <rect
-       style="fill:#bfbfbf;fill-opacity:1;stroke-width:0.247;stroke-dasharray:none;stroke:#000000;stroke-opacity:1"
-       id="rect5-6-1"
-       width="50"
-       height="50"
-       x="-110"
-       y="170"
-       transform="rotate(-90)"
-       inkscape:label="white-0" />
-    <rect
-       style="fill:#272727;fill-opacity:1;stroke-width:0.246609"
-       id="rect3-5-6"
-       width="50"
-       height="50"
-       x="-220"
-       y="115"
-       transform="rotate(-90)"
-       inkscape:label="block-2" />
-    <rect
-       style="fill:#1a1a1a;fill-opacity:1;stroke-width:0.246609"
-       id="rect4-6-2"
-       width="50"
-       height="50"
-       x="-165"
-       y="115"
-       transform="rotate(-90)"
-       inkscape:label="block-1" />
-    <rect
-       style="fill:#0d0d0d;fill-opacity:1;stroke-width:0.246609"
-       id="rect5-2-6"
-       width="50"
-       height="50"
-       x="-110"
-       y="115"
-       transform="rotate(-90)"
-       inkscape:label="block-0" />
-    <rect
-       style="fill:#2a223e;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
-       id="rect2-3-0"
-       width="50"
-       height="50"
-       x="-275"
-       y="115"
-       transform="rotate(-90)"
-       inkscape:label="background-4" />
-    <rect
-       style="fill:#211635;fill-opacity:1;stroke-width:0.246609"
-       id="rect3-9"
-       width="50"
-       height="50"
-       x="-275"
-       y="60"
-       transform="rotate(-90)"
-       inkscape:label="background-3" />
-    <rect
-       style="fill:#231833;fill-opacity:1;stroke-width:0.246609"
-       id="rect4-3"
-       width="50"
-       height="50"
-       x="-220"
-       y="60"
-       transform="rotate(-90)"
-       inkscape:label="background-2" />
-    <rect
-       style="fill:#170d28;fill-opacity:1;stroke-width:0.247;stroke-dasharray:none"
-       id="rect5-6"
-       width="50"
-       height="50"
-       x="-165"
-       y="60"
-       transform="rotate(-90)"
-       inkscape:label="background-1" />
-    <rect
-       style="fill:#130b21;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect2-0"
-       width="50"
-       height="50"
-       x="-110"
-       y="60"
-       transform="rotate(-90)"
-       inkscape:label="background-0" />
-    <rect
-       style="display:inline;fill:#aa7ab7;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect4"
-       width="50"
-       height="50"
-       x="-275"
-       y="-50"
-       transform="rotate(-90)"
-       inkscape:label="accent-purple" />
-    <rect
-       style="fill:#868ab7;fill-opacity:1;display:inline;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect3"
-       width="50"
-       height="50"
-       x="-220"
-       y="-50"
-       transform="rotate(-90)"
-       inkscape:label="accent-blue" />
-    <rect
-       style="fill:#ff9f9f;fill-opacity:1;stroke-width:0.246609"
-       id="rect5-2"
-       width="50"
-       height="50"
-       x="-165"
-       y="-50"
-       transform="rotate(-90)"
-       inkscape:label="accent-pink" />
-    <rect
-       style="fill:#cfeb9e;fill-opacity:1;stroke-width:0.246609"
-       id="rect5"
-       width="50"
-       height="50"
-       x="-110"
-       y="-50"
-       transform="rotate(-90)"
-       inkscape:label="accent-green" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect4-6-2-9"
-       width="50"
-       height="50"
-       x="-165"
-       y="225"
-       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="rect4-6"
-       width="50"
-       height="50"
-       x="-110"
-       y="5"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect2-3"
-       width="50"
-       height="50"
-       x="-275"
-       y="5"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect3-5"
-       width="50"
-       height="50"
-       x="-220"
-       y="5"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect2-3-0-7"
-       width="50"
-       height="50"
-       x="-275"
-       y="225"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect3-5-6-5"
-       width="50"
-       height="50"
-       x="-220"
-       y="225"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect5-2-6-2"
-       width="50"
-       height="50"
-       x="-165"
-       y="5"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-  </g>
-</svg>

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

@@ -1,4 +1,5 @@
 Contact: mailto:olivia.a.brooks77@gmail.com
-Expires: 2026-06-01T04:00:00.000Z
+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

@@ -5,28 +5,32 @@
         <title>Acknowledgements | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">Acknowledgements</p>
+                <h5 class="page">Acknowledgements</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_main">
+        <main class="pane">
-            <p>There are currently no acknowledgements</p>
+            <div class="body">
-            <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
+                <p>There are currently no acknowledgements</p>
-            <p>
+                <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
-                I will get my thanks to various open projects in here in time, but I'm still busy
+                <p>
-                getting the basics handled.
+                    I will get my thanks to various open projects in here in time, but I'm still
-            </p>
+                    busy getting the basics handled.
-        </div>
+                </p>
-        <div class="pane_spacer">
+            </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

@@ -5,29 +5,35 @@
         <title>400 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">400</p>
+                <h5 class="page">Error - 400</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="error_pane">
+        <main class="pane error">
-            <h1>400</h1>
+            <div class="body">
-            <h2>Bad Request!</h2>
+                <header>
-            <hr />
+                    <h1 class="title">400</h1>
-            <p>
+                    <h2>Bad Request!</h2>
-                The server cannot or will not process this request due to apparent client-side error
+                </header>
-                or deception.
+                <hr />
-            </p>
+                <p>
-        </div>
+                    The server cannot or will not process this request due to apparent client-side
-        <div class="pane_spacer">
+                    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

@@ -5,24 +5,30 @@
         <title>401 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">401</p>
+                <h5 class="page">Error - 401</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>401</h1>
+            <div class="body">
-            <h2>Unauthorized!</h2>
+                <header>
-        </div>
+                    <h1 class="title">401</h1>
-        <div class="pane_spacer">
+                    <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

@@ -5,26 +5,32 @@
         <title>403 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">403</p>
+                <h5 class="page">Error - 403</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>403</h1>
+            <div class="body">
-            <h2>Forbidden!</h2>
+                <header>
-            <hr />
+                    <h1 class="title">403</h1>
-            <p>The server is refusing to act upon your request.</p>
+                    <h2>Forbidden!</h2>
-        </div>
+                </header>
-        <div class="pane_spacer">
+                <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

@@ -5,24 +5,30 @@
         <title>404 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">404</p>
+                <h5 class="page">Error - 404</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>404</h1>
+            <div class="body">
-            <h2>Page not found!</h2>
+                <header>
-        </div>
+                    <h1 class="title">404</h1>
-        <div class="pane_spacer">
+                    <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

@@ -5,26 +5,32 @@
         <title>500 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">500</p>
+                <h5 class="page">Error - 500</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>500</h1>
+            <div class="body">
-            <h2>Internal Server Error!</h2>
+                <header>
-            <hr />
+                    <h1 class="title">500</h1>
-            <p>The server has no clue WTF happened here.</p>
+                    <h2>Internal Server Error!</h2>
-        </div>
+                </header>
-        <div class="pane_spacer">
+                <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

@@ -5,26 +5,32 @@
         <title>501 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">501</p>
+                <h5 class="page">Error - 501</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>501</h1>
+            <div class="body">
-            <h2>Not Implemented!</h2>
+                <header>
-            <hr />
+                    <h1 class="title">501</h1>
-            <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
+                    <h2>Not Implemented!</h2>
-        </div>
+                </header>
-        <div class="pane_spacer">
+                <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

@@ -5,26 +5,32 @@
         <title>502 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">502</p>
+                <h5 class="page">Error - 502</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>502</h1>
+            <div class="body">
-            <h2>Bad Gateway!</h2>
+                <header>
-            <hr />
+                    <h1 class="title">502</h1>
-            <p>This service may be offline.</p>
+                    <h2>Bad Gateway!</h2>
-        </div>
+                </header>
-        <div class="pane_spacer">
+                <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

@@ -5,26 +5,32 @@
         <title>503 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">503</p>
+                <h5 class="page">Error - 503</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>503</h1>
+            <div class="body">
-            <h2>Service Unavailable!</h2>
+                <header>
-            <hr />
+                    <h1 class="title">503</h1>
-            <p>The server may be overloaded or down for maintenance.</p>
+                    <h2>Service Unavailable!</h2>
-        </div>
+                </header>
-        <div class="pane_spacer">
+                <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

@@ -2,32 +2,38 @@
 
 <html lang="en-ca">
     <head>
-        <title>Error Template | Cutieguwu</title>
+        <title>504 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">Error Template</p>
+                <h5 class="page">Error - 504</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_error">
+        <main class="pane error">
-            <h1>504</h1>
+            <div class="body">
-            <h2>Gateway Timeout!</h2>
+                <header>
-            <hr />
+                    <h1 class="title">504</h1>
-            <p>
+                    <h2>Gateway Timeout!</h2>
-                The server acted as a proxy and didn't receive a timely response from the upstream
+                </header>
-                server.
+                <hr />
-            </p>
+                <p>
-        </div>
+                    The server acted as a proxy and didn't receive a timely response from the
-        <div class="pane_spacer">
+                    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

@@ -1,11 +1,16 @@
 <meta charset="utf-8" />
 
 <meta name="description" content="Cutieguwu's Official website" />
-<meta
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
-    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_logo.html

@@ -1 +0,0 @@
-<h2 class="nav_logo">Cutieguwu</h2>

src/includes/nav_menu.html

@@ -1,81 +1,69 @@
-<ul class="nav_menu">
+<ul class="menu">
     <!-- Home -->
-    <li class="nav_body">
+    <li class="item">
-        <a class="nav_title" href="index.html">Home</a>
+        <a class="title" href="/">Home</a>
     </li>
 
-    <!-- Minecraft -->
+    <li class="item">
-    <li class="nav_dropdown">
+        <a class="title" href="/blog/">Blog</a>
-        <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>
 
-    <hr />
+    <li><hr /></li>
 
     <!-- About -->
-    <li class="nav_body"><a class="nav_title" href="#">About</a></li>
+    <li class="item"><a class="title" href="/about.html">About</a></li>
 
     <!-- Pronoun Pages -->
-    <li class="nav_dropdown">
+    <li class="item"><a class="title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a></li>
-        <a class="dropdown_header nav_body" href="https://pronouns.page/@Cutieguwu">
-            <p class="nav_title">Pronoun Pages</p>
-            <ion-icon name="chevron-forward-outline"></ion-icon>
-        </a>
-        <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>
 
     <!-- External Links -->
-    <li class="nav_dropdown">
+    <li class="dropdown">
-        <div class="dropdown_header nav_body">
+        <input type="checkbox" id="toggle_ext_links" />
-            <p class="nav_title">External Links</p>
+        <label for="toggle_ext_links" class="item">
+            <p class="title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
+        </label>
-        <div class="dropdown_body">
+        <ul>
-            <a class="nav_title" href="https://github.com/Cutieguwu">Github</a>
+            <li><a class="title" href="https://github.com/Cutieguwu">Github (Mirror)</a></li>
-            <a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
+            <li><a class="title" href="https://play.picoctf.org/users/cutieguwu">picoCTF</a></li>
-        </div>
+            <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>
 
-    <hr />
+    <li><hr /></li>
 
     <!-- Public Services -->
-    <li class="nav_dropdown">
+    <li class="dropdown">
-        <div class="dropdown_header nav_body">
+        <input type="checkbox" id="toggle_srv_pub" />
-            <p class="nav_title">Public Services</p>
+        <label for="toggle_srv_pub" class="item">
+            <p class="title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
+        </label>
-        <div class="dropdown_body">
+        <ul>
-            <a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a>
+            <li><a class="title" href="https://cyberchef.cutieguwu.ca">CyberChef</a></li>
-        </div>
+        </ul>
     </li>
 
     <!-- Services -->
-    <li class="nav_dropdown">
+    <li class="dropdown">
-        <div class="dropdown_header nav_body">
+        <input type="checkbox" id="toggle_srv_priv" />
-            <p class="nav_title">Services</p>
+        <label for="toggle_srv_priv" class="item">
+            <p class="title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
+        </label>
-        <div class="dropdown_body">
+        <ul>
-            <a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a>
+            <li><a class="title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a></li>
-            <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
+        </ul>
-            <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>
 
-    <hr />
+    <li><hr /></li>
 
     <!-- Website Disclosure -->
-    <li class="nav_body"><a class="nav_title" href="#">Website Disclosure</a></li>
+    <li class="item">
-    <li class="nav_body"><a class="nav_title" href="acknowledgements.html">Acknowledgements</a></li>
+        <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

@@ -1,17 +1,21 @@
-<div class="nav_quick_links">
+<div class="quick_links">
     <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
-        <ion-icon
+        <ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="green"></ion-icon>
-            name="git-branch-outline"
-            class="icon_gitea"
-            alt="(Gitea) Website Source"
-        ></ion-icon>
-    </a>
-    <a href="https://github.com/Cutieguwu/cutieguwu-site" title="(Mirror) Website Source">
-        <ion-icon name="logo-github" class="icon_github" alt="(Mirror) Website Source"></ion-icon>
     </a>
     <a
         href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
         title="MIT License"
-        ><ion-icon name="book-outline" class="icon_license" alt="MIT License"></ion-icon
+    >
-    ></a>
+        <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

@@ -1,2 +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

@@ -5,24 +5,42 @@
         <title>Home | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
-        <nav class="pane_nav">
+        <nav class="pane">
-            <include src="includes/nav_logo.html" />
+            <include src="includes/nav_header.html" />
             <include src="includes/nav_menu.html" />
             <div class="location">
-                <p class="location_header">You are here:</p>
+                <header><h4>You are here:</h4></header>
-                <p class="location_page">Home</p>
+                <h5 class="page">Home</h5>
             </div>
             <include src="includes/nav_quick_links.html" />
         </nav>
-        <div class="pane_main">
+        <main class="pane">
-            <h1>Home</h1>
+            <div class="body">
-            <p>lorem ipsum idk what else there is in this latin phrase</p>
+                <header>
-        </div>
+                    <h1 class="title">Home</h1>
-        <div class="pane_spacer">
+                    <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

@@ -1,39 +1,62 @@
-.nav_dropdown {
+.dropdown {
-    .dropdown_header {
+    > label.item {
         display: grid;
         grid-template-columns: 1fr min-content;
         align-items: center;
 
-        ion-icon {
+        > ion-icon {
-            /*
-            This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
-            */
-            margin-right: 0.5rem;
-
             align-self: center;
             transition-duration: 0.25s;
         }
     }
 
-    .dropdown_body {
+    > 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;
     }
 }
 
-.nav_dropdown:hover {
+@media (max-width: 600px) {
-    .dropdown_header {
+    .dropdown {
-        transform: var(--transform-scale-x);
+        > label.item > ion-icon {
-
+            margin-right: var(--padding-mobile);
-        ion-icon {
-            rotate: 90deg;
-            transition-duration: 0.25s;
         }
     }
+}
 
-    .dropdown_body {
+// Use a toggle for menu entries on mobile and intermediary devices.
-        display: grid;
+@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

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

src/partials/_nav_logo.scss

@@ -1,5 +0,0 @@
-.nav_logo {
-    font-family: var(--font-family-generic);
-    text-align: center;
-    margin: 0;
-}

src/partials/_nav_menu.scss

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

@@ -1,54 +1,52 @@
-.nav_quick_links {
+nav.pane .quick_links {
-    --cols: 5;
+    --item-padding: 0.25rem;
-    --item-padding: 0.35rem;
-    --item-edge-length: 1.25rem;
-    --item-size: calc(
-        var(--item-edge-length) + calc(var(--item-padding) * 2)
-    );
 
-    /*
+    justify-content: space-between;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    margin-right: auto;
-    */
-
-    display: grid;
-    grid-template-columns:
-        var(--item-size) var(--item-size) var(--item-size)
-        var(--item-size) var(--item-size);
-    align-items: center;
-
-    gap: var(--spacing-menu-gap)
-        calc(
-            calc(100% - calc(var(--item-size) * var(--cols))) /
-                calc(var(--cols) - 1)
-        );
 
     a {
-        width: var(--item-size);
+        background-color: var(--background-2);
-        height: var(--item-size);
 
-        * {
+        transition: var(--transition-fade);
-            width: var(--item-edge-length);
-            height: var(--item-edge-length);
-            padding: var(--item-padding);
 
-            background-color: var(--background-2);
+        ion-icon {
-            border-radius: var(--border-radius-small)
+            width: var(--item-size);
-                var(--border-radius-large);
+        }
+    }
+
+    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);
         }
 
-        .icon_gitea {
+        > .phantom {
-            color: var(--accent-green);
+            background-color: inherit;
-        }
-
-        .icon_github {
-            color: var(--accent-blue);
-        }
-
-        .icon_license {
-            color: var(--accent-purple);
         }
     }
 }

src/partials/_nav_title.scss

@@ -1,5 +1,6 @@
-.nav_title {
+.menu .title {
-    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
+    // Need to force inheritence, otherwise <a> would require
+    // overrides for all color states from base styling for element.
     color: inherit;
     text-decoration: inherit;
 
@@ -7,13 +8,20 @@
     font-weight: bold;
     white-space: nowrap;
     margin: inherit;
-    padding: 0 var(--spacing-horizontal);
+    // padding: 0 var(--spacing-small);
     transition: var(--transition-fade);
-    text-transform: uppercase;
     display: block;
 }
 
-.nav_title:hover {
+@media (max-width: 600px) {
-    color: var(--highlight-hover);
+    .nav_title {
-    transition: var(--transition-cut);
+        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

@@ -1,6 +1,13 @@
-.pane_error {
+.pane.error {
     width: max-content;
-    margin: auto; /* center object */
+    margin: auto;
+
     text-align: center;
-    background-color: var(--background-2);
+}
+
+@media (max-width: 600px) {
+    .pane.error {
+        margin-top: var(--spacing-large);
+        margin-bottom: var(--spacing-large);
+    }
 }

src/partials/_pane_main.scss

@@ -1,10 +1,56 @@
-.pane_main {
+main.pane {
-    flex: 1;
+    grid-area: main;
-    text-align: center;
-    background-color: var(--background-2);
-    margin: var(--margin-pane);
-    padding: 0;
 
-    border-radius: var(--border-radius-small)
+    > .body,
-        var(--border-radius-large);
+    > 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

@@ -1,17 +1,55 @@
-@use "nav_logo";
+@use "nav_header";
 @use "nav_menu";
 @use "nav_location";
 @use "nav_quick_links";
 
-.pane_nav {
+nav.pane {
-    --spacing-horizontal: 0.75rem;
+    grid-area: nav;
-    --transform-scale-x: scaleX(1.15);
+
+    --padding-mobile: 0.35rem;
+
+    height: min-content;
+
+    display: flex;
+    flex-direction: column;
+
+    position: sticky;
+    top: var(--spacing-large);
+    left: var(--spacing-large);
 
-    margin: var(--margin-pane);
-    padding: 0;
-    gap: var(--spacing-menu-gap);
-    width: min-content;
-    align-content: start;
-    display: grid;
     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

@@ -1,25 +1,20 @@
-.pane_spacer {
+.pane.spacer {
-    margin: var(--margin-pane);
+    grid-area: spacer;
-    padding: 0;
+
-    width: 10vw;
+    width: min-content;
+    height: calc(100vh - calc(var(--spacing-large) * 2));
+
     display: grid;
-    grid-auto-flow: row;
+    grid-auto-flow: row dense;
-    gap: var(--spacing-menu-gap);
 
     .spacer_container {
-        margin: 0;
+        padding: var(--spacing-small);
         background-color: var(--background-2);
-        height: calc(
+        height: 100%;
-            50vh - var(--margin-pane) - calc(
+        border-radius: var(--border-radius-leaf);
-                    var(--spacing-menu-gap) / 2
-                )
-        );
-        flex: 1;
-        border-radius: var(--border-radius-small)
-            var(--border-radius-large);
 
-        /* Vertical Text Align */
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
 
@@ -29,3 +24,7 @@
         }
     }
 }
+
+.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

@@ -1,2 +1 @@
-User-agent: *
+
-Disallow: /

src/style.scss

@@ -1,83 +1,3 @@
-@use "partials/pane_main";
+@use "partials/a_common";
-@use "partials/pane_nav";
-@use "partials/pane_spacer";
 
-@use "partials/pane_error";
+@use "partials/page_resume";
-
-: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. Excepting white--white's special.
-    Eg. Current dropdown menu.
-
-    */
-    font-size: var(--font-size-generic);
-
-    --accent-green: #cfeb9eff;
-    --accent-pink: #ff9f9fff;
-    --accent-blue: #868ab7ff;
-    --accent-purple: #aa7ab7ff;
-
-    --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.65vh;
-    --font-family-generic: Arial, Sans-Serif, Helvetica;
-
-    --transition-fade: 0.4s ease-out;
-    --transition-cut: none;
-
-    --border-radius-large: 1rem;
-    --border-radius-small: calc(var(--border-radius-large) / 2);
-
-    --margin-pane: 1.5rem;
-
-    --spacing-menu-gap: 1rem;
-}
-
-/*
-* {
-    outline: 1px solid red;
-}
-*/
-
-h1 {
-    font-size: 3.3vh;
-}
-
-h2 {
-    font-size: 2.5vh;
-}
-
-ion-icon {
-    width: 1rem;
-    height: 1rem;
-}
-
-.viewport {
-    /* Adds a margin otherwise for some reason. */
-    margin: 0;
-
-    background-color: var(--background-0);
-    color: var(--white-3);
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-}

src/templates/error.html

@@ -1,30 +0,0 @@
-<!doctype html>
-
-<html lang="en-ca">
-    <head>
-        <title>Error Template | Cutieguwu</title>
-        <include src="includes/meta.html" />
-    </head>
-    <body class="viewport">
-        <nav class="pane_nav">
-            <include src="includes/nav_logo.html" />
-            <include src="includes/nav_menu.html" />
-            <div class="location">
-                <p class="location_header">You are here:</p>
-                <p class="location_page">Error Template</p>
-            </div>
-            <include src="includes/nav_quick_links.html" />
-        </nav>
-        <div class="pane_error">
-            <h1>Error Code</h1>
-            <h2>Error Title</h2>
-            <hr />
-            <p>Error details and explaination.</p>
-        </div>
-        <div class="pane_spacer">
-            <div class="spacer_container"><p>#AD</p></div>
-            <div class="spacer_container"><p>#AD</p></div>
-        </div>
-        <include src="includes/scripts.html" />
-    </body>
-</html>

src/templates/main.html

@@ -1,25 +0,0 @@
-<!doctype html>
-
-<html lang="en-ca">
-    <head>
-        <title>Main Template | Cutieguwu</title>
-        <include src="includes/meta.html" />
-    </head>
-    <body class="viewport">
-        <nav class="pane_nav">
-            <include src="includes/nav_logo.html" />
-            <include src="includes/nav_menu.html" />
-            <div class="location">
-                <p class="location_header">You are here:</p>
-                <p class="location_page">Main Template</p>
-            </div>
-            <include src="includes/nav_quick_links.html" />
-        </nav>
-        <div class="pane_main"></div>
-        <div class="pane_spacer">
-            <div class="spacer_container"><p>#AD</p></div>
-            <div class="spacer_container"><p>#AD</p></div>
-        </div>
-        <include src="includes/scripts.html" />
-    </body>
-</html>

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) {
+}