Fix some CSS disasters related to the tailer, Split out some common

components.

src/acknowledgements.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_main">
+                <div class="main_body">
                     <p>There are currently no acknowledgements</p>
                     <p>In terms of security, hopefully that means I'm doing a good-ish job.</p>
                     <p>

src/errors/400.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>400</h1>
                     <h2>Bad Request!</h2>
                     <hr />

src/errors/401.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>401</h1>
                     <h2>Unauthorized!</h2>
                 </div>

src/errors/403.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>403</h1>
                     <h2>Forbidden!</h2>
                     <hr />

src/errors/404.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>404</h1>
                     <h2>Page not found!</h2>
                 </div>

src/errors/500.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>500</h1>
                     <h2>Internal Server Error!</h2>
                     <hr />

src/errors/501.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>501</h1>
                     <h2>Not Implemented!</h2>
                     <hr />

src/errors/502.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>502</h1>
                     <h2>Bad Gateway!</h2>
                     <hr />

src/errors/503.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>503</h1>
                     <h2>Service Unavailable!</h2>
                     <hr />

src/errors/504.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>504</h1>
                     <h2>Gateway Timeout!</h2>
                     <hr />

src/index.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_main">
+                <div class="main_body">
                     <h1>Home</h1>
                     <p>lorem ipsum idk what else there is in this latin phrase</p>
 

src/partials/_a_common.scss

@@ -1,7 +1,9 @@
+@use "a_footer";
+@use "a_quick_links";
+
 @use "pane_main";
 @use "pane_nav";
 @use "pane_spacer";
-@use "a_quick_links";
 
 :root {
     /*
@@ -109,32 +111,3 @@ ion-icon {
     flex-flow: row wrap;
     align-items: flex-start;
 }
-
-.tailer {
-    margin: auto;
-    padding: var(--spacing-horizontal);
-    width: min-content;
-
-    background-color: var(--background-2);
-    border-radius: var(--border-radius-leaf);
-
-    font-size: 1.65vh;
-    white-space: nowrap;
-
-    align-self: center;
-}
-
-.footer {
-    margin: 0;
-    padding: var(--spacing-horizontal);
-    width: min-content;
-
-    background-color: var(--background-2);
-    border-top-right-radius: var(--border-radius-large);
-
-    font-size: 1.65vh;
-    white-space: nowrap;
-
-    position: fixed;
-    bottom: 0;
-}

src/partials/_a_footer.scss

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

src/partials/_a_tailer.scss

@@ -0,0 +1,7 @@
+.tailer {
+    margin: var(--margin-pane) auto 0;
+    width: min-content;
+
+    font-size: 1.65vh;
+    white-space: nowrap;
+}

src/partials/_pane_error.scss

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

src/partials/_pane_main.scss

@@ -1,10 +1,19 @@
+@use "a_tailer";
+
 .pane_main {
     flex: 1;
+    flex-direction: column;
 
-    text-align: center;
-    background-color: var(--background-2);
     margin: var(--margin-pane);
+
+    justify-content: center;
+
+    .main_body,
+    .tailer {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
         padding: var(--spacing-horizontal);
 
-    border-radius: var(--border-radius-leaf);
+        text-align: center;
+    }
 }

src/templates/error.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
             <div class="pane_error">
+                <div class="error_body">
                     <h1>Error Code</h1>
                     <h2>Error Title</h2>
                     <hr />

src/templates/main.html

@@ -16,8 +16,8 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div style="flex: 1">
+            <div class="pane_main">
-                <div class="pane_main"></div>
+                <div class="main_body"></div>
                 <p class="tailer">Copyright (c) 2025 Olivia Brooks</p>
             </div>
             <div class="pane_spacer">