Update index.html

build.sh

@@ -29,7 +29,7 @@ do
 
         for html in "${files[@]}"
         do
-            echo -e "  $cyan$html -> target/"
+            echo -e "  $cyan$html"
 
             eval $python 'balloon.py' $html
         done
@@ -38,9 +38,16 @@ do
     then
         echo -e "$green"Styling...
 
-        sass src/style.scss target/style.css
+        files=(
+            'style'
+            'errors/style'
+        )
 
-        echo -e "$cyan"'  src/style.scss -> target/style.css'
+        for stylesheet in "${files[@]}"
+        do
+            echo -e "$cyan  src/$stylesheet.scss -> target/$stylesheet.css"
+            sass src/$stylesheet.scss target/$stylesheet.css
+        done
 
     elif [ "$x" == 'copy' ]
     then
@@ -54,7 +61,7 @@ do
 
         for item in "${files[@]}"
         do
-            echo -e "$cyan  src/$item -> target/$item"
+            echo -e "$cyan  src/$item"
 
             cp -R src/$item target/$item
         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:cx="603.12373"
-     inkscape:cy="523.65331"
+     inkscape:zoom="0.7"
+     inkscape:cx="602.85714"
+     inkscape:cy="397.14286"
      inkscape:window-width="1920"
      inkscape:window-height="1042"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
+     inkscape:current-layer="layer1"
+     showguides="true" />
   <defs
      id="defs1" />
   <g
      inkscape:groupmode="layer"
      id="layer2"
-     inkscape:label="Background Layer"
-     style="fill:#ffffff;fill-opacity:1">
+     inkscape:label="Background"
+     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"
-       x="-280"
-       y="-55"
-       transform="rotate(-90,-2.9791666e-7,-55.000001)"
+       height="390"
+       x="-225"
+       y="7.0208336e-07"
+       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"
-       y="170"
+       x="-220.00002"
+       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"
-       y="170"
+       x="-165.00002"
+       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"
-       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"
+       style="fill:#bfbfbf;fill-opacity:1;stroke:none;stroke-width:0.247;stroke-dasharray:none;stroke-opacity:1"
        id="rect5-6-1"
        width="50"
        height="50"
        x="-110"
-       y="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"
-       y="115"
+       x="-220.00002"
+       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"
-       y="115"
+       x="-165.00002"
+       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"
-       y="60"
+       x="-220.00002"
+       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"
-       y="60"
+       x="-165.00002"
+       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"
-       transform="rotate(-90)"
+       y="5.0000033"
+       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"
-       id="rect3"
+       style="fill:#874ac0;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2"
        width="50"
        height="50"
        x="-220"
-       y="-50"
-       transform="rotate(-90)"
-       inkscape:label="accent-blue" />
+       y="5.0000033"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="accent-indigo" />
     <rect
-       style="fill:#ff9f9f;fill-opacity:1;stroke-width:0.246609"
-       id="rect5-2"
+       style="fill:#5f62e2;fill-opacity:1;display:inline;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect3"
        width="50"
        height="50"
        x="-165"
-       y="-50"
-       transform="rotate(-90)"
-       inkscape:label="accent-pink" />
+       y="5.0000024"
+       transform="rotate(-90,4.9999999e-7,-6.2499999e-7)"
+       inkscape:label="accent-blue" />
     <rect
-       style="fill:#cfeb9e;fill-opacity:1;stroke-width:0.246609"
-       id="rect5"
+       style="display:inline;fill:#a7edef;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
+       id="rect2-3"
        width="50"
        height="50"
        x="-110"
+       y="5.0000024"
+       transform="rotate(-90)"
+       inkscape:label="accent-cyan" />
+    <rect
+       style="fill:#c5e689;fill-opacity:1;stroke:none;stroke-width:0.246609"
+       id="rect5"
+       width="50"
+       height="50"
+       x="-275"
        y="-50"
        transform="rotate(-90)"
        inkscape:label="accent-green" />
     <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect4-6-2-9"
-       width="50"
-       height="50"
-       x="-165"
-       y="225"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
-       id="rect4-6"
-       width="50"
-       height="50"
-       x="-110"
-       y="5"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
-       id="rect2-3"
-       width="50"
-       height="50"
-       x="-275"
-       y="5"
-       transform="rotate(-90)"
-       inkscape:label="unused" />
-    <rect
-       style="display:none;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.246609;stroke-opacity:1"
+       style="display:inline;fill:#e4d281;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
        id="rect3-5"
        width="50"
        height="50"
        x="-220"
