Use french spelling of French.

components.

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

@@ -3,10 +3,11 @@
 # 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')
@@ -18,46 +19,70 @@ else
     args='inflate style copy'
 fi
 
+# Cheap patch for copying in case the paths aren't present.
+mkdir -p target
+
 for x in $args
 do
+    cmd=''
+
+    files=()
+
+    src_ext=''
+    target_ext=''
+
     if [ "$x" == 'inflate' ]
     then
-        echo -e "$green"Inflating...
+        cmd='python balloon.py'
 
         files=(`ls src/*.html`)
+        # Because bash won't let **/ find files without another nested dir.
+        files+=(`ls src/blog/*.html`) # This wouldn't be needed under zsh.
+        files+=(`ls src/blog/**/*.html`)
         files+=(`ls src/errors/*.html`)
+        files+=(`ls src/minecraft/*.html`)
+        files+=(`ls src/minecraft/**/*.html`)
 
-        for html in "${files[@]}"
+        action=Inflating...
-        do
-            echo -e "  $cyan$html -> target/"
-
-            eval $python 'balloon.py' $html
-        done
 
     elif [ "$x" == 'style' ]
     then
-        echo -e "$green"Styling...
+        cmd='sass'
 
-        sass src/style.scss target/style.css
+        files='src/style.scss'
+        files+=(`ls src/**/style.scss`)
+        files+=(`ls src/**/**/style.scss`)
 
-        echo -e "$cyan"'  src/style.scss -> target/style.css'
+        src_ext='.scss'
+        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'
         )
+        files+=(`ls src/img/`)
 
-        for item in "${files[@]}"
+        mkdir -p target/.well-known
-        do
+        mkdir -p target/feed
-            echo -e "$cyan  src/$item -> target/$item"
+        mkdir -p target/img
+
+        action=Copying...
+
+    elif [ "$x" == 'clean' ]
+    then
+        echo -e "$green"Cleaning...
+
+        rm -R target
+
+        break
 
-            cp -R src/$item target/$item
-        done
     else
         echo -e "$green"Usage:"$cyan" build.sh [OPTIONS] [COMMAND]
         echo
@@ -68,5 +93,23 @@ do
         echo '  inflate             Inflate the HTML source'
         echo '  style               Compile SCSS to CSS'
         echo '  copy                Copy assets to target'
+        echo '  clean               Wipe the target dir'
+
+        break
     fi
+
+    echo -e "$green$action"
+
+    for src in "${files[@]}"
+    do
+        target="${src//$src_prefix}"
+        target="${target//$src_ext}"
+        target="target/$target$target_ext"
+
+        echo -e "$cyan  $src -> $target"
+
+        eval "$cmd $src $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,31 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>About | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <div class="viewport">
+            <nav class="pane_nav">
+                <include src="includes/nav_logo.html" />
+                <include src="includes/nav_menu.html" />
+                <div class="location">
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">About</h5>
+                </div>
+                <include src="includes/nav_quick_links.html" />
+            </nav>
+            <div class="pane_main">
+                <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
+                <include src="includes/tailer.html" />
+            </div>
+            <div class="pane_spacer">
+                <div class="spacer_container"><p>#AD</p></div>
+                <div class="spacer_container"><p>#AD</p></div>
+            </div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/acknowledgements.html

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

src/blog/index.html

@@ -0,0 +1,40 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Blog | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <div class="viewport">
+            <nav class="pane_nav">
+                <include src="includes/nav_logo.html" />
+                <include src="includes/nav_menu.html" />
+                <div class="location">
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Blog</h5>
+                </div>
+                <include src="includes/nav_quick_links.html" />
+            </nav>
+            <div class="pane_main">
+                <div class="body">
+                    <div class="header">
+                        <h1 class="title">Blog</h1>
+                        <p class="date">Last Edited: 03 August, 2025</p>
+                    </div>
+                    <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" />
+            </div>
+            <div class="pane_spacer">
+                <include src="./includes/blog_recent_posts.html" />
+                <div class="spacer_container"><p>#AD</p></div>
+            </div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/blog/posts/0_divergent_pathways.html

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

src/blog/posts/style.scss

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

src/blog/style.scss

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

src/disclosure.html

