Update nav design

web/src/routes/+layout.svelte

@@ -3,11 +3,15 @@
     import Logo from "./Logo.svelte";
 </script>
 
-<nav class="bg-secondary">
-    <h1 class="title"><Logo /></h1>
+<nav>
+    <h1 class="title"><Logo />Incremental Social</h1>
     <div class="flex-spacer" />
+    <a href="https://cinny.incremental.social">Matrix</a>
+    <a href="https://git.incremental.social">Code</a>
+    <div class="separator" />
     <DarkModeToggle />
-    <a href="https://auth.incremental.social" class="btn primary login" target="_blank">login/register</a>
+    <div class="separator" />
+    <a href="https://auth.incremental.social" class="btn primary">login/register</a>
 </nav>
 
 <div class="container">
@@ -20,16 +24,24 @@
         top: 0;
         z-index: 1;
         display: flex;
-        padding: 1em;
+        width: calc(1440px - 64px);
+        max-width: 95%;
+        height: 64px;
+        margin: auto;
         align-items: center;
+        background-color: var(--nord6);
+    }
+
+    :global(.dark nav) {
+        background-color: var(--nord-deep-dark) !important;
     }
 
     nav > * {
-        margin-left: 1em;
+        margin-left: 0.5em;
+        margin-right: 0.5em;
     }
 
     .title {
-        font-size: 400%;
         margin: 0;
     }
 
@@ -48,4 +60,10 @@
         flex-basis: 0;
         flex-grow: 1;
     }
+
+    .separator {
+        height: 50%;
+        width: 1px;
+        background-color: var(--nord9);
+    }
 </style>

web/src/routes/DarkModeToggle.svelte

@@ -18,7 +18,7 @@
 
 </script>
 
-<button on:click={toggle} class="info btn">
+<div on:click={toggle} on:keypress={toggle} role="button" tabindex="0">
 	<span class="material-symbols-outlined">
 		{#if dark}
 			light_mode
@@ -26,7 +26,18 @@
 			dark_mode
 		{/if}
 	</span>
-</button>
+</div>
+
+<style>
+    div:hover {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .material-symbols-outlined {
+        font-size: 18px;
+    }
+</style>
 
 <svelte:head>
 	{@html `