-       y="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"
-       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"
+       style="display:inline;fill:#e18142;fill-opacity:1;stroke:none;stroke-width:0.246609;stroke-opacity:1"
        id="rect5-2-6-2"
        width="50"
        height="50"
        x="-165"
-       y="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/acknowledgements.html

@@ -5,13 +5,14 @@
         <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>
-                <p class="location_page">Acknowledgements</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Acknowledgements</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -19,14 +20,16 @@
                 <p>There are currently no acknowledgements</p>
                 <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
                 <p>
-                I will get my thanks to various open projects in here in time, but I'm still busy
-                getting the basics handled.
+                    I will get my thanks to various open projects in here in time, but I'm still
+                    busy getting the basics handled.
                 </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/400.html

@@ -5,29 +5,32 @@
         <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>
-                <p class="location_page">400</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">400</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-        <div class="error_pane">
+            <div class="pane_error">
                 <h1>400</h1>
                 <h2>Bad Request!</h2>
                 <hr />
                 <p>
-                The server cannot or will not process this request due to apparent client-side error
-                or deception.
+                    The server cannot or will not process this request due to apparent client-side
+                    error or deception.
                 </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,13 +5,14 @@
         <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>
-                <p class="location_page">401</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">401</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -23,6 +24,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">403</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">403</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -25,6 +26,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">404</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">404</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -23,6 +24,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">500</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">500</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -25,6 +26,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">501</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">501</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -25,6 +26,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">502</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">502</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -25,6 +26,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">503</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">503</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -25,6 +26,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">Error Template</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Error Template</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -20,14 +21,16 @@
                 <h2>Gateway Timeout!</h2>
                 <hr />
                 <p>
-                The server acted as a proxy and didn't receive a timely response from the upstream
-                server.
+                    The server acted as a proxy and didn't receive a timely response from the
+                    upstream server.
                 </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/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
-    name="viewport"
-    content="width=device-width, height=device-height, initial-scale=1.0"
-/>
+<meta 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

@@ -40,8 +40,9 @@
             <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>
 
@@ -66,10 +67,6 @@
         </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>
 

src/includes/nav_quick_links.html

@@ -1,17 +1,34 @@
-<div class="nav_quick_links">
+<div class="quick_links">
     <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
         <ion-icon
             name="git-branch-outline"
-            class="icon_gitea"
             alt="(Gitea) Website Source"
+            style="color: var(--accent-green)"
         ></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>
+        <ion-icon
+            name="logo-github"
+            alt="(Mirror) Website Source"
+            style="color: var(--accent-blue)"
+        ></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"
+            style="color: var(--accent-indigo)"
+        ></ion-icon>
+    </a>
+    <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
+        <ion-icon
+            name="alert-circle-outline"
+            alt="Report Issues"
+            style="color: var(--accent-magenta)"
+        ></ion-icon>
+    </a>
+    <a class="phantom"></a>
 </div>

src/index.html

@@ -5,24 +5,257 @@
         <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>
-                <p class="location_page">Home</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Home</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
                 <h1>Home</h1>
                 <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 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/partials/_a_common.scss

