Remove header class for element in Location block.

remove the docker comment.

balloon.py

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

build.sh

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

colour_theme.svg

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

src/about.html

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

src/acknowledgements.html

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

src/blog/index.html

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

src/blog/posts/0_divergent_pathways.html

@@ -0,0 +1,123 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Divergent Pathways | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <nav class="pane">
+            <include src="includes/nav_header.html" />
+            <include src="includes/nav_menu.html" />
+            <div class="location">
+                <header><h4>You are here:</h4></header>
+                <h5 class="page">Blog - Divergent Pathways</h5>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <main class="pane blog">
+            <div class="body">
+                <header>
+                    <h1 class="title">Divergent Pathways</h1>
+                    <p class="date">Posted: 29 July, 2025</p>
+                    <p class="date">Last Edited: 29 July, 2025</p>
+                </header>
+                <div class="body">
+                    <p>I can't say that this is how I wanted to start my blog.</p>
+                    <p>
+                        Although, in all honesty, I didn't really have an idea for how I wanted it
+                        to start. That's not to say I didn't know what I *didn't* want. A
+                        meaningless 'Welcome to my Blog' filled with my hopes and aspirations that
+                        inevitably would never come to light was something I knew I didn't want. I
+                        figured it more likely for me to have a semi-respectful rant about
+                        whatever's causing me to 'crash out' on that particular day. That would
+                        certainly be in character for me.
+                    </p>
+                    <p>
+                        But no. Instead, I'm starting my blog on one of the last things I ever
+                        expected to write about.
+                    </p>
+                    <p>Love.</p>
+                    <p>Or rather, the passing of it due to life.</p>
+                    <p>
+                        I've been in two relationships now. Both ended mutually, although what I
+                        consider mutual may not be everyone else's. We came to see the same side of
+                        things, and we understood that we couldn't sustain our lives together. We're
+                        all still friends at the end.
+                    </p>
+                    <p>
+                        Me and my ex-boyfriend were struggling a lot with being able to see each
+                        other. It's not like this relationship was geographically long distance; we
+                        went to the same school. The distance came more from our schedules and
+                        pathways. I have always been a relatively heavy academic. My parents and
+                        teachers certainly made sure of that, and ultimately helped lead me down a
+                        path of being the teacher's pet. Maybe I'll talk about my experiences and
+                        struggles related to that another time, but the short of it is that I am a
+                        high-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" />
+        </main>
+        <div class="pane spacer">
+            <include src="./includes/blog_recent_posts.html" />
+            <div class="spacer_container"><p>#AD</p></div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/1_unsure_u.html

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

src/blog/posts/style.scss

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

src/blog/style.scss

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

src/disclosure.html

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

src/errors/400.html

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

src/errors/401.html

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

src/errors/403.html

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

src/errors/404.html

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

src/errors/500.html

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

src/errors/501.html

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

src/errors/502.html

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

src/errors/503.html

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

src/errors/504.html

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

src/errors/style.scss

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

src/feed/rss.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0">
+
+<channel>
+    <title>Cutieguwu Yaps</title>
+    <link>https://www.cutieguwu.ca/</link>
+    <description
+        >Cutieguwu's blog where she discusses various things.</description>
+    <language>en-ca</language>
+    <category>Technology/IT/Life/Mental Health/Health</category>
+    <item>
+        <title>Unsure U.</title>
+        <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>
+        <description>Discussing my struggles in love.</description>
+        <category>Life</category>
+        <category>Mental Health</category>
+        <category>Health</category>
+    </item>
+</channel>
+
+</rss>

src/includes/_unused_menu_entries.html

@@ -0,0 +1,25 @@
+<!-- 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>

src/includes/blog_recent_posts.html

@@ -0,0 +1,23 @@
+<div class="spacer_container blog_recent_posts">
+    <h2>Recent Posts</h2>
+    <div class="section_list">
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Unsure U.</h3>
+                    <span class="subtitle">09 August, 2025</span>
+                </div>
+                <a href="/blog/posts/1_unsure_u.html" class="status"> View </a>
+            </header>
+        </section>
+        <section>
+            <header>
+                <div>
+                    <h3 class="name">Divergent Pathways</h3>
+                    <span class="subtitle">29 July, 2025</span>
+                </div>
+                <a href="/blog/posts/0_divergent_pathways.html" class="status"> View </a>
+            </header>
+        </section>
+    </div>
+</div>

