Add blog to website.

src/partials/_a_chunk_list.scss

@@ -42,7 +42,7 @@
             .status {
                 align-self: center;
                 white-space: nowrap;
-                margin-left: var(--spacing-horizontal);
+                margin-left: calc(var(--spacing-horizontal) * 2);
 
                 text-decoration: none;
                 font-size: 1.17rem;

src/partials/_a_common.scss

@@ -1,5 +1,8 @@
+@use "a_chunk_list";
 @use "a_footer";
+@use "a_layouts";
 @use "a_quick_links";
+@use "a_pages";
 
 @use "pane_main";
 @use "pane_nav";
@@ -13,7 +16,6 @@
 
     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);
 

src/partials/_a_pages.scss

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

src/partials/_a_quick_links.scss

@@ -3,17 +3,15 @@
     --item-size: calc(1rem + var(--item-padding));
 
     display: flex;
-    justify-content: center;
-
-    justify-content: center;
     flex-wrap: wrap;
+    justify-content: center;
 
     a {
         height: var(--item-size);
 
         display: grid;
 
-        background-color: var(--background-1);
+        background-color: var(--background-3);
         border-radius: var(--border-radius-leaf);
 
         margin: 0.5rem;
@@ -34,6 +32,8 @@
         * {
             margin: 0;
             padding: 0;
+
+            font-size: var(--font-size-generic);
         }
     }
 }

src/partials/_a_tailer.scss

@@ -4,4 +4,10 @@
 
     font-size: 1.65vh;
     white-space: nowrap;
+
+    background-color: var(--background-2);
+    border-radius: var(--border-radius-leaf);
+    padding: var(--spacing-horizontal);
+
+    text-align: center;
 }

src/partials/_blog_recent_posts.scss

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

src/partials/_nav_quick_links.scss

@@ -15,6 +15,11 @@
         margin: 0;
     }
 
+    a:hover {
+        transition: var(--transition-cut);
+        transform: var(--transform-scale-x) var(--transform-scale-y);
+    }
+
     .phantom {
         width: var(--item-size);
         height: var(--item-size);
@@ -25,12 +30,32 @@
         Due to how flexboxes function, settings `display: none`
         will result in the box just scaling as if the element
         never existed.
+
+        phantom needs to sit beside a element in hierarchy, otherwise
+        phantom will inherit from a like this:
+
+        .pane_nav > .quick_links > a > .phantom
         */
         background-color: inherit;
     }
-
-    a:hover {
-        transition: var(--transition-cut);
-        transform: var(--transform-scale-x) var(--transform-scale-y);
-    }
+}
+
+.gitea {
+    color: var(--accent-green);
+}
+
+.github {
+    color: var(--accent-blue);
+}
+
+.license {
+    color: var(--accent-indigo);
+}
+
+.issue_tracker {
+    color: var(--accent-magenta);
+}
+
+.rss {
+    color: var(--accent-orange);
 }

src/partials/_pane_blog.scss

@@ -0,0 +1,52 @@
+@use "a_tailer";
+
+.pane_blog {
+    flex: 1;
+    flex-direction: column;
+
+    margin: var(--margin-pane);
+
+    justify-content: center;
+
+    .blog_body {
+        background-color: var(--background-2);
+        border-radius: var(--border-radius-leaf);
+        padding-top: var(--spacing-horizontal);
+
+        .header {
+            text-align: center;
+            padding: var(--spacing-horizontal);
+            width: min-content;
+
+            white-space: nowrap;
+
+            margin: 0 auto;
+
+            .title {
+                background-color: var(--background-1);
+                border-radius: var(--border-radius-leaf);
+                padding: var(--spacing-horizontal);
+            }
+
+            .date {
+                display: block;
+
+                font-size: 0.85rem;
+                font-weight: normal;
+                font-style: italic;
+                font-family: var(--font-family-generic);
+            }
+        }
+
+        .body {
+            text-align: start;
+
+            padding: 0 calc(var(--margin-pane) * 4)
+                calc(var(--margin-pane) * 4);
+
+            p {
+                color: var(--white-1);
+            }
+        }
+    }
+}

src/partials/_pane_main.scss

@@ -8,8 +8,7 @@
 
     justify-content: center;
 
-    .main_body,
-    .tailer {
+    .main_body {
         background-color: var(--background-2);
         border-radius: var(--border-radius-leaf);
         padding: var(--spacing-horizontal);

src/partials/_pane_spacer.scss

@@ -2,7 +2,7 @@
     margin: var(--margin-pane);
     padding: 0;
 
-    width: 10vw;
+    width: min-content;
 
     display: grid;
     grid-auto-flow: row;
@@ -22,11 +22,10 @@
                     var(--spacing-menu-gap) / 2
                 ) - calc(var(--spacing-horizontal) * 2)
         );
-        flex: 1;
         border-radius: var(--border-radius-leaf);
 
-        /* Vertical Text Align */
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;