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>

src/routes/+layout.svelte

@@ -16,6 +16,7 @@
 
 <style>
 
+    /* #region Fonts */
     /* Roboto Flex */
     @font-face {
         font-family: "Roboto Flex";
@@ -50,13 +51,16 @@
         src: url("/fonts/ibm-plex-mono/medium.ttf");
         font-weight: 500;
     }
+    /* #endregion */
 
     :global {
         :root {
             --color-text: #d0d0d0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
-            --color-highlight: #51B86B !important;
+            --color-highlight: #51B86B;
+            --color-header: color-mix(in srgb, var(--color-highlight) 80%, black);
+            --color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent);
 
             --color-background: #1b1b1b;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
@@ -74,6 +78,7 @@
             /* --font-title: 'Roboto Flex'; */
             --font-sans-serif: 'Roboto Flex', 'Lato', sans-serif;
             --font-mono: 'IBM Plex Mono', monospace;
+            --font-stylised: 'Space Mono', monospace;
 
             --page-width: 1200px;
             --content-width: 1000px;
@@ -314,7 +319,7 @@
             
             color: var(--color-text-dark);
             background-color: var(--color-highlight);
-            font-family: 'Space Mono', monospace;
+            font-family: var(--font-stylised);
             padding: 4px;
         }