fix menu alignment

src/lib/slug.js

@@ -0,0 +1,10 @@
+// this approach won't work if an attribute value contains ">"
+const tag = /<[^>]*?>/g
+const nonAlphaNum = /[^A-Za-z0-9\-]/g
+const space = /\s/g
+
+export default function slugify(text) {
+    return text.replace(tag, '')
+        .replace(space, '-')
+        .replace(nonAlphNum, '')
+}

src/routes/__layout.svelte

@@ -10,10 +10,11 @@
     }
 
     #nav-main {
-        max-width: 30rem;
+        max-width:  30rem;
         margin:  0 auto;
         display:  grid;
-        grid-template-columns:  1fr 1fr 1fr;
+        grid-template-columns:  repeat(3, minmax(6rem, 8rem));
+        justify-content: space-between;
     }
 
     #nav-main a {
@@ -22,7 +23,6 @@
         text-decoration: none;
         text-align: center;
         padding:  0.25rem 0;
-        max-width: 8rem;
     }
 
     #nav-main a:hover {