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,11 +10,13 @@
         <a href="/">pancakes</a>
     </span>
     {#if $page.url.pathname !== "/"}
-        <ul>
+        <ul class="links">
             {#each links as link}
+                {#if link.href && !link.mainOnly}
                     <li>
                         <div class="icon-link">
                             <img
+                                class={link.iconInvert ? "invert" : ""}
                                 src={"/assets/icons/" + link.icon}
                                 alt={link.name}
                             />
@@ -23,6 +25,7 @@
                             </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;