@@ -0,0 +1,126 @@
+@use "pane_main";
+@use "pane_nav";
+@use "pane_spacer";
+@use "a_quick_links";
+
+: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;
+
+    --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);
+    }
+}
+
+/*
+* {
+    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: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+}
+
+.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: sticky;
+    bottom: 0;
+}

src/partials/_a_quick_links.scss

@@ -0,0 +1,39 @@
+.quick_links {
+    --item-padding: 0.35rem;
+    --item-size: calc(1rem + var(--item-padding));
+
+    display: flex;
+    justify-content: center;
+
+    justify-content: center;
+    flex-wrap: wrap;
+
+    a {
+        height: var(--item-size);
+
+        display: grid;
+
+        background-color: var(--background-1);
+        border-radius: var(--border-radius-leaf);
+
+        margin: 0.5rem;
+        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);
+
+        /*
+        To colour the icons, apply inline styling.
+        */
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    }
+}

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)
-        var(--border-radius-large);
+    border-radius: var(--border-radius-leaf);
     text-align: center;
 
     .location_header {

src/partials/_nav_quick_links.scss

@@ -1,54 +1,36 @@
-.nav_quick_links {
-    --cols: 5;
-    --item-padding: 0.35rem;
-    --item-edge-length: 1.25rem;
-    --item-size: calc(
-        var(--item-edge-length) + calc(var(--item-padding) * 2)
-    );
+.pane_nav .quick_links {
+    --item-padding: 0.25rem;
+
+    justify-content: space-between;
 
     /*
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    margin-right: auto;
+    To colour the icons, apply inline styling.
     */
 
-    display: grid;
-    grid-template-columns:
-        var(--item-size) var(--item-size) var(--item-size)
-        var(--item-size) var(--item-size);
-    align-items: center;
-
-    gap: var(--spacing-menu-gap)
-        calc(
-            calc(100% - calc(var(--item-size) * var(--cols))) /
-                calc(var(--cols) - 1)
-        );
-
     a {
+        width: var(--item-size);
+        background-color: var(--background-2);
+
+        transition: var(--transition-fade);
+        margin: 0;
+    }
+
+    .phantom {
         width: var(--item-size);
         height: var(--item-size);
 
-        * {
-            width: var(--item-edge-length);
-            height: var(--item-edge-length);
-            padding: var(--item-padding);
+        /*
+        Fake hiding the element.
 
-            background-color: var(--background-2);
-            border-radius: var(--border-radius-small)
-                var(--border-radius-large);
+        Due to how flexboxes function, settings `display: none`
+        will result in the box just scaling as if the element
+        never existed.
+        */
+        background-color: inherit;
     }
 
-        .icon_gitea {
-            color: var(--accent-green);
-        }
-
-        .icon_github {
-            color: var(--accent-blue);
-        }
-
-        .icon_license {
-            color: var(--accent-purple);
-        }
+    a:hover {
+        transition: var(--transition-cut);
+        transform: var(--transform-scale-x) var(--transform-scale-y);
     }
 }

src/partials/_nav_title.scss

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

src/partials/_pane_error.scss

@@ -1,6 +1,10 @@
 .pane_error {
     width: max-content;
-    margin: auto; /* center object */
+
     text-align: center;
     background-color: var(--background-2);
+    margin: auto; /* center object */
+    padding: var(--spacing-horizontal);
+
+    border-radius: var(--border-radius-leaf);
 }

src/partials/_pane_main.scss

@@ -1,10 +1,10 @@
 .pane_main {
     flex: 1;
+
     text-align: center;
     background-color: var(--background-2);
     margin: var(--margin-pane);
-    padding: 0;
+    padding: var(--spacing-horizontal);
 
-    border-radius: var(--border-radius-small)
-        var(--border-radius-large);
+    border-radius: var(--border-radius-leaf);
 }

src/partials/_pane_nav.scss

@@ -4,14 +4,15 @@
 @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;
+
     display: grid;
+    grid-auto-flow: row;
+    grid-template-rows: auto auto auto 1fr max-content;
+
     color: var(--accent-pink);
 }

src/partials/_pane_spacer.scss

@@ -8,15 +8,15 @@
 
     .spacer_container {
         margin: 0;
+        padding: var(--spacing-horizontal);
         background-color: var(--background-2);
         height: calc(
             50vh - var(--margin-pane) - calc(
                     var(--spacing-menu-gap) / 2
-                )
+                ) - calc(var(--spacing-horizontal) * 2)
         );
         flex: 1;
-        border-radius: var(--border-radius-small)
-            var(--border-radius-large);
+        border-radius: var(--border-radius-leaf);
 
         /* Vertical Text Align */
         display: flex;

src/style.scss

@@ -1,83 +1 @@
-@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;
-}
+@use "partials/a_common";

src/templates/error.html

@@ -5,13 +5,14 @@
         <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>
-                <p class="location_page">Error Template</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Error Template</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -25,6 +26,8 @@
                 <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,13 +5,14 @@
         <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>
-                <p class="location_page">Main Template</p>
+                    <h4 class="location_header">You are here:</h4>
+                    <h5 class="location_page">Main Template</h5>
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
@@ -20,6 +21,8 @@
                 <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>