RWD; Update a bunch of stuff which I've forgotten what it is I've done.

src/about.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body"><p>This page has not yet been filled out. Sorry!</p></div>
+                <div class="body"><p>This page has not yet been filled out. Sorry!</p></div>
                 <include src="includes/tailer.html" />
             </div>
             <div class="pane_spacer">

src/acknowledgements.html

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

src/blog/index.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Blog</h1>
                         <p class="date">Last Edited: 03 August, 2025</p>

src/blog/posts/0_divergent_pathways.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_blog">
-                <div class="blog_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Divergent Pathways</h1>
                         <p class="date">Posted: 29 July, 2025</p>

src/disclosure.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Disclosure</h1>
                         <p class="date">Last Edited: 01 August, 2025</p>

src/errors/400.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>400</h1>
                     <h2>Bad Request!</h2>
                     <hr />

src/errors/401.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>401</h1>
                     <h2>Unauthorized!</h2>
                 </div>

src/errors/403.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>403</h1>
                     <h2>Forbidden!</h2>
                     <hr />

src/errors/404.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>404</h1>
                     <h2>Page not found!</h2>
                 </div>

src/errors/500.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>500</h1>
                     <h2>Internal Server Error!</h2>
                     <hr />

src/errors/501.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>501</h1>
                     <h2>Not Implemented!</h2>
                     <hr />

src/errors/502.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>502</h1>
                     <h2>Bad Gateway!</h2>
                     <hr />

src/errors/503.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>503</h1>
                     <h2>Service Unavailable!</h2>
                     <hr />

src/errors/504.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_error">
-                <div class="error_body">
+                <div class="body">
                     <h1>504</h1>
                     <h2>Gateway Timeout!</h2>
                     <hr />

src/index.html

@@ -17,7 +17,7 @@
                 <include src="includes/nav_quick_links.html" />
             </nav>
             <div class="pane_main">
-                <div class="main_body">
+                <div class="body">
                     <div class="header">
                         <h1 class="title">Home</h1>
                         <p class="date">Last Edited: 03 August, 2025</p>

src/partials/_a_chunk_list.scss

@@ -1,16 +1,22 @@
-.chunk_list,
+/*
-.pane_main .main_body .chunk_list {
+All specificities to do with Chunk Lists are a disaster.
-    display: flex;
+
-    flex-direction: column;
+Hopefully, I will attempt to clean up this steaming pile of shit so that I don't have to deal with conflicts (.main_body .body vs. .chunk .body in particular), but we'll see.
-    padding: 0;
+*/
-    text-align: left;
+
+.chunk_list {
+    display: grid;
+
+    width: 100%;
 
     .chunk + .chunk {
         margin-top: var(--spacing-horizontal);
     }
 
     .chunk {
-        .header {
+        width: inherit;
+
+        > .header {
             display: grid;
             grid-auto-flow: row;
             grid-template-columns: 1fr min-content;
@@ -24,10 +30,7 @@
 
             text-align: start;
 
-            /*width: calc(100% - calc(var(--spacing-horizontal) * 2));*/
+            width: inherit;
-            width: 100%;
-
-            margin: 0;
 
             .name,
             .subtitle,
@@ -35,10 +38,6 @@
                 margin: inherit;
             }
 
-            .name {
-                white-space: nowrap;
-            }
-
             .subtitle {
                 display: inline-block;
 
@@ -58,7 +57,7 @@
             }
         }
 
-        .body {
+        > .body {
             padding: 0 calc(var(--spacing-horizontal) * 2);
 
             ul {
@@ -71,3 +70,16 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .chunk_list .chunk {
+        > .header {
+            column-gap: var(--spacing-horizontal);
+        }
+
+        > .body {
+            /* Collapse the L/R padding to maximize usable space */
+            padding: 0;
+        }
+    }
+}

src/partials/_a_layouts.scss

@@ -1,10 +1,9 @@
 .layout_row {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-auto-flow: column;
-    justify-content: space-between;
+    gap: var(--spacing-horizontal);
 
     .item {
-        margin: var(--spacing-horizontal);
         padding: calc(var(--spacing-horizontal) * 2);
 
         background-color: var(--background-1);
@@ -15,3 +14,13 @@
         }
     }
 }
+
+.layout_row + .layout_row {
+    margin-top: var(--spacing-horizontal);
+}
+
+@media only screen and (max-width: 500px) {
+    .layout_row {
+        grid-auto-flow: row;
+    }
+}

src/partials/_blog_recent_posts.scss

@@ -3,5 +3,6 @@
 
     .recent_posts .chunk .header {
         background-color: var(--background-1);
+        white-space: nowrap;
     }
 }

src/partials/_nav_location.scss

@@ -12,6 +12,5 @@
 
     .location_page {
         margin: 0;
-        padding: 0;
     }
 }

src/partials/_nav_menu.scss

@@ -20,8 +20,10 @@
     }
 }
 