@@ -0,0 +1,301 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Disclosure | Cutieguwu</title>
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <div class="viewport">
+            <nav class="pane_nav">
+                <include src="includes/nav_logo.html" />
+                <include src="includes/nav_menu.html" />
+                <div class="location">
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Disclosure</h5>
+                </div>
+                <include src="includes/nav_quick_links.html" />
+            </nav>
+            <div class="pane_main">
+                <div class="body">
+                    <div class="header">
+                        <h1 class="title">Disclosure</h1>
+                        <p class="date">Last Edited: 01 August, 2025</p>
+                    </div>
+                    <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="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Anubis</h3>
+                                                <span class="subtitle"
+                                                    >AI Scraper Screening Utility</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <div class="body">
+                                            <p>
+                                                This website is protected by a screening utility
+                                                known as
+                                                <a href="https://anubis.techaro.lol/" class="italic"
+                                                    >Anubis</a
+                                                >. You may also have heard of this program as
+                                                <span class="italic">BotStopper</span> 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>
+                                                Despite what some fools at the FSF figure, Anubis IS
+                                                NOT malware. See:
+                                                <a
+                                                    href="https://www.youtube.com/watch?v=YisGpdPjYM8"
+                                                    class="italic"
+                                                    >I Platformed A Linux "Cyber Criminal"</a
+                                                >. It does have
+                                                <span class="italic">similar</span> 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>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Content Security Policy (CSP)</h3>
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">
+                                                    HTTP Strict Transport Security (HSTS)
+                                                </h3>
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Other Security Headers</h3>
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Security.txt</h3>
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                </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="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Anubis</h3>
+                                                <span class="subtitle"
+                                                    >AI Scraper Screening Utility</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <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,
+                                                <span class="italic">can</span> 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>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <include src="includes/tailer.html" />
+            </div>
+            <div class="pane_spacer">
+                <div class="spacer_container"><p>#AD</p></div>
+                <div class="spacer_container"><p>#AD</p></div>
+            </div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/errors/400.html

@@ -5,29 +5,35 @@
         <title>400 | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">400</p>
+                    <h5 class="location_page">400</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-        <div class="error_pane">
+            <div class="pane_error">
+                <div class="body">
                     <h1>400</h1>
                     <h2>Bad Request!</h2>
                     <hr />
                     <p>
-                The server cannot or will not process this request due to apparent client-side error
+                        The server cannot or will not process this request due to apparent
-                or deception.
+                        client-side error or deception.
                     </p>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">401</p>
+                    <h5 class="location_page">401</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>401</h1>
                     <h2>Unauthorized!</h2>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">403</p>
+                    <h5 class="location_page">403</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>403</h1>
                     <h2>Forbidden!</h2>
                     <hr />
                     <p>The server is refusing to act upon your request.</p>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">404</p>
+                    <h5 class="location_page">404</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>404</h1>
                     <h2>Page not found!</h2>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">500</p>
+                    <h5 class="location_page">500</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>500</h1>
                     <h2>Internal Server Error!</h2>
                     <hr />
                     <p>The server has no clue WTF happened here.</p>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">501</p>
+                    <h5 class="location_page">501</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>501</h1>
                     <h2>Not Implemented!</h2>
                     <hr />
                     <p>Whatever you just tried doing, the server doesn't know how to handle it.</p>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">502</p>
+                    <h5 class="location_page">502</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>502</h1>
                     <h2>Bad Gateway!</h2>
                     <hr />
                     <p>This service may be offline.</p>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">503</p>
+                    <h5 class="location_page">503</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>503</h1>
                     <h2>Service Unavailable!</h2>
                     <hr />
                     <p>The server may be overloaded or down for maintenance.</p>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </div>
+        </div>
+        <include src="includes/footer.html" />
         <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/504.html

@@ -5,29 +5,35 @@
         <title>Error Template | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">Error Template</p>
+                    <h5 class="location_page">Error Template</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="body">
                     <h1>504</h1>
                     <h2>Gateway Timeout!</h2>
                     <hr />
                     <p>
-                The server acted as a proxy and didn't receive a timely response from the upstream
+                        The server acted as a proxy and didn't receive a timely response from the
-                server.
+                        upstream server.
                     </p>
                 </div>
+                <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </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,22 @@
+<?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>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,11 @@
+<!-- Minecraft -->
+<li class="nav_dropdown">
+    <div class="dropdown_header nav_item">
+        <a class="nav_title" href="/minecraft/">Minecraft</a>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+    </div>
+    <div class="dropdown_body">
+        <a class="nav_title" href="/minecraft/bearock/">Bearock SMP</a>
+        <a class="nav_title" href="/minecraft/rebirth/">Rebirth SMP</a>
+    </div>
+</li>

src/includes/blog_recent_posts.html

@@ -0,0 +1,14 @@
+<div class="spacer_container spacer_posts">
+    <h2>Recent</h2>
+    <div class="chunk_list recent_posts">
+        <div class="chunk">
+            <div class="header">
+                <div>
+                    <h3 class="name">Divergent Pathways</h3>
+                    <span class="subtitle">29 July, 2025</span>
+                </div>
+                <a href="/blog/posts/0_divergent_pathways.html" class="status"> View </a>
+            </div>
+        </div>
+    </div>
+</div>

src/includes/footer.html

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

src/includes/meta.html

@@ -1,11 +1,9 @@
 <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" />
 
 <link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
+
 <link rel="stylesheet" type="text/css" href="style.css" />

src/includes/nav_menu.html

@@ -1,29 +1,21 @@
 <ul class="nav_menu">
     <!-- Home -->
-    <li class="nav_body">
+    <li class="nav_item">
-        <a class="nav_title" href="index.html">Home</a>
+        <a class="nav_title" href="/">Home</a>
     </li>
 
