Fix rss.xml form.

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

.gitignore

@@ -1,2 +1,2 @@
 **/target
-src/resume.html
+**/__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:

build.sh

@@ -16,67 +16,118 @@ 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/.well-known
+mkdir -p target
 
 for x in $args
 do
-    cmd=''
+    files=()
 
-    files=''
-
-    src_ext=''
     target_ext=''
+    target_opt=''
 
     if [ "$x" == 'inflate' ]
     then
-        cmd='~/.pyenv/versions/3.12.9/bin/python balloon.py'
+        cmd='python balloon.py'
 
-        files=(`ls src/*.html`)
-        # Because bash won't let **/ find files without another nested dir.
-        files+=(`ls src/blog/*.html`) # This wouldn't be needed under zsh.
-        files+=(`ls src/blog/**/*.html`)
-        files+=(`ls src/errors/*.html`)
+        files=(`
+            find src -not\
+                \(\
+                    \(\
+                        -path "src/.well-known/*" -o\
+                        -path "src/feed/*" -o\
+                        -path "src/img/*" -o\
+                        -path "src/includes/*" -o\
+                        -path "src/partials/*" -o\
+                        -path "src/templates/*"\
+                    \)\
+                -prune \)\
+                -a\
+                -type f\
+                -name "*.html"\
+                -print
+        `)
+
+        target_ext='.html'
 
         action=Inflating...
 
     elif [ "$x" == 'style' ]
     then
-        cmd='sass'
+        cmd='sass --update'
 