-.nav_body {
+.nav_item {
-    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
+    /*
+    Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element.
+    */
     color: inherit;
     text-decoration: none;
 
@@ -30,8 +32,8 @@
     transition: var(--transition-fade);
 }
 
-.nav_body:hover,
+.nav_item:hover,
-.nav_dropdown:hover .nav_body {
+.nav_dropdown:hover .nav_item {
     transform: var(--transform-scale-x);
     transition: var(--transition-cut);
 

src/partials/_nav_quick_links.scss

@@ -11,7 +11,6 @@
         background-color: var(--background-2);
 
         transition: var(--transition-fade);
-        margin: 0;
 
         ion-icon {
             width: var(--item-size);

src/partials/_nav_title.scss

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

src/partials/_page_disclosure.scss

@@ -1,4 +1,11 @@
 .website_security,
 .cookies {
-    max-width: 44%;
+    width: calc(50% - calc(var(--spacing-horizontal) * 2));
+}
+
+@media only screen and (max-width: 500px) {
+    .website_security,
+    .cookies {
+        width: 100%;
+    }
 }

src/partials/_pane_blog.scss

@@ -8,12 +8,12 @@
 
     justify-content: center;
 
-    .blog_body {
+    > .body {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
         padding-top: var(--spacing-horizontal);
 
-        .header {
+        > .header {
             text-align: center;
             padding: var(--spacing-horizontal);
             width: min-content;
@@ -38,11 +38,10 @@
             }
         }
 
-        .body {
+        > .body {
             text-align: start;
 
-            padding: 0 calc(var(--margin-pane) * 4)
+            padding: 0 var(--spacing-thicc) var(--spacing-thicc);
-                calc(var(--margin-pane) * 4);
 
             p {
                 color: var(--white-1);
@@ -50,3 +49,13 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_blog {
+        width: 100%;
+
+        .body > .body {
+            padding: var(--spacing-horizontal);
+        }
+    }
+}

src/partials/_pane_error.scss

@@ -5,7 +5,7 @@
 
     margin: auto; /* center object */
 
-    .error_body,
+    > .body,
     .tailer {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
@@ -14,3 +14,12 @@
         text-align: center;
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_error {
+        width: 100%;
+
+        margin-top: var(--margin-pane);
+        margin-bottom: var(--margin-pane);
+    }
+}

src/partials/_pane_main.scss

@@ -1,24 +1,17 @@
 @use "a_tailer";
 
 .pane_main {
-    flex: 1;
-    flex-direction: column;
-
     margin: var(--margin-pane);
 
-    justify-content: center;
+    > .body {
-
-    .main_body {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
         padding: var(--spacing-horizontal);
 
-        .header {
+        > .header {
             text-align: center;
             padding: var(--spacing-horizontal);
-            width: min-content;
+            width: max-content;
-
-            white-space: nowrap;
 
             margin: 0 auto;
 
@@ -38,7 +31,7 @@
             }
         }
 
-        .body {
+        > .body {
             text-align: start;
 
             p {
@@ -47,3 +40,9 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_main {
+        width: 100%;
+    }
+}

src/partials/_pane_nav.scss

@@ -5,20 +5,25 @@
 
 .pane_nav {
     margin: var(--margin-pane);
-    padding: 0;
 
     width: min-content;
+    height: min-content;
 
     display: grid;
     grid-auto-flow: row;
-    grid-template-rows: auto auto auto 1fr max-content;
+    grid-template-rows: repeat(4, min-content);
     gap: var(--spacing-menu-gap);
     align-content: start;
 
     position: sticky;
     top: var(--margin-pane);
-    bottom: var(--margin-pane);
+    left: var(--margin-pane);
-    left: 0;
 
     color: var(--accent-pink);
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_nav {
+        width: 75%;
+    }
+}

src/partials/_pane_spacer.scss

@@ -1,20 +1,18 @@
 .pane_spacer {
-    margin: 0;
+    margin: var(--margin-pane);
-    padding: var(--margin-pane);
 
     width: min-content;
-    height: 100vh;
+    height: calc(100vh - calc(var(--margin-pane) * 2));
 
     display: grid;
-    grid-auto-flow: row;
+    grid-auto-flow: row dense;
     gap: var(--spacing-menu-gap);
 
     position: sticky;
-    top: 0;
+    top: var(--margin-pane);
-    right: 0;
+    right: var(--margin-pane);
 
     .spacer_container {
-        margin: 0;
         padding: var(--spacing-horizontal);
         background-color: var(--background-2);
         height: 100%;
@@ -31,3 +29,9 @@
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    .pane_spacer {
+        width: 100%;
+    }
+}