From b8ed25ae65b5861afb2cbf7744c7ad3d4dec01e3 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Tue, 30 Dec 2025 19:03:57 +0000
Subject: [PATCH] fixed font link for subpages; reduced width of devlog posts;
 reduced height of banner; removed old banner

---
 src/lib/banner-title-alt.svelte               |   2 +-
 src/lib/banner-title.svelte                   |  81 ---------
 src/lib/banner2.svelte                        | 162 ++++++++++++++++++
 src/lib/content.svelte                        |  29 +++-
 src/lib/separator-line.svelte                 |   2 +-
 src/routes/+layout.svelte                     |  27 +--
 src/routes/+page.svelte                       |   2 +-
 src/routes/feeds/+page.svelte                 |   8 +-
 src/routes/projects/daisyfm/+page.svelte      |  12 +-
 .../devlog/[year]/[date]/+page.svelte         |  14 +-
 10 files changed, 220 insertions(+), 119 deletions(-)
 delete mode 100644 src/lib/banner-title.svelte
 create mode 100644 src/lib/banner2.svelte

diff --git a/src/lib/banner-title-alt.svelte b/src/lib/banner-title-alt.svelte
index 896767d..dc032c9 100644
--- a/src/lib/banner-title-alt.svelte
+++ b/src/lib/banner-title-alt.svelte
@@ -81,7 +81,7 @@
 
     .subcontainer {
         max-width: 1600px;
-        height: 600px;
+        height: 500px;
         display: flex;
         flex-direction: row;
         margin-left: auto;
diff --git a/src/lib/banner-title.svelte b/src/lib/banner-title.svelte
deleted file mode 100644
index 00c8c3c..0000000
--- a/src/lib/banner-title.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-    import SeparatorLine from "./separator-line.svelte";
-
-    let {
-        title,
-        subtitle = "",
-        banner = "",
-        bannerAlt = "",
-    }: {
-        title: string;
-        subtitle?: string;
-        banner?: string;
-        bannerAlt?: string;
-    } = $props();
-
-</script>
-
-<div class="container notched">
-    <img src="{banner}" alt="{bannerAlt}">
-    <h1 class="title">{title}</h1>
-</div>
-{#if subtitle}
-<h1 class="subtitle">» {subtitle}</h1>
-{/if}
-<SeparatorLine />
-
-<style>
-    .container {
-        position: relative;
-    }
-
-    .container img {
-        position: absolute;
-        left: 0;
-        top: 0;
-        object-fit: cover;
-    }
-
-    .container, .container img {
-        height: 500px;
-        width: 100%;
-    }
-
-    .title {
-        font-family: var(--font-title);
-        font-size: 2.4rem;
-        line-height: 2.7rem;
-        position: absolute;
-        width: 100%;
-        box-sizing: border-box;
-        height: fit-content;
-        padding: 12px 24px;
-        left: 0;
-        right: 0;
-        bottom: 0px;
-        font-weight: 900;
-        background-image: linear-gradient(to right, #1b1b1bFF, #1b1b1bBF);
-    }
-
-    .subtitle {
-        padding-left: 24px;
-        font-size: 2.2rem;
-        line-height: 2.5rem;
-    }
-    
-    @media screen and (max-width: 800px) {
-        .container, .container img {
-            height: 300px;
-        }
-        
-        .title {
-            font-size: 1.6rem;
-            line-height: 1.8rem;
-        }
-        
-        .subtitle {
-            font-size: 1.2rem;
-            line-height: 1.4rem;
-        }
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/banner2.svelte b/src/lib/banner2.svelte
new file mode 100644
index 0000000..4f5d582
--- /dev/null
+++ b/src/lib/banner2.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+    import SeparatorLine from "./separator-line.svelte";
+
+    let {
+        title,
+        date = "",
+        subtitle = "",
+        banner = "",
+        bannerAlt = "",
+        pixelated,
+    }: {
+        title: string;
+        date?: string;
+        subtitle?: string;
+        banner?: string;
+        bannerAlt?: string;
+        pixelated?: boolean;
+    } = $props();
+
+</script>
+
+<div class="container">
+	
+	<div class="subcontainer">
+		<div class="img-container">
+			{#if banner}
+				{#if pixelated}
+					<img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
+				{:else}
+					<img class="banner" src="{banner}" alt="{bannerAlt}">
+				{/if}
+			{/if}
+			<div class="text-container">
+				{@render titles({title, subtitle, date})}
+			</div>
+		</div>
+	</div>
+
+	<!-- {#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">
+			<div class="text-container">
+				{@render titles({title, subtitle, date})}
+			</div>
+		</div>
+	{/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}
+
+<SeparatorLine />
+
+<style>
+    .container {
+        width: 100%;
+        background-color: var(--color-background-highlight);
+    }
+
+    .subcontainer {
+        max-width: var(--page-width);
+        /* min-height: 250px;
+		max-height: 600px; */
+        display: flex;
+        flex-direction: row;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+	.banner {
+		/* position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0; */
+		max-height: 260px;
+	}
+
+    .img-container {
+        flex-grow: 1;
+        width: 50%;
+		position: relative;
+    }
+
+    .text-container {
+        margin-left: var(--margin-content-side);
+        margin-right: var(--margin-content-side);
+		/* position: absolute;
+		bottom: 0; */
+    }
+
+    .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 {
+            width: initial;
+        }
+        .img-container {
+            width: 100%;
+        }
+        .img-container img {
+            height: 200px;
+        }
+        .subtitle {
+            font-size: 1.0rem;
+            line-height: 1.1rem;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/content.svelte b/src/lib/content.svelte
index d8b209c..a5f1e74 100644
--- a/src/lib/content.svelte
+++ b/src/lib/content.svelte
@@ -1,16 +1,37 @@
-<div class="main-content">
-    <slot />
-</div>
+<script lang="ts">
+    let {
+        useContentWidth,
+    }: {
+        useContentWidth?: boolean;
+    } = $props();
+</script>
+
+{#if useContentWidth}
+    <div class="main-content content-width">
+        <slot />
+    </div>
+{:else}
+    <div class="main-content page-width">
+        <slot />
+    </div>
+{/if}
 
 <style>
     .main-content {
         width: 100%;
-        max-width: var(--page-width);
         box-sizing: border-box;
         margin: 0 auto;
         padding: 0 24px;
     }
 
+    .content-width {
+        max-width: var(--content-width);
+    }
+
+    .page-width {
+        max-width: var(--page-width);
+    }
+
     @media screen and (max-width: 800px) {
         .main-content {
             padding: 0 8px;
diff --git a/src/lib/separator-line.svelte b/src/lib/separator-line.svelte
index 48f9de1..02d0c17 100644
--- a/src/lib/separator-line.svelte
+++ b/src/lib/separator-line.svelte
@@ -2,7 +2,7 @@
     let {
         noMargin,
     }: {
-        noMargin: boolean;
+        noMargin?: boolean;
     } = $props();
 </script>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1c85e62..aeaca78 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,27 +19,27 @@
     /* Roboto Flex */
     @font-face {
         font-family: "Roboto Flex";
-        src: url("fonts/roboto-flex/flex.ttf");
+        src: url("/fonts/roboto-flex/flex.ttf");
     }
 
     /* Space Mono */
     @font-face {
         font-family: "Space Mono";
-        src: url("fonts/space-mono/regular.ttf");
+        src: url("/fonts/space-mono/regular.ttf");
     }
     @font-face {
         font-family: "Space Mono";
-        src: url("fonts/space-mono/italic.ttf");
+        src: url("/fonts/space-mono/italic.ttf");
         font-style: italic;
     }
     @font-face {
         font-family: "Space Mono";
-        src: url("fonts/space-mono/bold.ttf");
+        src: url("/fonts/space-mono/bold.ttf");
         font-weight: bold;
     }
     @font-face {
         font-family: "Space Mono";
-        src: url("fonts/space-mono/bolditalic.ttf");
+        src: url("/fonts/space-mono/bolditalic.ttf");
         font-style: italic;
         font-weight: bold;
     }
@@ -47,7 +47,7 @@
     /* IBM Plex Mono */
     @font-face {
         font-family: "IBM Plex Mono";
-        src: url("fonts/ibm-plex-mono/medium.ttf");
+        src: url("/fonts/ibm-plex-mono/medium.ttf");
         font-weight: 500;
     }
 
@@ -76,8 +76,10 @@
             --font-mono: 'IBM Plex Mono', monospace;
 
             --page-width: 1200px;
-
+            --content-width: 900px;
             --screen-width-mobile: 800px;
+
+            --margin-content-side: 24px;
         }
 
         html {
@@ -117,7 +119,8 @@
 
         p, span, li, pre, a {
             color: var(--color-text);
-            line-height: 1.8rem;
+            font-size: 1.1rem;
+            line-height: 1.6rem;
             font-weight: 400;
         }
         ul {
@@ -179,7 +182,7 @@
 
         h1, h2, h3, h4, h5, h6 {
             font-weight: 870;
-            font-family: var(--font-title);
+            font-family: var(--font-sans-serif);
             color: var(--color-highlight);
             margin-top: 12px;
             margin-bottom: 8px;
@@ -346,10 +349,8 @@
                 line-height: 1.4rem;
             }
 
-            p, span, li, pre, a {
-                font-size: 1.1rem;
-                line-height: 1.7rem;
-            }
+            /* p, span, li, pre, a {
+            } */
         }
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 344631e..4942bb5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -39,7 +39,7 @@
 
 <svelte:head>
     <title>denizk0461's website</title> 
-    <meta name="description" content="German developer posting about gamedev, programming, electronics projects, and sometimes music too.">
+    <meta name="description" content="I'm a developer posting about my gamedev, programming, electronics, and sometimes music projects!">
 </svelte:head>
 
 <Content>
diff --git a/src/routes/feeds/+page.svelte b/src/routes/feeds/+page.svelte
index a6ea56a..ea7fe09 100644
--- a/src/routes/feeds/+page.svelte
+++ b/src/routes/feeds/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/content.svelte";
     import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
 
@@ -15,12 +15,10 @@
     <title>Feeds | denizk0461</title> 
 </svelte:head>
 
-<BannerTitleAlt
+<Banner2
     title="Feeds"
-    banner="/feeds/banner.webp"
-    bannerAlt="Music files in a Windows 10 Explorer window"
     subtitle="XML feeds"
-	pixelated
+	banner="banner.webp"
 />
 
 <Content>    
diff --git a/src/routes/projects/daisyfm/+page.svelte b/src/routes/projects/daisyfm/+page.svelte
index 07a8736..af18386 100644
--- a/src/routes/projects/daisyfm/+page.svelte
+++ b/src/routes/projects/daisyfm/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import BannerTitle from "$lib/banner-title.svelte";
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
     import Content from "$lib/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
 </script>
@@ -8,12 +8,12 @@
     <title>Daisy FM Synth | denizk0461</title> 
 </svelte:head>
 
-<Content>
-    <BannerTitle
-        title="Daisy FM Synth"
-        banner="/projects/daisyfm/banner.webp"
-        bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
+<BannerTitleAlt
+    title="Daisy FM Synth"
+    banner="/projects/daisyfm/banner.webp"
+    bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
 
+<Content>
     <img src="/projects/daisyfm/fullview.webp" alt="Top view of the Daisy FM synth">
 
     <p>A friend showed me the <a href="https://electro-smith.com/products/daisy-seed">Daisy Seed</a>, an Arduino-compatible microcontroller made for developing audio equipment. With a little bit of motivation and absolutely no experience in either programming synthesisers or electronics in general, I quickly got my hands on one and started to toy around.</p>
diff --git a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
index ec44bb0..9c611bc 100644
--- a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
     import BannerTitleAlt from "$lib/banner-title-alt.svelte";
-    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import Content from "$lib/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
 
 	export let data;
@@ -19,12 +19,12 @@
     bannerAlt="{data.bannerAlt}"    
 />
 
-<ContentSidebar>
+<Content useContentWidth>
 
-    <TableOfContents slot="side-left" />
+    <TableOfContents disableStickyScrolling />
 
-    <div slot="main">
-		<svelte:component this={data.content} />
-	</div>
+    <!-- <div slot="main"> -->
+    <svelte:component this={data.content} />
+	<!-- </div> -->
 
-</ContentSidebar>
\ No newline at end of file
+</Content>
\ No newline at end of file