Add new accent colours; Clean up Quick Links code.

src/includes/nav_quick_links.html

@@ -1,18 +1,33 @@
 <div class="nav_quick_links">
     <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site" title="Website Source">
-        <ion-icon name="git-branch-outline" class="icon_gitea" alt="(Gitea) Website Source">
-        </ion-icon>
+        <ion-icon
+            name="git-branch-outline"
+            alt="(Gitea) Website Source"
+            style="color: var(--accent-green)"
+        ></ion-icon>
     </a>
     <a href="https://github.com/Cutieguwu/cutieguwu-site" title="(Mirror) Website Source">
-        <ion-icon name="logo-github" class="icon_github" alt="(Mirror) Website Source"></ion-icon>
+        <ion-icon
+            name="logo-github"
+            alt="(Mirror) Website Source"
+            style="color: var(--accent-blue)"
+        ></ion-icon>
     </a>
     <a
         href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/src/branch/main/LICENSE"
         title="MIT License"
     >
-        <ion-icon name="book-outline" class="icon_license" alt="MIT License"></ion-icon>
+        <ion-icon
+            name="book-outline"
+            alt="MIT License"
+            style="color: var(--accent-indigo)"
+        ></ion-icon>
     </a>
     <a href="https://gitea.cutieguwu.ca/Cutieguwu/cutieguwu-site/issues" title="Report Issues">
-        <ion-icon name="alert-circle-outline" class="icon_issues" alt="Report Issues"></ion-icon>
+        <ion-icon
+            name="alert-circle-outline"
+            alt="Report Issues"
+            style="color: var(--accent-magenta)"
+        ></ion-icon>
     </a>
 </div>

src/partials/_nav_quick_links.scss

@@ -6,13 +6,6 @@
         var(--item-edge-length) + calc(var(--item-padding) * 2)
     );
 
-    /*
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    margin-right: auto;
-    */
-
     display: grid;
     grid-template-columns:
         var(--item-size) var(--item-size) var(--item-size)
@@ -29,7 +22,11 @@
         width: var(--item-size);
         height: var(--item-size);
 
-        * {
+        ion-icon {
+            /*
+            To colour the icons, apply inline styling.
+            */
+
             width: var(--item-edge-length);
             height: var(--item-edge-length);
             padding: var(--item-padding);
@@ -38,21 +35,5 @@
             border-radius: var(--border-radius-small)
                 var(--border-radius-large);
         }
-
-        .icon_gitea {
-            color: var(--accent-green);
-        }
-
-        .icon_github {
-            color: var(--accent-blue);
-        }
-
-        .icon_license {
-            color: var(--accent-purple);
-        }
-
-        .icon_issues {
-            color: var(--accent-pink);
-        }
     }
 }

src/style.scss

@@ -16,10 +16,16 @@
     */
     font-size: var(--font-size-generic);
 
-    --accent-green: #cfeb9eff;
+    --accent-red: #cb4c4cff;
+    --accent-orange: #e18142ff;
+    --accent-yellow: #e4d281ff;
+    --accent-green: #c5e689ff;
+    --accent-cyan: #a7edefff;
+    --accent-blue: #5f62e2ff;
+    --accent-indigo: #874ac0ff;
+    --accent-purple: #a355d3ff;
+    --accent-magenta: #df67dfff;
     --accent-pink: #ff9f9fff;
-    --accent-blue: #868ab7ff;
-    --accent-purple: #aa7ab7ff;
 
     --background-0: #130b21ff;
     --background-1: #170d28ff;