frontend redesign

app/src/lib/navbar_link.svelte

@@ -1,10 +1,16 @@
 <script>
   import { color, click } from "$lib/util.js";
+  import { page } from "$app/stores";
+
   export let link;
+
+  function is_active() {
+    return $page.url.pathname == link;
+  }
 </script>
 
 <a
-  style="text-decoration-color: var(--{color()})"
+  style="text-decoration-color: var(--{color()}); {is_active() ? `color: var(--${color()})` : ''}"
   data-sveltekit-preload-data
   on:click={click}
   href={link}
@@ -14,15 +20,8 @@
 
 <style>
   a {
-    font-weight: 700;
-    font-size: 20px;
-    text-decoration: none;
-    color: white;
-    cursor: pointer;
-  }
-
-  a:hover {
-    text-decoration: underline;
-    text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+    font-weight: 900;
+    font-size: var(--size-4);
+    color: var(--white-1);
   }
 </style>