From 92ee5122ea8823cccae556df75363a7e3e480362 Mon Sep 17 00:00:00 2001
From: pancakes <trypancakes@tutanota.com>
Date: Mon, 18 Nov 2024 20:05:25 +1000
Subject: [PATCH] Fix navbar issues and styling

---
 src/data/links.json              |  1 +
 src/lib/components/Navbar.svelte | 29 ++++++++++++++++-------------
 src/routes/style.css             | 10 ++++++++++
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/data/links.json b/src/data/links.json
index 3aac843..1659dd1 100644
--- a/src/data/links.json
+++ b/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"
     },
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 618f076..bbe142a 100644
--- a/src/lib/components/Navbar.svelte
+++ b/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>
-                    <div class="icon-link">
-                        <img
-                            src={"/assets/icons/" + link.icon}
-                            alt={link.name}
-                        />
-                        <a href={link.href} target="_blank">
-                            {link.name}
-                        </a>
-                    </div>
-                </li>
+                {#if link.href && !link.mainOnly}
+                    <li>
+                        <div class="icon-link">
+                            <img
+                                class={link.iconInvert ? "invert" : ""}
+                                src={"/assets/icons/" + link.icon}
+                                alt={link.name}
+                            />
+                            <a href={link.href} target="_blank">
+                                {link.name}
+                            </a>
+                        </div>
+                    </li>
+                {/if}
             {/each}
         </ul>
     {/if}
diff --git a/src/routes/style.css b/src/routes/style.css
index c9af5ff..8d25eb2 100644
--- a/src/routes/style.css
+++ b/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;