some mobile layout enhancements

src/lib/banner-title-alt.svelte

@@ -1,186 +0,0 @@
-<script lang="ts">
-    let {
-        title,
-        date = "",
-        subtitle = "",
-        banner = "",
-        bannerAlt = "",
-        pixelated,
-        wide,
-    }: {
-        title: string;
-        date?: string;
-        subtitle?: string;
-        banner?: string;
-        bannerAlt?: string;
-        pixelated?: boolean;
-        wide?: boolean;
-    } = $props();
-
-</script>
-
-<div class="container">
-    {#if wide}
-    <div class="subcontainer">
-        <div class="img-container-wide">
-            {#if pixelated}
-                <img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
-            {:else}
-                <img src="{banner}" alt="{bannerAlt}">
-            {/if}
-            <div class="text-container-wide">
-                <div class="text-align-container-wide">
-                    {@render titles({title, subtitle, date})}
-                </div>
-            </div>
-        </div>
-    </div>
-    {:else}
-        {#if banner}
-            <div class="subcontainer">
-                <div class="img-container">
-                    {#if pixelated}
-                        <img class="pixelated-img" src="{banner}" alt="{bannerAlt}">
-                    {:else}
-                        <img src="{banner}" alt="{bannerAlt}">
-                    {/if}
-                </div>
-                <div class="text-container">
-                    {@render titles({title, subtitle, date})}
-                </div>
-            </div>
-        {:else}
-            <div class="subcontainer subcontainer-textonly">
-                <div class="text-container text-container-fullwidth">
-                    {@render titles({title, subtitle, date})}
-                </div>
-            </div>
-        {/if}
-    {/if}
-</div>
-
-{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
-<h1 class="title">{title}</h1>
-{#if subtitle}
-<p class="subtitle">[ {subtitle} ]</p>
-{/if}
-{#if date}
-<p class="date">» {date}</p>
-{/if}
-{/snippet}
-
-<hr>
-
-<style>
-    .container {
-        width: 100%;
-        background-color: var(--color-background-highlight);
-    }
-
-    .subcontainer {
-        max-width: 1600px;
-        height: 500px;
-        display: flex;
-        flex-direction: row;
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    .subcontainer-textonly {
-        height: fit-content !important;
-        padding-top: 48px;
-        padding-bottom: 48px;
-    }
-
-    .img-container {
-        flex-grow: 1;
-        width: 50%;
-    }
-
-    .img-container-wide {
-        width: 100%;
-        position: relative;
-    }
-
-    .text-align-container-wide {
-        margin: auto 24px;
-        height: fit-content;
-    }
-
-    .text-container-wide {
-        position: absolute;
-        display: flex;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        width: 50%;
-        background-color: #000000bb;
-    }
-
-    .text-container {
-        width: 48%;
-        margin: auto 24px;
-    }
-
-    .text-container-fullwidth {
-        width: 100% !important;
-    }
-
-    .container img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-    }
-
-    .title {
-        width: 100%;
-        box-sizing: border-box;
-        height: fit-content;
-        left: 0;
-        right: 0;
-        bottom: 0px;
-        /* font-style: italic; */
-    }
-
-    .date {
-        font-family: var(--font-title);
-        font-weight: 800;
-        font-size: 1.3rem;
-        margin-top: 0;
-        color: var(--color-highlight);
-    }
-
-    .subtitle {
-        font-style: italic;
-        font-family: var(--font-mono);
-        font-weight: 800;
-        font-size: 1.3rem;
-        margin-top: 0;
-    }
-
-    @media screen and (max-width: 800px) {
-        .subcontainer {
-            height: fit-content;
-            flex-direction: column;
-        }
-        .text-container-wide {
-            bottom: 0;
-            left: 0;
-            top: initial;
-            width: 100%;
-        }
-        .text-container {
-            width: initial;
-        }
-        .img-container {
-            width: 100%;
-        }
-        .img-container img {
-            height: 200px;
-        }
-        .subtitle {
-            font-size: 1.0rem;
-            line-height: 1.1rem;
-        }
-    }
-</style>

src/lib/banner2.svelte

@@ -84,4 +84,11 @@
         font-size: 1.0rem;
         margin: 0;
     }
+
+    @media screen and (max-width: 800px) {
+        .title-container {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+    }
 </style>

src/lib/viewport/footer.svelte

@@ -106,6 +106,7 @@
         .content-container {
             flex-direction: column;
             gap: 0;
+            padding-bottom: 32px;
         }
 
         .content-box {

src/lib/viewport/header.svelte

@@ -1,4 +1,4 @@
-{#snippet headerContent()}
+{#snippet headerLinks()}
     <a href="/">Home</a>
     <a href="/projects">Projects</a>
     <a href="/projects/projectn5/devlog">Project N5</a>
@@ -7,11 +7,13 @@
 {/snippet}
 
 <div class="header-content">
-    {@render headerContent()}
+    <div class="header-links">
+        {@render headerLinks()}
+    </div>
 </div>
 
 <style>
-    .header-content {
+    .header-links {
         box-sizing: border-box;
         width: 100%;
         max-width: var(--page-width);
@@ -26,7 +28,7 @@
     }
 
     a {
-        font-family: var(--font-stylised);
+        font-family: var(--font-);
         font-size: 1rem;
         font-weight: bold;
         text-decoration: none;
@@ -44,4 +46,14 @@
         color: var(--color-highlight);
         /* text-decoration: underline dashed 2px var(--color-highlight); */
     }
+
+    @media screen and (max-width: 500px) {
+        .header-links {
+            justify-content: center;
+        }
+
+        a {
+            font-size: 0.8rem;
+        }
+    }
 </style>

src/routes/feeds/+page.svelte

@@ -18,8 +18,7 @@
 <Content>
 	<Banner2
 		title="Feeds"
-		subtitle="XML feeds"
+		subtitle="XML feeds" />
-		banner="banner.webp" />
 
 	<p>This is a list of RSS feeds I maintain on this website. You can subscribe to them by adding the link of any feed to an RSS reader of your liking.</p>
 

src/routes/projects/projectn5/devlog/2025/0816.md

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import List, { type ListEntry } from "$lib/link-list.svelte";
+    import LinkList, { type LinkEntry } from "$lib/lists/link-list.svelte";
 
-    let builds: ListEntry[] = [
+    let builds: LinkEntry[] = [
         {
             text: "2023-10-07 (Protagonist #1)",
             link: "https://files.denizk0461.dev/projectn5/2023-10-07.zip",
@@ -37,7 +37,7 @@ The game, in its state from 2025-05-16 (before the reboot), is available to play
 
 I've also uploaded old builds of the game [here](https://files.denizk0461.dev/projectn5). You'll find the following builds, one for each protagonist:
 
-<List entries={builds} />
+<LinkList entries={builds} />
 
 The 2025-08-16 build has not seen work put into it after [2025-05-16](/projects/projectn5/devlog/2025/0523/), bar the build notice on the pause screen.