updated header

src/lib/header.svelte

@@ -1,37 +1,45 @@
-<div class="header-container">
-    <div class="header-content">
-        <a class="favicon" href="/">
-            <img class="favicon-image" src="/favicon.webp" alt="Favicon">
-        </a>
-        <div class="links wide-font">
-            <span>»</span>
-            <a href="/projects">Projects</a>
-            <span> // </span>
-            <a href="/about">About</a>
-            <span>«</span>
-        </div>
-    </div>
+<!-- <div class="header-content transparent-header">
+    {@render headerContent()}
+</div> -->
+<div class="header-content coloured-header">
+    {@render headerContent()}
 </div>
 
-<style>
-    .header-container {
-        margin: 0 0 ;
-        padding: 0;
-    }
+{#snippet headerContent()}
+    <a class="favicon" href="/">
+        <img class="favicon-image" src="/favicon.webp" alt="Favicon">
+    </a>
+    <a href="/projects">Projects</a>
+    <a href="/projects/projectn5/devlog">Devlog</a>
+    <a href="/">Blog</a>
+    <a href="/about">About</a>
+{/snippet}
 
+<style>
     .header-content {
+        box-sizing: border-box;
+        width: 100%;
+        height: 72px;
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
+        gap: 16px;
         align-items: center;
-        max-width: var(--page-width);
-        margin: 0 auto;
         padding: 0 24px;
     }
 
+    .coloured-header {
+        background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
+    }
+
+
+    .transparent-header {
+        background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
+    }
+
     .favicon {
-        margin: 8px 0;
         background: url("/favicon.webp");
+        color: black;
     }
 
     .favicon-image {
@@ -39,29 +47,10 @@
         max-height: 32px;
     }
 
-    .links {
-        margin-left: auto;
-        margin-right: 0;
-
-        padding: 12px 24px;
-        background-color: var(--color-background-highlight-hover);
-        clip-path: polygon(
-            12px 0%,
-            100% 0%,
-            calc(100% - 12px) 100%,
-            0% 100%,
-            12px 0%
-        );
-    }
-
-    a, span {
-        font-family: var(--font-title);
-        font-size: 1rem;
-        font-weight: 800;
-        color: var(--color-text);
-    }
-
     a {
+        font-family: var(--font-stylised);
+        font-size: 1rem;
+        font-weight: bold;
         text-decoration: none;
         transition: 0.2s ease-in-out color;
     }
@@ -75,6 +64,7 @@
     }
     /* mouse over link */
     a:hover {
-        color: var(--color-text-dark);
+        color: var(--color-highlight);
+        /* text-decoration: underline dashed 2px var(--color-highlight); */
     }
 </style>