Fix navbar issues and styling

src/data/links.json

@@ -20,6 +20,7 @@
         "href": "https://github.com/pancakesmeow",
         "icon": "github-mark.png",
         "iconInvert": true,
+        "mainOnly": true,
         "name": "GitHub (inactive)",
         "username": "pancakesmeow"
     },

src/lib/components/Navbar.svelte

@@ -1,6 +1,6 @@
 <script>
-    import links from "../../data/links.json";
     import { page } from "$app/stores";
+    import links from "../../data/links.json";
 </script>
 
 <a href="#main-content" class="skip-to-main">Skip to main content</a>
@@ -10,19 +10,22 @@
         <a href="/">pancakes</a>
     </span>
     {#if $page.url.pathname !== "/"}
-        <ul>
+        <ul class="links">
             {#each links as link}
-                <li>
+                {#if link.href && !link.mainOnly}
-                    <div class="icon-link">
+                    <li>
-                        <img
+                        <div class="icon-link">
-                            src={"/assets/icons/" + link.icon}
+                            <img
-                            alt={link.name}
+                                class={link.iconInvert ? "invert" : ""}
-                        />
+                                src={"/assets/icons/" + link.icon}
-                        <a href={link.href} target="_blank">
+                                alt={link.name}
-                            {link.name}
+                            />
-                        </a>
+                            <a href={link.href} target="_blank">
-                    </div>
+                                {link.name}
-                </li>
+                            </a>
+                        </div>
+                    </li>
+                {/if}
             {/each}
         </ul>
     {/if}

src/routes/style.css

@@ -137,6 +137,16 @@ main:first-of-type {
     max-width: 768px;
 }
 
+nav {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 768px;
+}
+
+nav .links {
+    font-size: small;
+}
+
 h1 {
     border-bottom: 2px solid var(--accent-2);
     font-size: xx-large;