src/includes/footer.html

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

src/includes/meta.html

@@ -1,11 +1,13 @@
 <meta charset="utf-8" />
 
 <meta name="description" content="Cutieguwu's Official website" />
-<meta
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
-    name="viewport"
-    content="width=device-width, height=device-height, initial-scale=1.0"
-/>
 <meta name="keywords" content="cutieguwu" />
 
+<!-- Explicitly stop Bing from additionally using content for AI -->
+<!-- See: https://github.com/ai-robots-txt/ai.robots.txt/issues/111 -->
+<meta name="bingbot" content="noarchive" />
+
 <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 type="checkbox" id="toggle" />
+<label for="toggle" class="nav_header">
+    <h2 class="logo">Cutieguwu</h2>
+    <ion-icon name="menu-outline"></ion-icon>
+</label>

src/includes/nav_logo.html

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

src/includes/nav_menu.html

@@ -1,81 +1,65 @@
-<ul class="nav_menu">
+<ul class="menu">
     <!-- Home -->
-    <li class="nav_body">
+    <li class="item">
-        <a class="nav_title" href="index.html">Home</a>
+        <a class="title" href="/">Home</a>
     </li>
 
-    <!-- Minecraft -->
+    <li class="item">
-    <li class="nav_dropdown">
+        <a class="title" href="/blog/">Blog</a>
-        <div class="dropdown_header nav_body">
-            <p class="nav_title" href="#">Minecraft</p>
-            <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
-        <div class="dropdown_body">
-            <a class="nav_title" href="#">Bearock SMP</a>
-            <a class="nav_title" href="#">Rebirth SMP</a>
-        </div>
     </li>
 
-    <hr />
+    <li><hr /></li>
 
     <!-- About -->
-    <li class="nav_body"><a class="nav_title" href="#">About</a></li>
+    <li class="item"><a class="title" href="/about.html">About</a></li>
 
     <!-- Pronoun Pages -->
-    <li class="nav_dropdown">
+    <li class="item"><a class="title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a></li>
-        <a class="dropdown_header nav_body" href="https://pronouns.page/@Cutieguwu">
-            <p class="nav_title">Pronoun Pages</p>
-            <ion-icon name="chevron-forward-outline"></ion-icon>
-        </a>
-        <div class="dropdown_body">
-            <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-            <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-        </div>
-    </li>
 
     <!-- External Links -->
-    <li class="nav_dropdown">
+    <li class="dropdown">
-        <div class="dropdown_header nav_body">
+        <header class="item">
-            <p class="nav_title">External Links</p>
+            <p class="title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
+        </header>
-        <div class="dropdown_body">
+        <ul>
-            <a class="nav_title" href="https://github.com/Cutieguwu">Github</a>
+            <li><a class="title" href="https://github.com/Cutieguwu">Github (Mirror)</a></li>
-            <a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
+            <li><a class="title" href="https://www.twitch.tv/cutieguwu">Twitch</a></li>
-        </div>
+            <li><a class="title" href="https://www.youtube.com/@Cutieguwu">YouTube</a></li>
+        </ul>
     </li>
 
-    <hr />
+    <li><hr /></li>
 
     <!-- Public Services -->
-    <li class="nav_dropdown">
+    <li class="dropdown">
-        <div class="dropdown_header nav_body">
+        <header class="item">
-            <p class="nav_title">Public Services</p>
+            <p class="title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
+        </header>
-        <div class="dropdown_body">
+        <ul>
-            <a class="nav_title" href="https://webcheck.cutieguwu.ca">Web Check</a>
+            <li><a class="title" href="https://webcheck.cutieguwu.ca">Web Check</a></li>
-        </div>
+        </ul>
     </li>
 
     <!-- Services -->
-    <li class="nav_dropdown">
+    <li class="dropdown">
-        <div class="dropdown_header nav_body">
+        <header class="item">
-            <p class="nav_title">Services</p>
+            <p class="title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
+        </header>
-        <div class="dropdown_body">
+        <ul>
-            <a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a>
+            <li><a class="title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a></li>
-            <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
+        </ul>
-            <a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
-            <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-            <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
-        </div>
     </li>
 