-    <!-- Minecraft -->
+    <li class="nav_item">
-    <li class="nav_dropdown">
+        <a class="nav_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 />
 
     <!-- About -->
-    <li class="nav_body"><a class="nav_title" href="#">About</a></li>
+    <li class="nav_item"><a class="nav_title" href="/about.html">About</a></li>
 
     <!-- Pronoun Pages -->
     <li class="nav_dropdown">
-        <a class="dropdown_header nav_body" href="https://pronouns.page/@Cutieguwu">
+        <a class="dropdown_header nav_item" href="https://pronouns.page/@Cutieguwu">
             <p class="nav_title">Pronoun Pages</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </a>
@@ -35,13 +27,14 @@
 
     <!-- External Links -->
     <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
+        <div class="dropdown_header nav_item">
             <p class="nav_title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="dropdown_body">
-            <a class="nav_title" href="https://github.com/Cutieguwu">Github</a>
+            <a class="nav_title" href="https://github.com/Cutieguwu">Github (Mirror)</a>
             <a class="nav_title" href="https://www.twitch.tv/cutieguwu">Twitch</a>
+            <a class="nav_title" href="https://www.youtube.com/@Cutieguwu">YouTube</a>
         </div>
     </li>
 
@@ -49,7 +42,7 @@
 
     <!-- Public Services -->
     <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
+        <div class="dropdown_header nav_item">
             <p class="nav_title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
@@ -60,22 +53,22 @@
 
     <!-- Services -->
     <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
+        <div class="dropdown_header nav_item">
             <p class="nav_title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
         </div>
         <div class="dropdown_body">
             <a class="nav_title" href="https://gitea.cutieguwu.ca/Cutieguwu">Gitea</a>
-            <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</a>
-            <a class="nav_title" href="https://nextcloud.cutieguwu.ca">Nextcloud</a>
-            <a class="nav_title" href="https://play.cutieguwu.ca">Rebirth</a>
-            <a class="nav_title" href="https://zotero.cutieguwu.ca">Zotero</a>
         </div>
     </li>
 
     <hr />
 
     <!-- Website Disclosure -->
-    <li class="nav_body"><a class="nav_title" href="#">Website Disclosure</a></li>
+    <li class="nav_item">
-    <li class="nav_body"><a class="nav_title" href="acknowledgements.html">Acknowledgements</a></li>
+        <a class="nav_title" href="/disclosure.html">Disclosure</a>
+    </li>
+    <li class="nav_item">
+        <a class="nav_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="gitea"></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="license"></ion-icon>
+    </a>
+    <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
+        <ion-icon name="alert-circle-outline" alt="Report Issues" class="issue_tracker"></ion-icon>
+    </a>
+    <a href="https://www.cutieguwu.ca/feed/rss.xml" title="RSS Feed" download>
+        <ion-icon name="logo-rss" alt="RSS Feed" class="rss"></ion-icon>
+    </a>
+    <a class="phantom"></a>
 </div>

src/includes/tailer.html

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

src/index.html

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

src/minecraft/bearock/index.html

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

src/minecraft/bearock/style.scss

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

src/minecraft/index.html

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

src/minecraft/rebirth/index.html

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

src/minecraft/rebirth/style.scss

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

src/minecraft/style.scss

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

src/partials/_a_chunk_list.scss

@@ -0,0 +1,85 @@
+/*
+All specificities to do with Chunk Lists are a disaster.
+
+Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
+*/
+
+.chunk_list {
+    display: grid;
+
+    width: 100%;
+
+    .chunk + .chunk {
+        margin-top: var(--spacing-horizontal);
+    }
+
+    .chunk {
+        width: inherit;
+
+        > .header {
+            display: grid;
+            grid-auto-flow: row;
+            grid-template-columns: 1fr min-content;
+
+            column-gap: calc(var(--spacing-horizontal) * 2);
+
+            background-color: var(--background-3);
+            border-radius: var(--border-radius-leaf);
+
+            padding: var(--spacing-horizontal);
+
+            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-horizontal) * 2);
+
+            ul {
+                font-family: var(--font-family-generic);
+
+                li + li {
+                    margin-top: 0.5em;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .chunk_list .chunk {
+        > .header {
+            column-gap: var(--spacing-horizontal);
+        }
+
+        > .body {
+            /* Collapse the L/R padding to maximize usable space */
+            padding: 0;
+        }
+    }
+}

src/partials/_a_common.scss

@@ -0,0 +1,148 @@
+@use "a_chunk_list";
+@use "a_footer";
+@use "a_layouts";
+@use "a_quick_links";
+@use "a_pages";
+
+@use "pane_nav";
+@use "pane_spacer";
+
+: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-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);
+
+    --margin-pane: 1.5rem;
+
+    --spacing-horizontal: 0.75rem;
+    --spacing-menu-gap: 1rem;
+    --spacing-thicc: calc(var(--margin-pane) * 4);
+
+    --transition-fade: 0.4s ease-out;
+    --transition-cut: none;
+
+    --transform-scale-x: scaleX(1.15);
+    --transform-scale-y: scaleY(1.15);
+
+    body {
+        background-color: var(--background-0);
+        margin: 0;
+        color: var(--white-3);
+    }
+}
+
+* {
+    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);
+}
+
+ion-icon {
+    width: 1rem;
+    height: 1rem;
+}
+
+.viewport {
+    /* Adds a margin otherwise for some reason. */
+    margin: inherit;
+
+    display: grid;
+    grid-auto-flow: column dense;
+    grid-template-columns: min-content 1fr min-content;
+}
+
+@media only screen and (max-width: 500px) {
+    .viewport {
+        grid-auto-flow: row;
+        grid-template-columns: none;
+
+        /* Compress spacings to maximize useable area. */
+        padding: var(--spacing-horizontal);
+        justify-items: center;
+    }
+
+    .pane_nav,
+    .pane_spacer,
+    .footer {
+        position: static;
+        top: auto;
+        left: auto;
+        right: auto;
+    }
+
+    .pane_nav,
+    .pane_main,
+    .pane_blog,
+    .pane_error,
+    .pane_spacer {
+        margin: 0;
+    }
+}
+
+.italic {
+    font-style: italic;
+}

