adjusted page width media query for devlog post buttons, and possibly some other things too

src/lib/header.svelte

@@ -1,20 +1,17 @@
-<!-- <div class="header-content transparent-header">
-    {@render headerContent()}
-</div> -->
-<div class="header-content coloured-header">
-    {@render headerContent()}
-</div>
-
 {#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="/projects/projectn5/devlog">Project N5</a>
     <a href="/">Blog</a>
     <a href="/about">About</a>
 {/snippet}
 
+<div class="header-content coloured-header">
+    {@render headerContent()}
+</div>
+
 <style>
     .header-content {
         box-sizing: border-box;
@@ -23,7 +20,7 @@
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        gap: 16px;
+        gap: 20px;
         align-items: center;
         padding: 0 24px;
     }
@@ -33,9 +30,9 @@
     }
 
 
-    .transparent-header {
+    /* .transparent-header {
         background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
-    }
+    } */
 
     .favicon {
         background: url("/favicon.webp");