-    <hr />
+    <li><hr /></li>
 
     <!-- Website Disclosure -->
-    <li class="nav_body"><a class="nav_title" href="#">Website Disclosure</a></li>
+    <li class="item">
-    <li class="nav_body"><a class="nav_title" href="acknowledgements.html">Acknowledgements</a></li>
+        <a class="title" href="/disclosure.html">Disclosure</a>
+    </li>
+    <li class="item">
+        <a class="title" href="/acknowledgements.html">Acknowledgements</a>
+    </li>
 </ul>

src/includes/nav_quick_links.html

@@ -1,17 +1,18 @@
-<div class="nav_quick_links">
+<div class="quick_links">
     <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
-        <ion-icon
+        <ion-icon name="git-branch-outline" alt="(Gitea) Website Source" class="green"></ion-icon>
-            name="git-branch-outline"
-            class="icon_gitea"
-            alt="(Gitea) Website Source"
-        ></ion-icon>
-    </a>
-    <a href="https://github.com/Cutieguwu/cutieguwu-site" title="(Mirror) Website Source">
-        <ion-icon name="logo-github" class="icon_github" alt="(Mirror) Website Source"></ion-icon>
     </a>
     <a
         href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
         title="MIT License"
-        ><ion-icon name="book-outline" class="icon_license" alt="MIT License"></ion-icon
+    >
-    ></a>
+        <ion-icon name="book-outline" alt="MIT License" class="indigo"></ion-icon>
+    </a>
+    <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
+        <ion-icon name="alert-circle-outline" alt="Report Issues" class="magenta"></ion-icon>
+    </a>
+    <a href="https://www.cutieguwu.ca/feed/rss.xml" title="RSS Feed" download>
+        <ion-icon name="logo-rss" alt="RSS Feed" class="orange"></ion-icon>
+    </a>
+    <a class="phantom"></a>
 </div>

src/includes/tailer.html

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

src/index.html

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

src/minecraft/bearock/index.html

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

src/minecraft/bearock/style.scss

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

src/minecraft/index.html

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

src/minecraft/rebirth/index.html

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

src/minecraft/rebirth/style.scss

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

src/minecraft/style.scss

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

src/partials/_a_colours.css

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

src/partials/_a_common.scss

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

src/partials/_a_footer.scss

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

src/partials/_a_layouts.scss

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

src/partials/_a_pane.scss

@@ -0,0 +1,23 @@
+@use "pane_main";
+@use "pane_nav";
+@use "pane_spacer";
+
+.pane {
+    margin: var(--spacing-large);
+}
+
+@media only screen and (max-width: 500px) {
+    .pane {
+        width: 100%;
+    }
+}
+
+nav.pane,
+.pane.spacer {
+    width: min-content;
+    gap: var(--spacing-medium);
+
+    position: sticky;
+    top: var(--spacing-large);
+    right: var(--spacing-large);
+}

src/partials/_a_quick_links.scss

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

src/partials/_a_section_list.scss

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

src/partials/_nav_dropdown.scss