-        files=(`ls src/**/style.scss`)
+        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
+        `)
 
-        src_ext='.scss'
         target_ext='.css'
 
         action=Styling...
 
     elif [ "$x" == 'copy' ]
     then
-        cmd='cp -Ru'
+        mkdir -p target/.well-known
+        mkdir -p target/feed
 
-        files=(
-            'src/.well-known/'
-            'src/feed/'
-            'src/img/'
-            'src/robots.txt'
-        )
+        cp 'src/feed/rss.xml' 'target/feed/rss.xml'
+        cp 'src/robots.txt' 'target/robots.txt'
+        cp 'src/.well-known/security.txt' 'target/.well-known/security.txt'
 
         action=Copying...
 
+    elif [ "$x" == 'conv-img' ]
+    then
+        cmd='cwebp -z 9 -m 6'
+
+        files=(`find src/img -type f`)
+
+        target_ext='.webp'
+        target_opt='-o'
+
+        mkdir -p target/img/blog/posts
+
+        action='Converting Images...'
+
+    elif [ "$x" == 'clean' ]
+    then
+        echo -e "$green"Cleaning...
+
+        rm -Rv target
+
+        break
+
     else
         echo -e "$green"Usage:"$cyan" build.sh [OPTIONS] [COMMAND]
         echo
         echo -e "$green"Options:"$cyan"
         echo '  -h, --help          Print help'
         echo
+        echo
         echo -e "$green"Commands:"$cyan"
+        echo '  conv-img            Convert images to target'
+        echo '  copy                Copy assets to target'
         echo '  inflate             Inflate the HTML source'
         echo '  style               Compile SCSS to CSS'
-        echo '  copy                Copy assets to target'
+
+        echo
+        echo '  clean               Wipe the target directory'
 
         break
     fi
@@ -85,12 +136,15 @@ do
 
     for src in "${files[@]}"
     do
-        target="${src//$src_prefix}"
-        target="${target//$src_ext}"
-        target="target/$target$target_ext"
+        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"
+        eval "$cmd $src $target_opt $target"
     done
 done
+
+echo -e "$green"Done.

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

@@ -6,31 +6,29 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">Acknowledgements</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_main">
-                <div class="main_body">
-                    <p>There are currently no acknowledgements</p>
-                    <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
-                    <p>
-                        I will get my thanks to various open projects in here in time, but I'm still
-                        busy getting the basics handled.
-                    </p>
-                </div>
-                <include src="includes/tailer.html" />
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Acknowledgements</h5>
             </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane">
+            <div class="body">
+                <p>There are currently no acknowledgements</p>
+                <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
+                <p>
+                    I will get my thanks to various open projects in here in time, but I'm still
+                    busy getting the basics handled.
+                </p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/blog/index.html

@@ -6,28 +6,31 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">Blog</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_main">
-                <div class="main_body">
-                    <h1>Blog</h1>
+        <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>
-                <include src="includes/tailer.html" />
-            </div>
-            <div class="pane_spacer">
-                <include src="./includes/blog_recent_posts.html" />
-                <div class="spacer_container"><p>#AD</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" />

src/blog/posts/0_divergent_pathways.html

@@ -6,119 +6,116 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">Blog - Divergent Pathways</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_blog">
-                <div class="blog_body">
-                    <div class="header">
-                        <h1 class="title">Divergent Pathways</h1>
-                        <p class="date">Posted: 29 July, 2025</p>
-                        <p class="date">Last Edited: 29 July, 2025</p>
-                    </div>
-                    <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-acheiving 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" />
+        <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>
-            <div class="pane_spacer">
-                <include src="./includes/blog_recent_posts.html" />
-                <div class="spacer_container"><p>#AD</p></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" />

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/style.scss

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

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

@@ -6,32 +6,32 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">400</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>400</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 400</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">400</h1>
                     <h2>Bad Request!</h2>
-                    <hr />
-                    <p>
-                        The server cannot or will not process this request due to apparent
-                        client-side error or deception.
-                    </p>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </header>
+                <hr />
+                <p>
+                    The server cannot or will not process this request due to apparent client-side
+                    error or deception.
+                </p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/errors/401.html

@@ -6,27 +6,27 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">401</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>401</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 401</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">401</h1>
                     <h2>Unauthorized!</h2>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </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" />

src/errors/403.html

@@ -6,29 +6,29 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">403</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>403</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 403</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">403</h1>
                     <h2>Forbidden!</h2>
-                    <hr />
-                    <p>The server is refusing to act upon your request.</p>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </header>
+                <hr />
+                <p>The server is refusing to act upon your request.</p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/errors/404.html

@@ -6,27 +6,27 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">404</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>404</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 404</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">404</h1>
                     <h2>Page not found!</h2>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </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" />

src/errors/500.html

@@ -6,29 +6,29 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">500</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>500</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 500</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">500</h1>
                     <h2>Internal Server Error!</h2>
-                    <hr />
-                    <p>The server has no clue WTF happened here.</p>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </header>
+                <hr />
+                <p>The server has no clue WTF happened here.</p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/errors/501.html

@@ -6,29 +6,29 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">501</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>501</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 501</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">501</h1>
                     <h2>Not Implemented!</h2>
-                    <hr />
-                    <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </header>
+                <hr />
+                <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/errors/502.html

@@ -6,29 +6,29 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">502</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>502</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 502</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">502</h1>
                     <h2>Bad Gateway!</h2>
-                    <hr />
-                    <p>This service may be offline.</p>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </header>
+                <hr />
+                <p>This service may be offline.</p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/errors/503.html

@@ -6,29 +6,29 @@
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">503</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>503</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 503</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">503</h1>
                     <h2>Service Unavailable!</h2>
-                    <hr />
-                    <p>The server may be overloaded or down for maintenance.</p>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </header>
+                <hr />
+                <p>The server may be overloaded or down for maintenance.</p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/errors/504.html

@@ -2,36 +2,36 @@
 
 <html lang="en-ca">
     <head>
-        <title>Error Template | Cutieguwu</title>
+        <title>504 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
     <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">Error Template</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_error">
-                <div class="error_body">
-                    <h1>504</h1>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Error - 504</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane error">
+            <div class="body">
+                <header>
+                    <h1 class="title">504</h1>
                     <h2>Gateway Timeout!</h2>
-                    <hr />
-                    <p>
-                        The server acted as a proxy and didn't receive a timely response from the
-                        upstream server.
-                    </p>
-                </div>
-                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
-            </div>
-            <div class="pane_spacer">
-                <div class="spacer_container"><p>#AD</p></div>
-                <div class="spacer_container"><p>#AD</p></div>
+                </header>
+                <hr />
+                <p>
+                    The server acted as a proxy and didn't receive a timely response from the
+                    upstream server.
+                </p>
             </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer">
+            <div class="spacer_container"><p>#AD</p></div>
+            <div class="spacer_container"><p>#AD</p></div>
         </div>
         <include src="includes/footer.html" />
         <include src="includes/scripts.html" />

src/feed/rss.xml

@@ -4,14 +4,69 @@
 <channel>
     <title>Cutieguwu Yaps</title>
     <link>https://www.cutieguwu.ca/</link>
-    <description
-        >Cutieguwu's blog where she discusses various things.</description>
+    <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>
-        <link
-            >https://www.cutieguwu.ca/blog/posts/0_divergent_pathways.html</link>
+        <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>

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

@@ -1,14 +1,59 @@
-<div class="spacer_container spacer_posts">
-    <h2>Recent</h2>
-    <div class="chunk_list recent_posts">
-        <div class="chunk">
-            <div class="header">
+<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>
-            </div>
-        </div>
+                <a href="/blog/posts/0_divergent_pathways.html" class="status">View</a>
+            </header>
+        </section>
     </div>
 </div>

src/includes/footer.html

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

src/includes/meta.html

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

src/includes/nav_header.html

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

src/includes/nav_logo.html

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

src/includes/nav_menu.html

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

src/includes/nav_quick_links.html

@@ -1,18 +1,21 @@
 <div class="quick_links">
     <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
-        <ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="gitea"></ion-icon>
+        <ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="green"></ion-icon>
     </a>
     <a
         href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
         title="MIT License"
     >
-        <ion-icon name="book-outline" alt="MIT License" class="license"></ion-icon>
+        <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="issue_tracker"></ion-icon>
+        <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="rss"></ion-icon>
+        <ion-icon name="logo-rss" alt="RSS Feed" class="orange"></ion-icon>
     </a>
-    <a class="phantom"></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

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

src/index.html

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

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

@@ -1,22 +1,21 @@
-@use "a_chunk_list";
+@use "_a_colours.css";
+
 @use "a_footer";
 @use "a_layouts";
+@use "a_pane";
 @use "a_quick_links";
-@use "a_pages";
-
-@use "pane_nav";
-@use "pane_spacer";
+@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. Excepting white--white's special.
-    Eg. Current dropdown menu.
-    */
-    font-size: var(--font-size-generic);
+    // 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;
@@ -53,13 +52,12 @@
 
     --border-radius-small: calc(var(--border-radius-large) / 2);
     --border-radius-large: 1rem;
-    --border-radius-leaf: var(--border-radius-small)
-        var(--border-radius-large);
+    --border-radius-leaf: var(--border-radius-small) var(--border-radius-large);
 
-    --margin-pane: 1.5rem;
-
-    --spacing-horizontal: 0.75rem;
-    --spacing-menu-gap: 1rem;
+    --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;
@@ -67,15 +65,26 @@
     --transform-scale-x: scaleX(1.15);
     --transform-scale-y: scaleY(1.15);
 
-    body {
-        background-color: var(--background-0);
-        margin: 0;
-        color: var(--white-3);
+    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; */
 }
@@ -99,16 +108,42 @@ a {
     font-family: var(--font-family-generic);
 }
 
-ion-icon {
-    width: 1rem;
-    height: 1rem;
+// 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;
+    }
 }
 
-.viewport {
-    /* Adds a margin otherwise for some reason. */
-    margin: inherit;
-
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
+// 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

@@ -1,14 +1,17 @@
-.footer {
-    margin: 0;
-    padding: var(--spacing-horizontal);
+body > footer {
+    padding: var(--spacing-small);
     width: min-content;
 
     background-color: var(--background-2);
-    border-top-right-radius: var(--border-radius-large);
+    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

@@ -1,13 +1,26 @@
 .layout_row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    display: grid;
+    grid-auto-flow: column;
+    gap: var(--spacing-small);
 
-    .item {
-        margin: var(--spacing-horizontal);
-        padding: var(--spacing-horizontal);
+    > .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_pages.scss

@@ -1,3 +0,0 @@
-@use "blog_recent_posts";
-
-@use "page_resume";

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

@@ -6,15 +6,13 @@
     flex-wrap: wrap;
     justify-content: center;
 
-    a {
-        height: var(--item-size);
-
+    > a,
+    > div {
         display: grid;
 
         background-color: var(--background-3);
         border-radius: var(--border-radius-leaf);
 
-        margin: 0.5rem;
         padding: var(--item-padding);
         gap: var(--item-padding);
 
@@ -26,10 +24,7 @@
         text-decoration: none;
         color: var(--white-1);
 
-        /*
-        To colour the icons, apply inline styling.
-        */
-        * {
+        > * {
             margin: 0;
             padding: 0;
 

src/partials/_a_section_list.scss

@@ -1,33 +1,35 @@
-.chunk_list {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    text-align: left;
+.section_list {
+    display: grid;
 
-    .chunk,
-    hr {
-        margin: var(--spacing-horizontal);
+    width: 100%;
+
+    > section + section {
+        margin-top: var(--spacing-small);
     }
 
-    .chunk {
-        .header {
+    > 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-horizontal);
+            padding: var(--spacing-small);
+
+            text-align: start;
+
+            width: inherit;
 
             .name,
             .subtitle,
             .status {
-                margin: 0;
-            }
-
-            .name {
-                white-space: nowrap;
+                margin: inherit;
             }
 
             .subtitle {
@@ -42,7 +44,6 @@
             .status {
                 align-self: center;
                 white-space: nowrap;
-                margin-left: calc(var(--spacing-horizontal) * 2);
 
                 text-decoration: none;
                 font-size: 1.17rem;
@@ -50,8 +51,8 @@
             }
         }
 
-        .body {
-            padding: 0 calc(var(--spacing-horizontal) * 2);
+        > .body {
+            padding: 0 calc(var(--spacing-small) * 2);
 
             ul {
                 font-family: var(--font-family-generic);
@@ -63,3 +64,26 @@
         }
     }
 }
+
+.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/_a_tailer.scss

@@ -1,13 +0,0 @@
-.tailer {
-    margin: var(--margin-pane) auto 0;
-    width: min-content;
-
-    font-size: 1.65vh;
-    white-space: nowrap;
-
-    background-color: var(--background-2);
-    border-radius: var(--border-radius-leaf);
-    padding: var(--spacing-horizontal);
-
-    text-align: center;
-}

src/partials/_blog_recent_posts.scss

@@ -1,7 +0,0 @@
-.spacer_posts {
-    justify-content: start !important;
-
-    .recent_posts .chunk .header {
-        background-color: var(--background-1);
-    }
-}

src/partials/_nav_dropdown.scss

@@ -1,39 +1,62 @@
-.nav_dropdown {
-    .dropdown_header {
+.dropdown {
+    > label.item {
         display: grid;
         grid-template-columns: 1fr min-content;
         align-items: center;
 
-        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;
-
+        > ion-icon {
             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 {
-    .dropdown_header {
-        transform: var(--transform-scale-x);
-
-        ion-icon {
-            rotate: 90deg;
-            transition-duration: 0.25s;
+@media (max-width: 600px) {
+    .dropdown {
+        > label.item > ion-icon {
+            margin-right: var(--padding-mobile);
         }
     }
+}
 
-    .dropdown_body {
-        display: grid;
+// Use a toggle for menu entries on mobile and intermediary devices.
+@media (max-width: 1023px) {
+    .dropdown {
+        > input:checked + label {
+            color: var(--highlight-hover);
+
+            + ul {
+                display: grid;
+            }
+        }
+    }
+}
+
+// Use a hover state for menu entries on large screens.
+@media (min-width: 1024px) {
+    .dropdown:hover {
+        > label.item {
+            transform: var(--transform-scale-x);
+
+            > ion-icon {
+                rotate: 90deg;
+                transition-duration: 0.25s;
+            }
+        }
+
+        > ul {
+            display: grid;
+        }
     }
 }

src/partials/_nav_header.scss

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

src/partials/_nav_location.scss

@@ -1,17 +1,16 @@
 .location {
     margin: 0;
-    padding: var(--spacing-horizontal);
+    padding: var(--spacing-small);
     background-color: var(--background-2);
     border-radius: var(--border-radius-leaf);
     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 {
-    /*
-    Remove default padding and style applied to ul for bullets.
-    */
+nav .menu {
+    // Remove default padding and style applied to ul for bullets.
     padding: 0;
     list-style: none;
 
     display: grid;
     grid-auto-flow: row;
-    gap: var(--spacing-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 {
-    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
-    color: inherit;
-    text-decoration: none;
+.menu {
+    .item {
+        // Need to force inheritence, otherwise <a> would require
+        // overrides for all color states from base styling for element.
+        color: inherit;
+        text-decoration: none;
 
-    background-color: var(--background-2);
-    border-radius: var(--border-radius-small);
-    transition: var(--transition-fade);
-}
+        padding: 0 var(--spacing-small);
 
-.nav_body:hover,
-.nav_dropdown:hover .nav_body {
-    transform: var(--transform-scale-x);
-    transition: var(--transition-cut);
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-small);
+        transition: var(--transition-fade);
+    }
 
-    .nav_title,
-    ion-icon {
-        color: var(--highlight-hover);
+    .item:hover,
+    .dropdown:hover .item {
+        transform: var(--transform-scale-x);
         transition: var(--transition-cut);
+
+        .title,
+        ion-icon {
+            color: var(--highlight-hover);
+            transition: var(--transition-cut);
+        }
+    }
+}
+
+@media (max-width: 600px) {
+    .menu {
+        .item {
+            padding: var(--padding-mobile);
+            background-color: var(--background-1);
+        }
+
+        .item:hover,
+        .dropdown:hover .item {
+            transform: none;
+        }
     }
 }

src/partials/_nav_quick_links.scss

@@ -1,18 +1,16 @@
-.pane_nav .quick_links {
+nav.pane .quick_links {
     --item-padding: 0.25rem;
 
     justify-content: space-between;
 
-    /*
-    To colour the icons, apply inline styling.
-    */
-
     a {
-        width: var(--item-size);
         background-color: var(--background-2);
 
         transition: var(--transition-fade);
-        margin: 0;
+
+        ion-icon {
+            width: var(--item-size);
+        }
     }
 
     a:hover {
@@ -21,41 +19,34 @@
     }
 
     .phantom {
-        width: var(--item-size);
-        height: var(--item-size);
+        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
-        */
+        // 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;
     }
 }
 
-.gitea {
-    color: var(--accent-green);
-}
+@media (max-width: 600px) {
+    nav.pane .quick_links {
+        margin-bottom: var(--spacing-small);
 
-.github {
-    color: var(--accent-blue);
-}
+        --item-padding: var(--padding-mobile);
 
-.license {
-    color: var(--accent-indigo);
-}
+        > a {
+            background-color: var(--background-1);
+        }
 
-.issue_tracker {
-    color: var(--accent-magenta);
-}
-
-.rss {
-    color: var(--accent-orange);
+        > .phantom {
+            background-color: inherit;
+        }
+    }
 }

src/partials/_nav_title.scss

@@ -1,5 +1,6 @@
-.nav_title {
-    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
+.menu .title {
+    // Need to force inheritence, otherwise <a> would require
+    // overrides for all color states from base styling for element.
     color: inherit;
     text-decoration: inherit;
 
@@ -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 {
-    color: var(--highlight-hover);
-    transition: var(--transition-cut);
+@media (max-width: 600px) {
+    .nav_title {
+        padding: var(--padding-mobile);
+    }
+}
+
+@media (min-width: 1024px) {
+    .menu .title:hover {
+        color: var(--highlight-hover);
+        transition: var(--transition-cut);
+    }
 }

src/partials/_page_resume.scss

@@ -1,173 +1,46 @@
-.work_history {
-    max-width: 45%;
+.r90 {
+    rotate: 90deg;
+}
 
-    .chunk_list {
-        flex-direction: column-reverse;
+.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 {
-    align-self: center;
-}
-
-.education {
-    max-width: 45%;
-
-    .chunk_list {
-        flex-direction: column-reverse;
-    }
-}
-
-.awards {
-    max-width: 45%;
-}
-
-.certifications {
-    max-width: 45%;
+    justify-self: center;
 }
 
+.prog_languages,
 .software {
-    max-width: 60%;
-
-    .premiere_pro {
-        color: var(--accent-purple);
-    }
-
-    .photoshop {
-        color: var(--accent-blue);
-    }
-
-    .anubis {
-        color: var(--accent-green);
-    }
-
-    .blender {
-        color: var(--accent-orange);
-    }
-
-    .davinci_resolve {
-        color: var(--accent-blue);
-    }
-
-    .gimp {
-        color: var(--accent-magenta);
-    }
-
-    .git {
-        color: var(--accent-orange);
-    }
-
-    .libreoffice {
-        color: var(--white-0);
-    }
-
-    .linux {
-        color: var(--white-0);
-    }
-
-    .ms_office {
-        color: var(--accent-orange);
-    }
-
-    .ms_windows {
-        color: var(--accent-blue);
-    }
-
-    .musescore {
-        color: var(--accent-cyan);
-    }
-
-    .nextcloud {
-        color: var(--accent-cyan);
-    }
-
-    .nginx {
-        color: var(--accent-green);
-    }
-
-    .obs {
-        color: var(--white-0);
-    }
-
-    .prusaslicer {
-        color: var(--accent-orange);
-    }
-
-    .shopbot_control_software {
-        color: var(--accent-blue);
-    }
-
-    .vectric_aspire {
-        color: var(--accent-red);
-        rotate: 90deg;
-    }
-
-    .zotero {
-        color: var(--accent-orange);
+    * {
+        margin: 0.5rem;
     }
 }
 
-.prog_languages {
-    max-width: 30%;
-
-    .asciidoc {
-        color: var(--accent-cyan);
-    }
-
-    .css {
-        color: var(--accent-purple);
-    }
-
-    .html {
-        color: var(--accent-orange);
-    }
-
-    .json {
-        color: var(--accent-cyan);
-    }
-
-    .markdown {
-        color: var(--accent-indigo);
-    }
-
-    .nginx {
-        color: var(--accent-green);
-    }
-
-    .python {
-        color: var(--accent-blue);
-    }
-
-    .ron {
-        color: var(--accent-orange);
-    }
-
-    .rust {
-        color: var(--accent-orange);
-    }
-
-    .scss {
-        color: var(--accent-magenta);
-    }
-
-    .toml {
-        color: var(--accent-orange);
-    }
-
-    .shell {
-        color: var(--accent-green);
-    }
-
-    .yaml {
-        color: var(--accent-yellow);
-    }
+.software_row {
+    grid-template-columns: 60% auto;
 }
 
-.docker {
-    /*
-    Docker is protective of their colours.
-    https://www.docker.com/company/newsroom/media-resources/
-    */
-
-    color: #1d63edff;
+@media (max-width: 600px) {
+    .awards,
+    .certifications,
+    .education,
+    .prog_languages,
+    .software,
+    .work_history {
+        width: 100%;
+    }
 }

src/partials/_pane_blog.scss

@@ -1,52 +1,34 @@
-@use "a_tailer";
-
-.pane_blog {
+.pane.blog {
     flex: 1;
     flex-direction: column;
 
-    margin: var(--margin-pane);
-
     justify-content: center;
 
-    .blog_body {
-        background-color: var(--background-2);
-        border-radius: var(--border-radius-leaf);
-        padding-top: var(--spacing-horizontal);
-
-        .header {
-            text-align: center;
-            padding: var(--spacing-horizontal);
-            width: min-content;
+    > .body {
+        padding: var(--spacing-small) 0 0;
 
+        > header {
             white-space: nowrap;
-
-            margin: 0 auto;
-
-            .title {
-                background-color: var(--background-1);
-                border-radius: var(--border-radius-leaf);
-                padding: var(--spacing-horizontal);
-            }
-
-            .date {
-                display: block;
-
-                font-size: 0.85rem;
-                font-weight: normal;
-                font-style: italic;
-                font-family: var(--font-family-generic);
-            }
         }
 
-        .body {
+        > .body {
             text-align: start;
 
-            padding: 0 calc(var(--margin-pane) * 4)
-                calc(var(--margin-pane) * 4);
+            padding: 0 var(--spacing-thicc) var(--spacing-thicc);
 
-            p {
-                color: var(--white-1);
+            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,16 +1,13 @@
-@use "a_tailer";
-
-.pane_error {
+.pane.error {
     width: max-content;
+    margin: auto;
 
-    margin: auto; /* center object */
+    text-align: center;
+}
 
-    .error_body,
-    .tailer {
-        background-color: var(--background-1);
-        border-radius: var(--border-radius-leaf);
-        padding: var(--spacing-horizontal);
-
-        text-align: center;
+@media (max-width: 600px) {
+    .pane.error {
+        margin-top: var(--spacing-large);
+        margin-bottom: var(--spacing-large);
     }
 }

src/partials/_pane_main.scss

@@ -1,18 +1,56 @@
-@use "a_tailer";
+main.pane {
+    grid-area: main;
 
-.pane_main {
-    flex: 1;
-    flex-direction: column;
-
-    margin: var(--margin-pane);
-
-    justify-content: center;
-
-    .main_body {
+    > .body,
+    > footer {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
-        padding: var(--spacing-horizontal);
+    }
+
+    > .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,24 +1,55 @@
-@use "nav_logo";
+@use "nav_header";
 @use "nav_menu";
 @use "nav_location";
 @use "nav_quick_links";
 
-.pane_nav {
-    margin: var(--margin-pane);
-    padding: 0;
+nav.pane {
+    grid-area: nav;
 
-    width: min-content;
+    --padding-mobile: 0.35rem;
 
-    display: grid;
-    grid-auto-flow: row;
-    grid-template-rows: auto auto auto 1fr max-content;
-    gap: var(--spacing-menu-gap);
-    align-content: start;
+    height: min-content;
+
+    display: flex;
+    flex-direction: column;
 
     position: sticky;
-    top: var(--margin-pane);
-    bottom: var(--margin-pane);
-    left: 0;
+    top: var(--spacing-large);
+    left: var(--spacing-large);
 
     color: var(--accent-pink);
+
+    input[type="checkbox"] {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    nav.pane {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
+        padding: 0 var(--spacing-small);
+
+        .menu,
+        .quick_links,
+        .location {
+            display: none;
+        }
+
+        > * {
+            width: 100%;
+        }
+    }
+
+    nav.pane > input:checked + label {
+        color: var(--highlight-hover);
+
+        + .menu {
+            display: grid;
+
+            + .location + .quick_links {
+                display: flex;
+            }
+        }
+    }
 }

src/partials/_pane_spacer.scss

@@ -1,27 +1,16 @@
-.pane_spacer {
-    margin: var(--margin-pane);
-    padding: 0;
+.pane.spacer {
+    grid-area: spacer;
 
     width: min-content;
+    height: calc(100vh - calc(var(--spacing-large) * 2));
 
     display: grid;
-    grid-auto-flow: row;
-    gap: var(--spacing-menu-gap);
-
-    position: sticky;
-    top: var(--margin-pane);
-    bottom: var(--margin-pane);
-    right: 0;
+    grid-auto-flow: row dense;
 
     .spacer_container {
-        margin: 0;
-        padding: var(--spacing-horizontal);
+        padding: var(--spacing-small);
         background-color: var(--background-2);
-        height: calc(
-            50vh - var(--margin-pane) - calc(
-                    var(--spacing-menu-gap) / 2
-                ) - calc(var(--spacing-horizontal) * 2)
-        );
+        height: 100%;
         border-radius: var(--border-radius-leaf);
 
         display: flex;
@@ -35,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,3 +1,3 @@
 @use "partials/a_common";
 
-@use "partials/pane_main";
+@use "partials/page_resume";

src/templates/blog_post.html

@@ -1,40 +0,0 @@
-<!doctype html>
-
-<html lang="en-ca">
-    <head>
-        <title>Blog Post Template | Cutieguwu</title>
-        <include src="includes/meta.html" />
-    </head>
-    <body>
-        <div class="viewport">
-            <nav class="pane_nav">
-                <include src="includes/nav_logo.html" />
-                <include src="includes/nav_menu.html" />
-                <div class="location">
-                    <h4 class="location_header">You are here:</h4>
-                    <h5 class="location_page">Blog - Blog Post Template</h5>
-                </div>
-                <include src="includes/nav_quick_links.html" />
-            </nav>
-            <div class="pane_blog">
-                <div class="blog_body">
-                    <div class="header">
-                        <h1 class="title">Blog Post Template</h1>
-                        <p class="date">Posted: 01 January, 2025</p>
-                        <p class="date">Last Edited: 01 January, 2025</p>
-                    </div>
-                    <div class="body">
-                        <p>Blog Post Content</p>
-                    </div>
-                </div>
-                <include src="includes/tailer.html" />
-            </div>
-            <div class="pane_spacer">
-                <include src="./includes/blog_recent_posts.html" />
-                <div class="spacer_container"><p>#AD</p></div>
-            </div>
-        </div>
-        <include src="includes/footer.html" />
-        <include src="includes/scripts.html" />
-    </body>
-</html>

src/templates/error.html

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

src/templates/main.html

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

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