src/partials/_a_footer.scss

@@ -0,0 +1,14 @@
+.footer {
+    margin: 0;
+    padding: var(--spacing-horizontal);
+    width: min-content;
+
+    background-color: var(--background-2);
+    border-top-right-radius: var(--border-radius-large);
+
+    font-size: 1.65vh;
+    white-space: nowrap;
+
+    position: fixed;
+    bottom: 0;
+}

src/partials/_a_layouts.scss

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

src/partials/_a_pages.scss

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

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_tailer.scss

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

src/partials/_blog_recent_posts.scss

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

src/partials/_nav_location.scss

@@ -2,8 +2,7 @@
     margin: 0;
     padding: var(--spacing-horizontal);
     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 {
@@ -13,6 +12,5 @@
 
     .location_page {
         margin: 0;
-        padding: 0;
     }
 }

src/partials/_nav_menu.scss

@@ -20,8 +20,10 @@
     }
 }
 
-.nav_body {
+.nav_item {
-    /* 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: none;
 
@@ -30,8 +32,8 @@
     transition: var(--transition-fade);
 }
 
-.nav_body:hover,
+.nav_item:hover,
-.nav_dropdown:hover .nav_body {
+.nav_dropdown:hover .nav_item {
     transform: var(--transform-scale-x);
     transition: var(--transition-cut);
 

src/partials/_nav_quick_links.scss

@@ -1,54 +1,62 @@
-.nav_quick_links {
+.pane_nav .quick_links {
-    --cols: 5;
+    --item-padding: 0.25rem;
-    --item-padding: 0.35rem;
+
-    --item-edge-length: 1.25rem;
+    justify-content: space-between;
-    --item-size: calc(
-        var(--item-edge-length) + calc(var(--item-padding) * 2)
-    );
 
     /*
-    display: flex;
+    To colour the icons, apply inline styling.
-    flex-flow: row wrap;
-    align-items: center;
-    margin-right: auto;
     */
 
-    display: grid;
-    grid-template-columns:
-        var(--item-size) var(--item-size) var(--item-size)
-        var(--item-size) var(--item-size);
-    align-items: center;
-
-    gap: var(--spacing-menu-gap)
-        calc(
-            calc(100% - calc(var(--item-size) * var(--cols))) /
-                calc(var(--cols) - 1)
-        );
-
     a {
-        width: var(--item-size);
-        height: var(--item-size);
-
-        * {
-            width: var(--item-edge-length);
-            height: var(--item-edge-length);
-            padding: var(--item-padding);
-
         background-color: var(--background-2);
-            border-radius: var(--border-radius-small)
+
-                var(--border-radius-large);
+        transition: var(--transition-fade);
+
+        ion-icon {
+            width: var(--item-size);
+        }
     }
 
-        .icon_gitea {
+    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;
+    }
+}
+
+.gitea {
     color: var(--accent-green);
 }
 
-        .icon_github {
+.github {
     color: var(--accent-blue);
 }
 
-        .icon_license {
+.license {
-            color: var(--accent-purple);
+    color: var(--accent-indigo);
 }
+
+.issue_tracker {
+    color: var(--accent-magenta);
 }
+
+.rss {
+    color: var(--accent-orange);
 }

src/partials/_nav_title.scss

@@ -9,7 +9,6 @@
     margin: inherit;
     padding: 0 var(--spacing-horizontal);
     transition: var(--transition-fade);
-    text-transform: uppercase;
     display: block;
 }
 

src/partials/_page_resume.scss

@@ -0,0 +1,212 @@
+.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;
+    }
+}
+
+.spacer_contact {
+    justify-content: start !important;
+
+    .contact_info .chunk .header {
+        background-color: var(--background-1);
+
+        white-space: nowrap;
+        text-align: justify;
+    }
+}
+
+.about_me {
+    padding: 0 var(--spacing-thicc) var(--spacing-horizontal);
+}
+
+.early_history {
+    justify-self: center;
+}
+
+.prog_languages,
+.software {
+    * {
+        margin: 0.5rem;
+    }
+}
+
+.software_row {
+    grid-template-columns: 60% auto;
+}
+
+.software {
+    .three_dimensional_printing {
+        color: var(--accent-magenta);
+    }
+
+    .android {
+        color: var(--accent-green);
+    }
+
+    .anubis {
+        color: var(--accent-green);
+    }
+
+    .blender {
+        color: var(--accent-orange);
+    }
+
+    .davinci_resolve {
+        color: var(--accent-blue);
+    }
+
+    .gimp {
+        color: var(--accent-magenta);
+    }
+
+    .git {
+        color: var(--accent-orange);
+    }
+
+    .ios {
+        color: var(--white-0);
+    }
+
+    .libreoffice {
+        color: var(--accent-green);
+    }
+
+    .linux {
+        color: var(--white-0);
+    }
+
+    .macos {
+        color: var(--white-0);
+    }
+
+    .ms_office {
+        color: var(--accent-orange);
+    }
+
+    .ms_windows {
+        color: var(--accent-blue);
+    }
+
+    .musescore {
+        color: var(--accent-cyan);
+    }
+
+    .nextcloud {
+        color: var(--accent-cyan);
+    }
+
+    .nginx {
+        color: var(--accent-green);
+    }
+
+    .obs {
+        color: var(--white-0);
+    }
+
+    .photoshop {
+        color: var(--accent-blue);
+    }
+
+    .premiere_pro {
+        color: var(--accent-purple);
+    }
+
+    .prusaslicer {
+        color: var(--accent-orange);
+    }
+
+    .shopbot_control_software {
+        color: var(--accent-blue);
+    }
+
+    .cnc_machining,
+    .vectric_aspire {
+        color: var(--accent-red);
+        rotate: 90deg;
+    }
+
+    .zotero {
+        color: var(--accent-orange);
+    }
+}
+
+.prog_languages {
+    .asciidoc {
+        color: var(--accent-cyan);
+    }
+
+    .css {
+        color: var(--accent-purple);
+    }
+
+    .html {
+        color: var(--accent-orange);
+    }
+
+    .json {
+        color: var(--accent-cyan);
+    }
+
+    .markdown {
+        color: var(--accent-indigo);
+    }
+
+    .nginx {
+        color: var(--accent-green);
+    }
+
+    .python {
+        color: var(--accent-blue);
+    }
+
+    .ron {
+        color: var(--accent-orange);
+    }
+
+    .rust {
+        color: var(--accent-orange);
+    }
+
+    .scss {
+        color: var(--accent-magenta);
+    }
+
+    .toml {
+        color: var(--accent-orange);
+    }
+
+    .shell {
+        color: var(--accent-green);
+    }
+
+    .yaml {
+        color: var(--accent-yellow);
+    }
+}
+
+.docker {
+    /*
+    Docker is protective of their colours.
+    https://www.docker.com/company/newsroom/media-resources/
+    */
+
+    color: #1d63edff;
+}
+
+@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,61 @@
+@use "a_tailer";
+
+.pane_blog {
+    flex: 1;
+    flex-direction: column;
+
+    margin: var(--margin-pane);
+
+    justify-content: center;
+
+    > .body {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
+        padding-top: var(--spacing-horizontal);
+
+        > .header {
+            text-align: center;
+            padding: var(--spacing-horizontal);
+            width: min-content;
+
+            white-space: nowrap;
+
+            margin: 0 auto;
+
+            .title {
+                background-color: var(--background-1);
+                border-radius: var(--border-radius-leaf);
+                padding: var(--spacing-horizontal);
+            }
+
+            .date {
+                display: block;
+
+                font-size: 0.85rem;
+                font-weight: normal;
+                font-style: italic;
+                font-family: var(--font-family-generic);
+            }
+        }
+
+        > .body {
+            text-align: start;
+
+            padding: 0 var(--spacing-thicc) var(--spacing-thicc);
+
+            p {
+                color: var(--white-1);
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .pane_blog {
+        width: 100%;
+
+        .body > .body {
+            padding: var(--spacing-horizontal);
+        }
+    }
+}

src/partials/_pane_error.scss

@@ -1,6 +1,25 @@
+@use "a_tailer";
+
 .pane_error {
     width: max-content;
+
     margin: auto; /* center object */
-    text-align: center;
+
+    > .body,
+    .tailer {
         background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
+        padding: var(--spacing-horizontal);
+
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .pane_error {
+        width: 100%;
+
+        margin-top: var(--margin-pane);
+        margin-bottom: var(--margin-pane);
+    }
 }

src/partials/_pane_main.scss

@@ -1,10 +1,48 @@
-.pane_main {
+@use "a_tailer";
-    flex: 1;
-    text-align: center;
-    background-color: var(--background-2);
-    margin: var(--margin-pane);
-    padding: 0;
 
-    border-radius: var(--border-radius-small)
+.pane_main {
-        var(--border-radius-large);
+    margin: var(--margin-pane);
+
+    > .body {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
+        padding: var(--spacing-horizontal);
+
+        > .header {
+            text-align: center;
+            padding: var(--spacing-horizontal);
+            width: max-content;
+
+            margin: 0 auto;
+
+            .title {
+                background-color: var(--background-1);
+                border-radius: var(--border-radius-leaf);
+                padding: var(--spacing-horizontal);
+            }
+
+            .date {
+                display: block;
+
+                font-size: 0.85rem;
+                font-weight: normal;
+                font-style: italic;
+                font-family: var(--font-family-generic);
+            }
+        }
+
+        > .body {
+            text-align: start;
+
+            p {
+                color: var(--white-1);
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .pane_main {
+        width: 100%;
+    }
 }

src/partials/_pane_nav.scss

@@ -4,14 +4,26 @@
 @use "nav_quick_links";
 
 .pane_nav {
-    --spacing-horizontal: 0.75rem;
-    --transform-scale-x: scaleX(1.15);
-
     margin: var(--margin-pane);
-    padding: 0;
+
-    gap: var(--spacing-menu-gap);
     width: min-content;
-    align-content: start;
+    height: min-content;
+
     display: grid;
+    grid-auto-flow: row;
+    grid-template-rows: repeat(4, min-content);
+    gap: var(--spacing-menu-gap);
+    align-content: start;
+
+    position: sticky;
+    top: var(--margin-pane);
+    left: var(--margin-pane);
+
     color: var(--accent-pink);
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_nav {
+        width: 75%;
+    }
+}

src/partials/_pane_spacer.scss

@@ -1,25 +1,25 @@
 .pane_spacer {
     margin: var(--margin-pane);
-    padding: 0;
+
-    width: 10vw;
+    width: min-content;
+    height: calc(100vh - calc(var(--margin-pane) * 2));
+
     display: grid;
-    grid-auto-flow: row;
+    grid-auto-flow: row dense;
     gap: var(--spacing-menu-gap);
 
-    .spacer_container {
+    position: sticky;
-        margin: 0;
+    top: var(--margin-pane);
-        background-color: var(--background-2);
+    right: var(--margin-pane);
-        height: calc(
+
-            50vh - var(--margin-pane) - calc(
+    .spacer_container {
-                    var(--spacing-menu-gap) / 2
+        padding: var(--spacing-horizontal);
-                )
+        background-color: var(--background-2);
-        );
+        height: 100%;
-        flex: 1;
+        border-radius: var(--border-radius-leaf);
-        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 +29,9 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_spacer {
+        width: 100%;
+    }
+}

src/resume.html

@@ -0,0 +1,545 @@
+<!doctype html>
+
+<html lang="en-ca">
+    <head>
+        <title>Resume | Cutieguwu</title>
+        <meta name="robots" content="noindex" />
+        <include src="includes/meta.html" />
+    </head>
+    <body>
+        <div class="viewport">
+            <nav class="pane_nav">
+                <include src="includes/nav_logo.html" />
+                <include src="includes/nav_menu.html" />
+                <div class="location">
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Resume</h5>
+                </div>
+                <include src="includes/nav_quick_links.html" />
+            </nav>
+            <div class="pane_main">
+                <div class="body">
+                    <div class="header">
+                        <h1 class="title">Olivia Brooks</h1>
+                        <p class="date">Last Edited: 08 August, 2025</p>
+                    </div>
+                    <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="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">OTHS Tech Crew</h3>
+                                                <span class="subtitle"
+                                                    >September 2024 - June 2025</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Farmers' Market</h3>
+                                                <span class="subtitle"
+                                                    >Wee Youngn' - 2020, Summer 2023</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">MPS Audio-Visual Club</h3>
+                                                <span class="subtitle">September 2018 - 2020</span>
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Education -->
+                            <div class="item education">
+                                <h2 class="title">Education</h2>
+                                <div class="chunk_list">
+                                    <div class="chunk">
+                                        <div class="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>
+                                        </div>
+                                        <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>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Osgoode Township High School</h3>
+                                                <span class="subtitle"
+                                                    >September 2021 to 2025 - Ottawa, ON</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <div class="body">
+                                            <p>Gr. 9 to 12</p>
+                                            <ul>
+                                                <li>French Immersion Studies</li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Air Cadets, Squadron 742</h3>
+                                                <span class="subtitle"
+                                                    >November 2019 to September 2022 - Ottawa,
+                                                    ON</span
+                                                >
+                                            </div>
+                                        </div>
+                                        <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>
+                                    </div>
+                                    <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="chunk_list">
+                                    <div class="chunk">
+                                        <div class="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>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <div>
+                                                <h3 class="name">Silver Medalist</h3>
+                                                <span class="subtitle">Average over 90%</span>
+                                            </div>
+                                            <h3 class="status">x2</h3>
+                                        </div>
+                                    </div>
+                                    <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="chunk_list">
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">Ontario Secondary School Diploma</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">DELF</h3>
+                                            <h3 class="status">Niveau B2</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">Red Cross Swimming</h3>
+                                            <h3 class="status">Level 10</h3>
+                                        </div>
+                                    </div>
+                                    <div class="chunk">
+                                        <div class="header">
+                                            <h3 class="name">Canadian Firearms Safety Course</h3>
+                                            <h3 class="status">PAL</h3>
+                                        </div>
+                                    </div>
+                                    <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="three_dimensional_printing"
+                                        ></ion-icon>
+                                        <p>3D Printing</p>
+                                    </div>
+                                    <div>
+                                        <ion-icon name="logo-android" class="android"></ion-icon>
+                                        <p>Android</p>
+                                    </div>
+                                    <a href="https://anubis.techaro.lol/">
+                                        <ion-icon name="globe-outline" class="anubis"></ion-icon>
+                                        <p>Anubis</p>
+                                    </a>
+                                    <a href="https://www.blender.org/">
+                                        <ion-icon name="cube-outline" class="blender"></ion-icon>
+                                        <p>Blender</p>
+                                    </a>
+                                    <div>
+                                        <ion-icon
+                                            name="play-skip-forward-outline"
+                                            class="vectric_aspire"
+                                        ></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="gimp"></ion-icon>
+                                        <p>GIMP</p>
+                                    </a>
+                                    <a href="https://git-scm.com/">
+                                        <ion-icon name="git-branch-outline" class="git"></ion-icon>
+                                        <p>Git</p>
+                                    </a>
+                                    <a href="https://gitea.cutieguwu.ca">
+                                        <ion-icon name="cafe-outline" class="gitea"></ion-icon>
+                                        <p>Gitea</p>
+                                    </a>
+                                    <a href="https://github.com/Cutieguwu">
+                                        <ion-icon name="logo-github" class="github"></ion-icon>
+                                        <p>Github</p>
+                                    </a>
+                                    <a href="https://www.apple.com/ca/os/ios/">
+                                        <ion-icon name="logo-apple" class="ios"></ion-icon>
+                                        <p>iOS</p>
+                                    </a>
+                                    <a href="https://www.libreoffice.org/">
+                                        <ion-icon
+                                            name="document-outline"
+                                            class="libreoffice"
+                                        ></ion-icon>
+                                        <p>LibreOffice</p>
+                                    </a>
+                                    <a href="https://www.kernel.org/category/about.html">
+                                        <ion-icon name="logo-tux" class="linux"></ion-icon>
+                                        <p>Linux</p>
+                                    </a>
+                                    <a href="https://www.apple.com/ca/os/macos/">
+                                        <ion-icon name="logo-apple" class="macos"></ion-icon>
+                                        <p>MacOS</p>
+                                    </a>
+                                    <a href="https://www.office.com/">
+                                        <ion-icon name="apps-outline" class="ms_office"></ion-icon>
+                                        <p>MS Office</p>
+                                    </a>
+                                    <a href="https://www.microsoft.com/en-ca/windows">
+                                        <ion-icon name="logo-windows" class="ms_windows"></ion-icon>
+                                        <p>MS Windows</p>
+                                    </a>
+                                    <a href="https://musescore.org/en">
+                                        <ion-icon name="musical-notes" class="musescore"></ion-icon>
+                                        <p>MuseScore Studio</p>
+                                    </a>
+                                    <a href="https://nextcloud.com/">
+                                        <ion-icon name="apps-outline" class="nextcloud"></ion-icon>
+                                        <p>Nextcloud</p>
+                                    </a>
+                                    <a href="https://nginx.org/en/">
+                                        <ion-icon name="globe-outline" class="nginx"></ion-icon>
+                                        <p>Nginx</p>
+                                    </a>
+                                    <a href="https://obsproject.com/">
+                                        <ion-icon name="aperture-outline" class="obs"></ion-icon>
+                                        <p>OBS</p>
+                                    </a>
+                                    <a href="https://www.adobe.com/ca/products/photoshop.html">
+                                        <ion-icon name="image-outline" class="photoshop"></ion-icon>
+                                        <p>Photoshop</p>
+                                    </a>
+                                    <a href="https://www.prusa3d.com/page/prusaslicer_424/">
+                                        <ion-icon
+                                            name="layers-outline"
+                                            class="prusaslicer"
+                                        ></ion-icon>
+                                        <p>PrusaSlicer</p>
+                                    </a>
+                                    <a
+                                        href="https://shopbottools.com/support-resources/control-software/"
+                                    >
+                                        <ion-icon
+                                            name="keypad-outline"
+                                            class="shopbot_control_software"
+                                        ></ion-icon>
+                                        <p>ShopBot Control Software</p>
+                                    </a>
+                                    <a href="https://www.vectric.com/products/aspire/">
+                                        <ion-icon
+                                            name="play-skip-forward-outline"
+                                            class="vectric_aspire"
+                                        ></ion-icon>
+                                        <p>Vectric Aspire</p>
+                                    </a>
+                                    <a href="https://www.zotero.org/">
+                                        <ion-icon
+                                            name="document-attach-outline"
+                                            class="zotero"
+                                        ></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="asciidoc"
+                                        ></ion-icon>
+                                        <p>AsciiDoc</p>
+                                    </a>
+                                    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">
+                                        <ion-icon name="logo-css3" class="css"></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="html"></ion-icon>
+                                        <p>HTML</p>
+                                    </a>
+                                    <a href="https://www.json.org/json-en.html">
+                                        <ion-icon name="shapes-outline" class="json"></ion-icon>
+                                        <p>JSON</p>
+                                    </a>
+                                    <a href="https://www.markdownguide.org/">
+                                        <ion-icon name="logo-markdown" class="markdown"></ion-icon>
+                                        <p>Markdown</p>
+                                    </a>
+                                    <a href="https://nginx.org/en/docs/">
+                                        <ion-icon name="globe-outline" class="nginx"></ion-icon>
+                                        <p>Nginx</p>
+                                    </a>
+                                    <a href="https://www.python.org/">
+                                        <ion-icon name="logo-python" class="python"></ion-icon>
+                                        <p>Python</p>
+                                    </a>
+                                    <a href="https://github.com/ron-rs/ron">
+                                        <ion-icon name="shapes-outline" class="ron"></ion-icon>
+                                        <p>RON</p>
+                                    </a>
+                                    <a href="https://www.rust-lang.org/">
+                                        <ion-icon name="cog-outline" class="rust"></ion-icon>
+                                        <p>Rust</p>
+                                    </a>
+                                    <a href="https://sass-lang.com/">
+                                        <ion-icon name="logo-sass" class="scss"></ion-icon>
+                                        <p>SCSS</p>
+                                    </a>
+                                    <a href="https://toml.io/en/">
+                                        <ion-icon name="shapes-outline" class="toml"></ion-icon>
+                                        <p>TOML</p>
+                                    </a>
+                                    <a href="https://www.gnu.org/software/bash/manual/bash.html">
+                                        <ion-icon name="terminal-outline" class="shell"></ion-icon>
+                                        <p>[Bash] Shell</p>
+                                    </a>
+                                    <a href="https://yaml.org/">
+                                        <ion-icon name="shapes-outline" class="yaml"></ion-icon>
+                                        <p>YAML</p>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <include src="includes/tailer.html" />
+            </div>
+            <div class="pane_spacer pane_details">
+                <div class="spacer_container spacer_contact">
+                    <h2>Contact Info</h2>
+                    <div class="chunk_list contact_info">
+                        <div class="chunk">
+                            <div class="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>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="spacer_container spacer_contact">
+                    <h2>Spoken Languages</h2>
+                    <div class="chunk_list contact_info">
+                        <div class="chunk">
+                            <div class="header">
+                                <div>
+                                    <h3 class="name">English</h3>
+                                    <span class="subtitle">Fluent</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="chunk">
+                            <div class="header">
+                                <div>
+                                    <h3 class="name">Français</h3>
+                                    <span class="subtitle">DELF B2</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="spacer_container spacer_contact">
+                    <h2>References</h2>
+                    <div class="chunk_list contact_info">
+                        <div class="chunk">
+                            <div class="header">
+                                <div>
+                                    <h3 class="name">By Request</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <include src="includes/footer.html" />
+        <include src="includes/scripts.html" />
+    </body>
+</html>

src/style.scss

@@ -1,83 +1,3 @@
+@use "partials/a_common";
+
 @use "partials/pane_main";
-@use "partials/pane_nav";
-@use "partials/pane_spacer";
-
-@use "partials/pane_error";
-
-: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/blog_post.html

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

src/templates/error.html

@@ -5,26 +5,32 @@
         <title>Error Template | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">Error Template</p>
+                    <h5 class="location_page">Error Template</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
+                <div class="error_body">
                     <h1>Error Code</h1>
                     <h2>Error Title</h2>
                     <hr />
                     <p>Error details and explaination.</p>
                 </div>
+                <include src="includes/tailer.html" />
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </div>
+        </div>
+        <include src="includes/footer.html" />
         <include src="includes/scripts.html" />
     </body>
 </html>

src/templates/main.html

@@ -5,21 +5,27 @@
         <title>Main Template | Cutieguwu</title>
         <include src="includes/meta.html" />
     </head>
-    <body class="viewport">
+    <body>
+        <div 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>
+                    <h4 class="location_header">You are here:</h4>
-                <p class="location_page">Main Template</p>
+                    <h5 class="location_page">Main Template</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-        <div class="pane_main"></div>
+            <div class="pane_main">
+                <div class="main_body"></div>
+                <include src="includes/tailer.html" />
+            </div>
             <div class="pane_spacer">
                 <div class="spacer_container"><p>#AD</p></div>
                 <div class="spacer_container"><p>#AD</p></div>
             </div>
+        </div>
+        <include src="includes/footer.html" />
         <include src="includes/scripts.html" />
     </body>
 </html>