Add var for leaf border; Switch to Liberation Sans; Scale Quick Links.

src/partials/_nav_location.scss

@@ -2,8 +2,7 @@
     margin: 0;
     padding: var(--spacing-horizontal);
     background-color: var(--background-2);
-    border-radius: var(--border-radius-small)
+    border-radius: var(--border-radius-leaf);
-        var(--border-radius-large);
     text-align: center;
 
     .location_header {

src/partials/_nav_quick_links.scss

@@ -1,7 +1,7 @@
 .nav_quick_links {
     --cols: 5;
-    --item-padding: 0.35rem;
+    --item-padding: 0.3rem;
-    --item-edge-length: 1.25rem;
+    --item-edge-length: 1.15rem;
     --item-size: calc(
         var(--item-edge-length) + calc(var(--item-padding) * 2)
     );
@@ -32,8 +32,7 @@
             padding: var(--item-padding);
 
             background-color: var(--background-2);
-            border-radius: var(--border-radius-small)
+            border-radius: var(--border-radius-leaf);
-                var(--border-radius-large);
         }
     }
 }

src/partials/_nav_title.scss

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

src/partials/_pane_main.scss

@@ -5,6 +5,5 @@
     margin: var(--margin-pane);
     padding: 0;
 
-    border-radius: var(--border-radius-small)
+    border-radius: var(--border-radius-leaf);
-        var(--border-radius-large);
 }

src/partials/_pane_nav.scss

@@ -4,14 +4,15 @@
 @use "nav_quick_links";
 
 .pane_nav {
-    --spacing-horizontal: 0.75rem;
-    --transform-scale-x: scaleX(1.15);
-
     margin: var(--margin-pane);
     padding: 0;
     gap: var(--spacing-menu-gap);
     width: min-content;
     align-content: start;
+
     display: grid;
+    grid-auto-flow: row;
+    grid-template-rows: auto auto auto 1fr max-content;
+
     color: var(--accent-pink);
 }

src/partials/_pane_spacer.scss

@@ -15,8 +15,7 @@
                 )
         );
         flex: 1;
-        border-radius: var(--border-radius-small)
+        border-radius: var(--border-radius-leaf);
-            var(--border-radius-large);
 
         /* Vertical Text Align */
         display: flex;

src/style.scss

@@ -4,6 +4,13 @@
 
 @use "partials/pane_error";
 
+/*
+@font-face {
+    font-family: Syncopate;
+    src: url(syncopate.woff);
+}
+*/
+
 :root {
     /*
     0: Base of an element. Example: the viewport class.
@@ -44,18 +51,29 @@
     --white-2: #e5e5e5ff;
     --white-3: #f5f5f5ff;
 
-    --font-size-generic: 1.65vh;
+    --font-size-generic: 1.85vh;
-    --font-family-generic: Arial, Sans-Serif, Helvetica;
+    --font-family-generic: "Liberation Sans", Arial, Sans-Serif;
+
+    --border-radius-small: calc(var(--border-radius-large) / 2);
+    --border-radius-large: 1rem;
+    --border-radius-leaf: var(--border-radius-small)
+        var(--border-radius-large);
+
+    --margin-pane: 1.5rem;
+
+    --spacing-horizontal: 0.75rem;
+    --spacing-menu-gap: 1rem;
 
     --transition-fade: 0.4s ease-out;
     --transition-cut: none;
 
-    --border-radius-large: 1rem;
+    --transform-scale-x: scaleX(1.15);
-    --border-radius-small: calc(var(--border-radius-large) / 2);
 
-    --margin-pane: 1.5rem;
+    body {
-
+        background-color: var(--background-0);
-    --spacing-menu-gap: 1rem;
+        margin: 0;
+        color: var(--white-3);
+    }
 }
 
 /*
@@ -79,11 +97,20 @@ ion-icon {
 
 .viewport {
     /* Adds a margin otherwise for some reason. */
-    margin: 0;
+    margin: inherit;
 
-    background-color: var(--background-0);
-    color: var(--white-3);
     display: flex;
     flex-flow: row wrap;
     align-items: flex-start;
 }
+
+.footer {
+    margin: 0;
+    padding: var(--spacing-horizontal);
+
+    background-color: var(--background-2);
+    border-top-right-radius: var(--border-radius-large);
+
+    position: absolute;
+    bottom: 0;
+}