@@ -1,39 +1,44 @@
-.nav_dropdown {
+.dropdown {
-    .dropdown_header {
+    > header {
         display: grid;
         grid-template-columns: 1fr min-content;
         align-items: center;
 
-        ion-icon {
+        > ion-icon {
-            /*
-            This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
-            */
-            margin-right: 0.5rem;
-
             align-self: center;
             transition-duration: 0.25s;
         }
     }
 
-    .dropdown_body {
+    > ul {
         display: none;
         border-bottom-left-radius: var(--border-radius-small);
         border-bottom-right-radius: var(--border-radius-small);
         background-color: var(--background-1);
+
+        // Remove default padding and style applied to ul for bullets.
+        padding: 0 var(--spacing-small);
+        list-style: none;
     }
 }
 
-.nav_dropdown:hover {
+.dropdown:hover {
-    .dropdown_header {
+    > header {
         transform: var(--transform-scale-x);
 
-        ion-icon {
+        > ion-icon {
             rotate: 90deg;
             transition-duration: 0.25s;
         }
     }
 
-    .dropdown_body {
+    > ul {
         display: grid;
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .dropdown > header > ion-icon {
+        margin-right: var(--padding-mobile);
+    }
+}

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 only screen and (max-width: 500px) {
+    nav.pane > .nav_header {
+        grid-template-columns: min-content 1fr min-content;
+        grid-template-areas: "logo blank hamburger";
+
+        ion-icon {
+            display: block;
+        }
+    }
+}
+
+nav .logo {
+    grid-area: logo;
+
+    font-family: var(--font-family-generic);
+    text-align: center;
+    margin: var(--spacing-small) 0;
+}

src/partials/_nav_location.scss

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

src/partials/_nav_logo.scss

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

src/partials/_nav_menu.scss

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

src/partials/_nav_quick_links.scss

@@ -1,54 +1,54 @@
-.nav_quick_links {
+nav.pane .quick_links {
-    --cols: 5;
+    grid-area: quick_links;
-    --item-padding: 0.35rem;
-    --item-edge-length: 1.25rem;
-    --item-size: calc(
-        var(--item-edge-length) + calc(var(--item-padding) * 2)
-    );
 
-    /*
+    --item-padding: 0.25rem;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    margin-right: auto;
-    */
 
-    display: grid;
+    justify-content: space-between;
-    grid-template-columns:
-        var(--item-size) var(--item-size) var(--item-size)
-        var(--item-size) var(--item-size);
-    align-items: center;
-
-    gap: var(--spacing-menu-gap)
-        calc(
-            calc(100% - calc(var(--item-size) * var(--cols))) /
-                calc(var(--cols) - 1)
-        );
 
     a {
-        width: var(--item-size);
+        background-color: var(--background-2);
-        height: var(--item-size);
 
-        * {
+        transition: var(--transition-fade);
-            width: var(--item-edge-length);
-            height: var(--item-edge-length);
-            padding: var(--item-padding);
 
-            background-color: var(--background-2);
+        ion-icon {
-            border-radius: var(--border-radius-small)
+            width: var(--item-size);
-                var(--border-radius-large);
+        }
+    }
+
+    a:hover {
+        transition: var(--transition-cut);
+        transform: var(--transform-scale-x) var(--transform-scale-y);
+    }
+
+    .phantom {
+        width: calc(var(--item-size) + calc(var(--item-padding) * 2));
+
+        // Fake hiding the element.
+        //
+        // Due to how flexboxes function, settings `display: none`
+        // will result in the box just scaling as if the element
+        // never existed.
+        //
+        // phantom needs to sit beside a element in hierarchy,
+        // otherwise phantom will inherit from <a> like this:
+        //
+        // .pane_nav > .quick_links > a > .phantom
+        background-color: inherit;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    nav.pane .quick_links {
+        margin-bottom: var(--spacing-small);
+
+        --item-padding: var(--padding-mobile);
+
+        > a {
+            background-color: var(--background-1);
         }
 
-        .icon_gitea {
+        > .phantom {
-            color: var(--accent-green);
+            background-color: inherit;
-        }
-
-        .icon_github {
-            color: var(--accent-blue);
-        }
-
-        .icon_license {
-            color: var(--accent-purple);
         }
     }
 }

src/partials/_nav_title.scss

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

src/partials/_page_resume.scss

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

src/partials/_pane_blog.scss

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

src/partials/_pane_error.scss

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

src/partials/_pane_main.scss

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

src/partials/_pane_nav.scss

@@ -1,17 +1,60 @@
-@use "nav_logo";
+@use "nav_header";
 @use "nav_menu";
 @use "nav_location";
 @use "nav_quick_links";
 
-.pane_nav {
+nav.pane {
-    --spacing-horizontal: 0.75rem;
+    grid-area: nav;
-    --transform-scale-x: scaleX(1.15);
+
+    --padding-mobile: 0.35rem;
+
+    height: min-content;
+
+    display: flex;
+    flex-direction: column;
+
+    position: sticky;
+    top: var(--spacing-large);
+    left: var(--spacing-large);
 
-    margin: var(--margin-pane);
-    padding: 0;
-    gap: var(--spacing-menu-gap);
-    width: min-content;
-    align-content: start;
-    display: grid;
     color: var(--accent-pink);
+
+    input[type="checkbox"] {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    nav.pane {
+        width: calc(
+            calc(50% - var(--spacing-large) + var(--spacing-small)) * 2
+        );
+
+        background-color: var(--background-2);
+        padding: 0 var(--spacing-small);
+
+        .nav_menu,
+        .quick_links,
+        .location {
+            display: none;
+        }
+
+        > * {
+            width: 100%;
+        }
+    }
+
+    nav.pane > #toggle:checked {
+        + .nav_header {
+            color: var(--highlight-hover);
+
+            + .menu {
+                display: grid;
+
+                + .location + .quick_links {
+                    display: flex;
+                }
+            }
+        }
+    }
 }

src/partials/_pane_spacer.scss

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

src/resume.html

@@ -0,0 +1,508 @@
+<!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: 08 August, 2025</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 inate 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 liason.</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 Women's and Gender Studies</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>
+                                <h3 class="early_history">
+                                    Queries about other awards available by request.
+                                </h3>
+                            </div>
+                        </div>
+                        <!-- Certifications -->
+                        <div class="item certifications">
+                            <h2 class="title">Certifications and Diplomas</h2>
+                            <div class="section_list">
+                                <section>
+                                    <header>
+                                        <h3 class="name">Ontario Secondary School Diploma</h3>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <h3 class="name">DELF</h3>
+                                        <h3 class="status">Niveau B2</h3>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <h3 class="name">Red Cross Swimming</h3>
+                                        <h3 class="status">Level 10</h3>
+                                    </header>
+                                </section>
+                                <section>
+                                    <header>
+                                        <h3 class="name">Canadian Firearms Safety Course</h3>
+                                        <h3 class="status">PAL</h3>
+                                    </header>
+                                </section>
+                                <h3 class="early_history">
+                                    Queries about certifications available by request.
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layout_row software_row">
+                        <!-- Software and Prog. Languages -->
+                        <!-- Software -->
+                        <div class="item software">
+                            <h2 class="title">Software</h2>
+                            <div class="quick_links">
+                                <div>
+                                    <ion-icon name="cube-outline" class="magenta"></ion-icon>
+                                    <p>3D Printing</p>
+                                </div>
+                                <div>
+                                    <ion-icon name="logo-android" class="green"></ion-icon>
+                                    <p>Android</p>
+                                </div>
+                                <a href="https://anubis.techaro.lol/">
+                                    <ion-icon name="globe-outline" class="green"></ion-icon>
+                                    <p>Anubis</p>
+                                </a>
+                                <a href="https://www.blender.org/">
+                                    <ion-icon name="cube-outline" class="orange"></ion-icon>
+                                    <p>Blender</p>
+                                </a>
+                                <div>
+                                    <ion-icon
+                                        name="play-skip-forward-outline"
+                                        class="red r90"
+                                    ></ion-icon>
+                                    <p>CNC Machining</p>
+                                </div>
+
+                                <a href="https://www.docker.com/">
+                                    <ion-icon name="logo-docker" class="docker"></ion-icon>
+                                    <p>Docker</p>
+                                </a>
+                                <a href="https://www.gimp.org/">
+                                    <ion-icon name="image-outline" class="magenta"></ion-icon>
+                                    <p>GIMP</p>
+                                </a>
+                                <a href="https://git-scm.com/">
+                                    <ion-icon name="git-branch-outline" class="orange"></ion-icon>
+                                    <p>Git</p>
+                                </a>
+                                <a href="https://gitea.cutieguwu.ca">
+                                    <ion-icon name="cafe-outline" class="green"></ion-icon>
+                                    <p>Gitea</p>
+                                </a>
+                                <a href="https://github.com/Cutieguwu">
+                                    <ion-icon name="logo-github" class="blue"></ion-icon>
+                                    <p>Github</p>
+                                </a>
+                                <a href="https://www.apple.com/ca/os/ios/">
+                                    <ion-icon name="logo-apple" class="white"></ion-icon>
+                                    <p>iOS</p>
+                                </a>
+                                <a href="https://www.libreoffice.org/">
+                                    <ion-icon name="document-outline" class="green"></ion-icon>
+                                    <p>LibreOffice</p>
+                                </a>
+                                <a href="https://www.kernel.org/category/about.html">
+                                    <ion-icon name="logo-tux" class="white"></ion-icon>
+                                    <p>Linux</p>
+                                </a>
+                                <a href="https://www.apple.com/ca/os/macos/">
+                                    <ion-icon name="logo-apple" class="white"></ion-icon>
+                                    <p>MacOS</p>
+                                </a>
+                                <a href="https://www.office.com/">
+                                    <ion-icon name="apps-outline" class="orange"></ion-icon>
+                                    <p>MS Office</p>
+                                </a>
+                                <a href="https://www.microsoft.com/en-ca/windows">
+                                    <ion-icon name="logo-windows" class="blue"></ion-icon>
+                                    <p>MS Windows</p>
+                                </a>
+                                <a href="https://musescore.org/en">
+                                    <ion-icon name="musical-notes" class="cyan"></ion-icon>
+                                    <p>MuseScore Studio</p>
+                                </a>
+                                <a href="https://nextcloud.com/">
+                                    <ion-icon name="apps-outline" class="cyan"></ion-icon>
+                                    <p>Nextcloud</p>
+                                </a>
+                                <a href="https://nginx.org/en/">
+                                    <ion-icon name="globe-outline" class="green"></ion-icon>
+                                    <p>Nginx</p>
+                                </a>
+                                <a href="https://obsproject.com/">
+                                    <ion-icon name="aperture-outline" class="white"></ion-icon>
+                                    <p>OBS</p>
+                                </a>
+                                <a href="https://www.adobe.com/ca/products/photoshop.html">
+                                    <ion-icon name="image-outline" class="blue"></ion-icon>
+                                    <p>Photoshop</p>
+                                </a>
+                                <a href="https://www.prusa3d.com/page/prusaslicer_424/">
+                                    <ion-icon name="layers-outline" class="orange"></ion-icon>
+                                    <p>PrusaSlicer</p>
+                                </a>
+                                <a
+                                    href="https://shopbottools.com/support-resources/control-software/"
+                                >
+                                    <ion-icon name="keypad-outline" class="blue"></ion-icon>
+                                    <p>ShopBot Control Software</p>
+                                </a>
+                                <a href="https://www.vectric.com/products/aspire/">
+                                    <ion-icon
+                                        name="play-skip-forward-outline"
+                                        class="red r90"
+                                    ></ion-icon>
+                                    <p>Vectric Aspire</p>
+                                </a>
+                                <a href="https://www.zotero.org/">
+                                    <ion-icon
+                                        name="document-attach-outline"
+                                        class="orange"
+                                    ></ion-icon>
+                                    <p>Zotero</p>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- Prog. Languages -->
+                        <div class="item prog_languages">
+                            <h2 class="title">Prog. Languages</h2>
+                            <div class="quick_links">
+                                <a href="https://asciidoc.org/">
+                                    <ion-icon name="document-text-outline" class="cyan"></ion-icon>
+                                    <p>AsciiDoc</p>
+                                </a>
+                                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">
+                                    <ion-icon name="logo-css3" class="purple"></ion-icon>
+                                    <p>CSS</p>
+                                </a>
+                                <a href="https://docs.docker.com/compose/">
+                                    <ion-icon name="logo-docker" class="docker"></ion-icon>
+                                    <p>Docker Compose</p>
+                                </a>
+                                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">
+                                    <ion-icon name="logo-html5" class="orange"></ion-icon>
+                                    <p>HTML</p>
+                                </a>
+                                <a href="https://www.json.org/json-en.html">
+                                    <ion-icon name="shapes-outline" class="cyan"></ion-icon>
+                                    <p>JSON</p>
+                                </a>
+                                <a href="https://www.markdownguide.org/">
+                                    <ion-icon name="logo-markdown" class="indigo"></ion-icon>
+                                    <p>Markdown</p>
+                                </a>
+                                <a href="https://nginx.org/en/docs/">
+                                    <ion-icon name="globe-outline" class="green"></ion-icon>
+                                    <p>Nginx</p>
+                                </a>
+                                <a href="https://www.python.org/">
+                                    <ion-icon name="logo-python" class="blue"></ion-icon>
+                                    <p>Python</p>
+                                </a>
+                                <a href="https://github.com/ron-rs/ron">
+                                    <ion-icon name="shapes-outline" class="orange"></ion-icon>
+                                    <p>RON</p>
+                                </a>
+                                <a href="https://www.rust-lang.org/">
+                                    <ion-icon name="cog-outline" class="orange"></ion-icon>
+                                    <p>Rust</p>
+                                </a>
+                                <a href="https://sass-lang.com/">
+                                    <ion-icon name="logo-sass" class="magenta"></ion-icon>
+                                    <p>SCSS</p>
+                                </a>
+                                <a href="https://toml.io/en/">
+                                    <ion-icon name="shapes-outline" class="orange"></ion-icon>
+                                    <p>TOML</p>
+                                </a>
+                                <a href="https://www.gnu.org/software/bash/manual/bash.html">
+                                    <ion-icon name="terminal-outline" class="green"></ion-icon>
+                                    <p>[Bash] Shell</p>
+                                </a>
+                                <a href="https://yaml.org/">
+                                    <ion-icon name="shapes-outline" class="yellow"></ion-icon>
+                                    <p>YAML</p>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <include src="includes/tailer.html" />
+        </main>
+        <div class="pane spacer pane_details">
+            <div class="spacer_container">
+                <h2>Contact Info</h2>
+                <div class="section_list">
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">
+                                    <a href="mailto:olivia.a.brooks77@gmail.com"> Email </a>
+                                </h3>
+                                <span class="subtitle">olivia.a.brooks77@gmail.com</span>
+                            </div>
+                        </header>
+                    </section>
+                </div>
+            </div>
+            <div class="spacer_container">
+                <h2>Spoken Languages</h2>
+                <div class="section_list">
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">English</h3>
+                                <span class="subtitle">Fluent</span>
+                            </div>
+                        </header>
+                    </section>
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">Français</h3>
+                                <span class="subtitle">DELF B2</span>
+                            </div>
+                        </header>
+                    </section>
+                </div>
+            </div>
+            <div class="spacer_container">
+                <h2>References</h2>
+                <div class="section_list">
+                    <section>
+                        <header>
+                            <div>
+                                <h3 class="name">By Request</h3>
+                            </div>
+                        </header>
+                    </section>
+                </div>
+            </div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/robots.txt

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

src/style.scss

@@ -1,83 +1,3 @@
-@use "partials/pane_main";
+@use "partials/a_common";
-@use "partials/pane_nav";
-@use "partials/pane_spacer";
 
-@use "partials/pane_error";
+@use "partials/page_resume";
-
-:root {
-    /*
-    0: Base of an element. Example: the viewport class.
-
-    The higher the integer, the lighter the colour, the higher it should be visually, meaning more nested in the cascade.
-
-    Odd numbers should be used as intermediate colours between the fore and back elements. Excepting white--white's special.
-    Eg. Current dropdown menu.
-
-    */
-    font-size: var(--font-size-generic);
-
-    --accent-green: #cfeb9eff;
-    --accent-pink: #ff9f9fff;
-    --accent-blue: #868ab7ff;
-    --accent-purple: #aa7ab7ff;
-
-    --background-0: #130b21ff;
-    --background-1: #170d28ff;
-    --background-2: #231833ff;
-    --background-3: #211635ff;
-    --background-4: #2a223eff;
-
-    --block-0: #0d0d0dff;
-    --block-1: #1a1a1aff;
-    --block-2: #272727ff;
-
-    --highlight-hover: #944db6ff;
-
-    --white-0: #bfbfbfff;
-    --white-1: #d9d9d9ff;
-    --white-2: #e5e5e5ff;
-    --white-3: #f5f5f5ff;
-
-    --font-size-generic: 1.65vh;
-    --font-family-generic: Arial, Sans-Serif, Helvetica;
-
-    --transition-fade: 0.4s ease-out;
-    --transition-cut: none;
-
-    --border-radius-large: 1rem;
-    --border-radius-small: calc(var(--border-radius-large) / 2);
-
-    --margin-pane: 1.5rem;
-
-    --spacing-menu-gap: 1rem;
-}
-
-/*
-* {
-    outline: 1px solid red;
-}
-*/
-
-h1 {
-    font-size: 3.3vh;
-}
-
-h2 {
-    font-size: 2.5vh;
-}
-
-ion-icon {
-    width: 1rem;
-    height: 1rem;
-}
-
-.viewport {
-    /* Adds a margin otherwise for some reason. */
-    margin: 0;
-
-    background-color: var(--background-0);
-    color: var(--white-3);
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-}

src/templates/error.html

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

src/templates/main.html

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