Fix some glitches with being able to select links that weren't a

dropdown.

CODE_OF_CONDUCT.adoc

@@ -0,0 +1,128 @@
+
+= Contributor Covenant Code of Conduct
+
+== Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+== Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+== Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+== Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+== Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+mailto:olivia.a.brooks77@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+== Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+=== 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+=== 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+=== 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+=== 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+== Attribution
+
+This Code of Conduct is adapted from the
+link:https://www.contributor-covenant.org/[Contributor Covenant], version 2.1,
+available at
+link:https://www.contributor-covenant.org/version/2/1/code_of_conduct/[https://www.contributor-covenant.org/version/2/1/code_of_conduct/].
+
+Community Impact Guidelines were inspired by
+link:https://github.com/mozilla/inclusion[Mozilla's code of conduct enforcement ladder].
+
+For answers to common questions about this code of conduct, see the FAQ at
+link:https://www.contributor-covenant.org/faq/[https://www.contributor-covenant.org/faq/]. Translations are available at
+link:https://www.contributor-covenant.org/translations/[https://www.contributor-covenant.org/translations/].

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+mailto:olivia.a.brooks77@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the
+[Contributor Covenant](https://www.contributor-covenant.org/), version 2.1,
+available at
+<https://www.contributor-covenant.org/version/2/1/code_of_conduct/>.
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/inclusion).
+
+For answers to common questions about this code of conduct, see the FAQ at
+<https://www.contributor-covenant.org/faq/>. Translations are available at
+<https://www.contributor-covenant.org/translations/>.

README.md

