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");

src/routes/+layout.svelte

@@ -15,7 +15,6 @@
 </div>
 
 <style>
-
     /* #region Fonts */
     /* Roboto Flex */
     @font-face {

src/routes/+page.svelte

@@ -7,6 +7,7 @@
     import { quotes, type Quote } from "./quotes";
 
     import { posts, type DevlogPost } from "./projects/projectn5/devlog/posts";
+    import { type GalleryEntry } from "$lib/lists/gallery-entry.svelte";
 
     let meImg: string = $state("common/me/a.webp");
     let marqueeQuote: Quote = $state({
@@ -14,6 +15,34 @@
         content: "",
         source: "",
     });
+    let latestDevlogDate = posts.values().next().value?.date ?? "could not fetch";
+
+    const galleryEntries: GalleryEntry[] = [
+        {
+            title: "Project N5 – devlog",
+            subtitle: `my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: ${latestDevlogDate}</i>`,
+            fullWidth: true,
+            img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
+            imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
+            link: "projects/projectn5/devlog",
+        },
+        {
+            title: "Projects",
+            subtitle: "an overview of what I do and have done",
+            fullWidth: false,
+            img: "projects/project-mix.webp",
+            imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right",
+            link: "projects",
+        },
+        {
+            title: "Files",
+            subtitle: "find things I've put for download on my <a href='https://github.com/9001/copyparty'>copyparty</a> instance",
+            fullWidth: false,
+            img: "common/hypertext.webp",
+            imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
+            link: "//files.denizk0461.dev/",
+        },
+    ];
 
     onMount(() => {
         setPicture();
@@ -33,8 +62,6 @@
     let setMarqueeText = function() {
         marqueeQuote = quotes[getRandom(quotes.length)];
     };
-
-    let latestDevlogDate = posts.values().next().value?.date ?? "could not fetch";
 </script>
 
 <svelte:head>
@@ -47,32 +74,7 @@
 
     <div class="container">
         <div class="subcontainer">
-            <Gallery entries={[
+            <Gallery entries={galleryEntries}/>
-                {
-                    title: "Project N5 – devlog",
-                    subtitle: "my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: " + latestDevlogDate + "</i>",
-                    fullWidth: true,
-                    img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
-                    imgAlt: "Project N5 screenshot of Laura looking down at two cuboids",
-                    link: "projects/projectn5/devlog",
-                },
-                {
-                    title: "Projects",
-                    subtitle: "an overview of what I do and have done",
-                    fullWidth: false,
-                    img: "projects/project-mix.webp",
-                    imgAlt: "A collage of multiple projects: the Unity default third-person character and CJ from GTA San Andreas in the top left; purple protagonist from Project N5 holding a massive rocket launcher in the top right; two wizards in the bottom left; a breadboard with a microcontroller and input components in the bottom right",
-                    link: "projects",
-                },
-                {
-                    title: "Files",
-                    subtitle: "find things I've put for download on my <a href='https://github.com/9001/copyparty'>copyparty</a> instance",
-                    fullWidth: false,
-                    img: "common/hypertext.webp",
-                    imgAlt: "Screenshot of Hypertext Unity level. Crates are strewn across the floor, Waluigi is flying in front of the camera, and text such as 'COME AND TRY OUR ALL-NEW BLENDER' and 'omg! it's the brandenburg er tor!' is displayed",
-                    link: "//files.denizk0461.dev/",
-                },
-            ]}/>
         </div>
         <div class="subcontainer">
             <div class="quote-marquee-container">

src/routes/projects/projectn5/devlog/+page.svelte

@@ -175,7 +175,7 @@
         }
     }
 
-    @media screen and (max-width: 900px) {
+    @media screen and (max-width: 700px) {
         .post-supercontainer {
             width: 100% !important;
         }