Complete #42, 41; Support text in Quick Links, Quick Links Cloud body.

src/includes/nav_quick_links.html

@@ -1,4 +1,4 @@
-<div class="nav_quick_links">
+<div class="quick_links">
     <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
         <ion-icon
             name="git-branch-outline"
@@ -30,4 +30,5 @@
             style="color: var(--accent-magenta)"
         ></ion-icon>
     </a>
+    <a class="phantom"></a>
 </div>

src/partials/_a_common.scss

@@ -1,6 +1,7 @@
 @use "pane_main";
 @use "pane_nav";
 @use "pane_spacer";
+@use "a_quick_links";
 
 :root {
     /*

src/partials/_a_quick_links.scss

@@ -0,0 +1,39 @@
+.quick_links {
+    --item-padding: 0.35rem;
+    --item-size: calc(1rem + var(--item-padding));
+
+    display: flex;
+    justify-content: center;
+
+    justify-content: center;
+    flex-wrap: wrap;
+
+    a {
+        height: var(--item-size);
+
+        display: grid;
+
+        background-color: var(--background-1);
+        border-radius: var(--border-radius-leaf);
+
+        margin: 0.5rem;
+        padding: var(--item-padding);
+        gap: var(--item-padding);
+
+        align-items: center;
+        justify-content: center;
+
+        grid-auto-flow: column;
+
+        text-decoration: none;
+        color: var(--white-1);
+
+        /*
+        To colour the icons, apply inline styling.
+        */
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    }
+}

src/partials/_nav_quick_links.scss

@@ -1,41 +1,32 @@
-.nav_quick_links {
+.pane_nav .quick_links {
-    --cols: 5;
+    --item-padding: 0.25rem;
-    --item-padding: 0.3rem;
-    --item-edge-length: 1.15rem;
-    --item-size: calc(
-        var(--item-edge-length) + calc(var(--item-padding) * 2)
-    );
 
-    display: grid;
+    justify-content: space-between;
-    grid-template-columns:
-        var(--item-size) var(--item-size) var(--item-size)
-        var(--item-size) var(--item-size);
-    align-items: center;
 
-    gap: var(--spacing-menu-gap)
+    /*
-        calc(
+    To colour the icons, apply inline styling.
-            calc(100% - calc(var(--item-size) * var(--cols))) /
+    */
-                calc(var(--cols) - 1)
-        );
 
     a {
         width: var(--item-size);
-        height: var(--item-size);
+        background-color: var(--background-2);
 
         transition: var(--transition-fade);
+        margin: 0;
+    }
 
-        ion-icon {
+    .phantom {
-            /*
+        width: var(--item-size);
-            To colour the icons, apply inline styling.
+        height: var(--item-size);
-            */
 
-            width: var(--item-edge-length);
+        /*
-            height: var(--item-edge-length);
+        Fake hiding the element.
-            padding: var(--item-padding);
 
-            background-color: var(--background-2);
+        Due to how flexboxes function, settings `display: none`
-            border-radius: var(--border-radius-leaf);
+        will result in the box just scaling as if the element
-        }
+        never existed.
+        */
+        background-color: inherit;
     }
 
     a:hover {