@@ -0,0 +1,10 @@
+# Cutieguwu Site
+
+![Transware](https://pride-badges.pony.workers.dev/static/v1?label=Transware&labelColor=%23555&stripeWidth=6&stripeColors=5BCEFA%2CF5A9B8%2CFFFFFF%2CF5A9B8%2C5BCEFA)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md)
+
+## Prelude
+
+The Cutieguwu website.
+
+With distinctly no JavaScript written by me.

SECURITY.md

@@ -0,0 +1,9 @@
+# Security Policy
+
+## Versioning
+
+I follow the [Semantic Versioning (Semver) 2.0 scheme](https://semver.org/).
+
+## Reporting a Vulnerability
+
+Please see the website's [security.txt](./src/.well-known/security.txt).

balloon.py

@@ -3,15 +3,17 @@ 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
 
 from typing import TYPE_CHECKING
 if TYPE_CHECKING:
     from _typeshed import StrPath
 
-WORK_DIR: StrPath = os.getcwd()
+WORK_DIR: StrPath = os.getcwd() + '/'
 
 @dataclass
 class Tag:
@@ -98,10 +100,38 @@ class HTML:
 
 
 def main() -> None:
-    with open(str(WORK_DIR) + '/src/index.html', 'rt') as f:
+    # If:
+    #   Incorrect number of arguments
+    #   Long help flag
+    #   Short help flag
+    if len(sys.argv) != 2 or (
+        sys.argv[0] == '--help'
+        or sys.argv[0] == '-h'
+    ):
+        help()
+        return
+
+    file_name = sys.argv[1].removeprefix('src/')
+
+    with open(str(WORK_DIR) + 'src/' + file_name, 'rt') as f:
         html_src = HTML(f.read())
-    with open(str(WORK_DIR) + '/target/index.html', 'w') as f:
+
+    try:
+        os.makedirs(str(WORK_DIR) + 'target/' + os.path.dirname(file_name))
+    except FileExistsError:
+        pass
+
+    with open(str(WORK_DIR) + 'target/' + file_name, 'w') as f:
         f.write(html_src.write())
 
+def help() -> None:
+    print('Usage: python balloon.py [OPTIONS] <SOURCE>')
+    print()
+    print('Note: balloon implicitly assumes that <SOURCE> is in src/, and should inflate into target/')
+    print()
+    print()
+    print('Options:')
+    print('-h, --help       Print help')
+
 if __name__ == '__main__':
     main()

build.sh

@@ -0,0 +1,72 @@
+#! /usr/bin/bash
+#
+# I'm new to bash scripting, so give me a break.
+# I know that this is probably crap, but it's cheap, dirty, and does the job.
+
+python=~/.pyenv/versions/3.12.9/bin/python
+green='\e[32m'
+cyan='\e[36m'
+
+# The "a" is just to make this work if no characters are present in $@
+args=$@
+args+=('a')
+
+if [ $(expr length "$args") -gt 1 ]
+then
+    args=$@
+else
+    args='inflate style copy'
+fi
+
+for x in $args
+do
+    if [ "$x" == 'inflate' ]
+    then
+        echo -e "$green"Inflating...
+
+        files=(`ls src/*.html`)
+        files+=(`ls src/errors/*.html`)
+
+        for html in "${files[@]}"
+        do
+            echo -e "  $cyan$html -> target/"
+
+            eval $python 'balloon.py' $html
+        done
+
+    elif [ "$x" == 'style' ]
+    then
+        echo -e "$green"Styling...
+
+        sass src/style.scss target/style.css
+
+        echo -e "$cyan"'  src/style.scss -> target/style.css'
+
+    elif [ "$x" == 'copy' ]
+    then
+        echo -e "$green"Copying...
+
+        files=(
+            '.well-known/security.txt'
+            'img'
+            'robots.txt'
+        )
+
+        for item in "${files[@]}"
+        do
+            echo -e "$cyan  src/$item -> target/$item"
+
+            cp -R src/$item target/$item
+        done
+    else
+        echo -e "$green"Usage:"$cyan" build.sh [OPTIONS] [COMMAND]
+        echo
+        echo -e "$green"Options:"$cyan"
+        echo '  -h, --help          Print help'
+        echo
+        echo -e "$green"Commands:"$cyan"
+        echo '  inflate             Inflate the HTML source'
+        echo '  style               Compile SCSS to CSS'
+        echo '  copy                Copy assets to target'
+    fi
+done

src/acknowledgements.html

@@ -6,8 +6,16 @@
         <include src="includes/meta.html" />
     </head>
     <body class="viewport">
-        <include src="includes/nav.html" />
+        <nav class="pane_nav">
-        <div class="main_pane">
+            <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>
+            </div>
+            <include src="includes/nav_quick_links.html" />
+        </nav>
+        <div class="pane_main">
             <p>There are currently no acknowledgements</p>
             <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
             <p>
@@ -15,6 +23,10 @@
                 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>
         <include src="includes/scripts.html" />
     </body>
 </html>

src/balloon.py

@@ -1,107 +0,0 @@
-from __future__ import annotations
-
-from dataclasses import dataclass
-from types import NoneType
-from typing import Optional
-from result import Result, Ok, Err
-from icecream import ic
-import os
-
-from typing import TYPE_CHECKING
-if TYPE_CHECKING:
-    from _typeshed import StrPath
-
-WORK_DIR: StrPath = os.getcwd()
-
-@dataclass
-class Tag:
-    value: str
-    trail: Optional[str]
-
-    def __post_init__(self) -> None:
-        self.trail = self.trail if (self.trail is not None) and (self.trail.strip() != '') else None
-
-    # Returns the type of tag.
-    def type(self) -> str:
-        type = str()
-
-        for c in self.value:
-            if c.isspace():
-                break
-
-            type += c
-
-        return type
-
-    def get_param(self, param: str) -> Optional[str]:
-        pos = self.value.find(param) + param.__len__() + len('="')
-
-        if pos == -1:
-            return None
-
-        param_value = str()
-
-        for idx in range(pos, (self.value.__len__() - param.__len__())):
-            param_value += self.value[idx]
-
-        return param_value
-
-    def write(self) -> str:
-        return f'<{self.value}>{self.trail if self.trail != None else ''}'
-
-@dataclass
-class HTML:
-    value: str
-
-    # Returns all tags in order in the html file.
-    def tags(self) -> list[Tag]:
-        tag = str()
-        trail: Optional[str] = str()
-        tags = list()
-        record = False
-
-        for c in self.value:
-            if c == '<' and tag != '':
-                tags.append(Tag(tag, trail))
-                tag = str()
-                trail = str()
-
-            if c == '<' or c == '>':
-                record = not record # why can't I have ! operator...
-            elif record == True:
-                tag += c
-            else:
-                trail += c
-
-        tags.append(Tag(tag, trail))
-        return tags
-
-    def inflate(self) -> Result[str, str]:
-        file = str()
-
-        for tag in self.tags():
-            if tag.type() == 'include':
-                chunk = tag.get_param('src')
-                if isinstance(chunk, NoneType):
-                    return Err('FileNotFoundError')
-
-                html = HTML(open(str(WORK_DIR) + '/src/' + chunk, 'rt').read())
-                file += html.inflate().expect('FileNotFoundError')
-            else:
-                file += tag.write()
-
-        return Ok(file)
-
-    # Convert the HTML obj into a str to write to file.
-    def write(self) -> str:
-        return self.inflate().unwrap()
-
-
-def main() -> None:
-    with open(str(WORK_DIR) + '/src/index.html', 'rt') as f:
-        html_src = HTML(f.read())
-    with open(str(WORK_DIR) + '/target/index.html', 'w') as f:
-        f.write(html_src.write())
-
-if __name__ == '__main__':
-    main()

src/errors/400.html

@@ -1,72 +1,19 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>400 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">400</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
         <div class="error_pane">
             <h1>400</h1>
@@ -77,10 +24,10 @@
                 or deception.
             </p>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/401.html

@@ -1,81 +1,28 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>401 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">401</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <h1>401</h1>
             <h2>Unauthorized!</h2>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/403.html

@@ -1,83 +1,30 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>403 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">403</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <h1>403</h1>
             <h2>Forbidden!</h2>
             <hr />
             <p>The server is refusing to act upon your request.</p>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/404.html

@@ -1,81 +1,28 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>404 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">404</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <h1>404</h1>
             <h2>Page not found!</h2>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/500.html

@@ -1,83 +1,30 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>500 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">500</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <h1>500</h1>
             <h2>Internal Server Error!</h2>
             <hr />
             <p>The server has no clue WTF happened here.</p>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/501.html

@@ -1,83 +1,30 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>501 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">501</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <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>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/502.html

@@ -1,83 +1,30 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>502 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">502</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <h1>502</h1>
             <h2>Bad Gateway!</h2>
             <hr />
             <p>This service may be offline.</p>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/503.html

@@ -1,83 +1,30 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
-
         <title>503 | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">503</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <h1>503</h1>
             <h2>Service Unavailable!</h2>
             <hr />
             <p>The server may be overloaded or down for maintenance.</p>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/errors/504.html

@@ -1,74 +1,21 @@
 <!doctype html>
+
 <html lang="en-ca">
     <head>
-        <meta charset="utf-8" />
+        <title>Error Template | Cutieguwu</title>
-
+        <include src="includes/meta.html" />
-        <title>504 | Cutieguwu</title>
-
-        <link rel="icon" type="image/x-icon" href="../img/test-favicon.jpg" />
-        <link rel="stylesheet" type="text/css" href="../style.css" />
-
-        <meta name="description" content="Cutieguwu's Official website" />
-        <meta
-            name="viewport"
-            content="width=device-width, height=device-height, initial-scale=1.0"
-        />
     </head>
     <body class="viewport">
-        <nav class="nav_pane">
+        <nav class="pane_nav">
-            <h2 class="nav_logo">Cutieguwu</h2>
+            <include src="includes/nav_logo.html" />
-
+            <include src="includes/nav_menu.html" />
-            <ul class="nav_menu">
+            <div class="location">
-                <li class="nav_body"><a class="nav_title" href="">Home</a></li>
+                <p class="location_header">You are here:</p>
-                <li class="nav_body">
+                <p class="location_page">Error Template</p>
-                    <a class="nav_title" href="#">About</a>
+            </div>
-                </li>
+            <include src="includes/nav_quick_links.html" />
-                <li class="dropdown">
-                    <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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <p class="nav_title">Links</p>
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://gitea.cutieguwu.ca">Gitea</a>
-                        <a class="nav_title" href="https://jellyfin.cutieguwu.ca">Jellyfin</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>
-                <li class="dropdown">
-                    <div class="dropdown_header nav_body">
-                        <a class="nav_title" href="https://pronouns.page/@Cutieguwu"
-                            >Pronoun Pages</a
-                        >
-                        <ion-icon name="chevron-forward-outline"></ion-icon>
-                    </div>
-                    <div class="dropdown_body">
-                        <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
-                        <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
-                    </div>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Other 2</a>
-                </li>
-                <li class="nav_body">
-                    <a class="nav_title" href="#">Super long titled</a>
-                </li>
-            </ul>
         </nav>
-        <div class="error_pane">
+        <div class="pane_error">
             <h1>504</h1>
             <h2>Gateway Timeout!</h2>
             <hr />
@@ -77,10 +24,10 @@
                 server.
             </p>
         </div>
-        <script
+        <div class="pane_spacer">
-            type="module"
+            <div class="spacer_container"><p>#AD</p></div>
-            src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+            <div class="spacer_container"><p>#AD</p></div>
-        ></script>
+        </div>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+        <include src="includes/scripts.html" />
     </body>
 </html>

src/includes/nav_menu.html

@@ -1,9 +1,11 @@
 <ul class="nav_menu">
     <!-- Home -->
-    <li class="nav_body"><a class="nav_title" href="#">Home</a></li>
+    <li class="nav_body">
+        <a class="nav_title" href="index.html">Home</a>
+    </li>
 
     <!-- Minecraft -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title" href="#">Minecraft</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -20,11 +22,11 @@
     <li class="nav_body"><a class="nav_title" href="#">About</a></li>
 
     <!-- Pronoun Pages -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
-        <div class="dropdown_header nav_body">
+        <a class="dropdown_header nav_body" href="https://pronouns.page/@Cutieguwu">
-            <a class="nav_title" href="https://pronouns.page/@Cutieguwu">Pronoun Pages</a>
+            <p class="nav_title">Pronoun Pages</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
-        </div>
+        </a>
         <div class="dropdown_body">
             <a class="nav_title" href="https://en.pronouns.page/@Cutieguwu">English</a>
             <a class="nav_title" href="https://pronoms.fr/@Cutieguwu">French</a>
@@ -32,7 +34,7 @@
     </li>
 
     <!-- External Links -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">External Links</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -46,7 +48,7 @@
     <hr />
 
     <!-- Public Services -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">Public Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -57,7 +59,7 @@
     </li>
 
     <!-- Services -->
-    <li class="dropdown">
+    <li class="nav_dropdown">
         <div class="dropdown_header nav_body">
             <p class="nav_title">Services</p>
             <ion-icon name="chevron-forward-outline"></ion-icon>
@@ -75,4 +77,5 @@
 
     <!-- Website Disclosure -->
     <li class="nav_body"><a class="nav_title" href="#">Website Disclosure</a></li>
+    <li class="nav_body"><a class="nav_title" href="acknowledgements.html">Acknowledgements</a></li>
 </ul>

src/partials/_nav_dropdown.scss

@@ -0,0 +1,39 @@
+.nav_dropdown {
+    .dropdown_header {
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        align-items: center;
+
+        ion-icon {
+            /*
+            This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
+            */
+            margin-right: 0.5rem;
+
+            align-self: center;
+            transition-duration: 0.25s;
+        }
+    }
+
+    .dropdown_body {
+        display: none;
+        border-bottom-left-radius: var(--border-radius-small);
+        border-bottom-right-radius: var(--border-radius-small);
+        background-color: var(--background-1);
+    }
+}
+
+.nav_dropdown:hover {
+    .dropdown_header {
+        transform: var(--transform-scale-x);
+
+        ion-icon {
+            rotate: 90deg;
+            transition-duration: 0.25s;
+        }
+    }
+
+    .dropdown_body {
+        display: grid;
+    }
+}

src/partials/_nav_menu.scss

@@ -1,3 +1,6 @@
+@use "nav_dropdown";
+@use "nav_title";
+
 .nav_menu {
     /*
     Remove default padding and style applied to ul for bullets.
@@ -15,85 +18,26 @@
         border-color: var(--accent-pink);
         margin: 0 var(--spacing-horizontal);
     }
+}
 
-    .nav_body {
+.nav_body {
-        background-color: var(--background-2);
+    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
-        border-radius: var(--border-radius-small);
+    color: inherit;
-        transition: var(--transition-fade);
+    text-decoration: none;
-    }
 
-    .dropdown:hover .nav_body,
+    background-color: var(--background-2);
-    .dropdown .nav_body:hover,
+    border-radius: var(--border-radius-small);
-    .nav_body:hover {
+    transition: var(--transition-fade);
-        transform: var(--transform-scale-x);
+}
+
+.nav_body:hover,
+.nav_dropdown:hover .nav_body {
+    transform: var(--transform-scale-x);
+    transition: var(--transition-cut);
+
+    .nav_title,
+    ion-icon {
+        color: var(--highlight-hover);
         transition: var(--transition-cut);
-
-        .nav_title,
-        ion-icon {
-            color: var(--highlight-hover);
-            transition: var(--transition-cut);
-        }
-    }
-
-    .dropdown {
-        .dropdown_header {
-            display: grid;
-            grid-template-columns: 1fr min-content;
-            align-items: center;
-
-            ion-icon {
-                /*
-                This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
-                */
-                margin-right: 0.5rem;
-
-                align-self: center;
-                transition-duration: 0.25s;
-            }
-        }
-
-        .dropdown_body {
-            display: none;
-            border-bottom-left-radius: var(--border-radius-small);
-            border-bottom-right-radius: var(--border-radius-small);
-            background-color: var(--background-1);
-        }
-    }
-
-    .dropdown:hover {
-        .dropdown_header {
-            transform: var(--transform-scale-x);
-
-            ion-icon {
-                rotate: 90deg;
-                transition-duration: 0.25s;
-            }
-        }
-
-        .dropdown_body {
-            display: grid;
-        }
-    }
-
-    .nav_body,
-    .dropdown .nav_body,
-    .dropdown .dropdown_body {
-        .nav_title {
-            /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
-            color: inherit;
-
-            text-decoration: none;
-            font-family: var(--font-family-generic);
-            font-weight: bold;
-            white-space: nowrap;
-            margin: 0 var(--spacing-horizontal);
-            transition: var(--transition-fade);
-            text-transform: uppercase;
-        }
-
-        .nav_title:hover {
-            color: var(--highlight-hover);
-            transition: var(--transition-cut);
-        }
     }
 }

src/partials/_nav_title.scss

@@ -0,0 +1,19 @@
+.nav_title {
+    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
+    color: inherit;
+    text-decoration: inherit;
+
+    font-family: var(--font-family-generic);
+    font-weight: bold;
+    white-space: nowrap;
+    margin: inherit;
+    padding: 0 var(--spacing-horizontal);
+    transition: var(--transition-fade);
+    text-transform: uppercase;
+    display: block;
+}
+
+.nav_title:hover {
+    color: var(--highlight-hover);
+    transition: var(--transition-cut);
+}

src/templates/error.html

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

src/templates/main.html

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