changed fonts; changed colour for project n5 devlogs to red; added page for next devlog with new banner

src/lib/banner-title-alt.svelte

@@ -22,11 +22,11 @@
         </div>
         <div class="text-container">
             <h1 class="title">{title}</h1>
-            {#if date}
-            <p class="date">{date}</p>
-            {/if}
             {#if subtitle}
-            <p class="subtitle">{subtitle}</p>
+            <p class="subtitle">[ {subtitle} ]</p>
+            {/if}
+            {#if date}
+            <p class="date">» {date}</p>
             {/if}
         </div>
     </div>
@@ -51,6 +51,7 @@
 
     .img-container {
         flex-grow: 1;
+        width: 50%;
     }
 
     .text-container {
@@ -76,10 +77,18 @@
     }
 
     .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-style: italic;
+        font-family: var(--font-mono);
+        font-weight: 800;
+        font-size: 1.3rem;
+        margin-top: 0;
     }
 </style>

src/lib/banner-title.svelte

@@ -51,7 +51,7 @@
         right: 0;
         bottom: 0px;
         font-weight: 900;
-        background-image: linear-gradient(to right, #00000088, #000000AA);
+        background-image: linear-gradient(to right, #1b1b1bFF, #1b1b1bBF);
     }
 
     .subtitle {

src/lib/content-sidebar.svelte

@@ -0,0 +1,21 @@
+<div class="content">
+    <div class="side">
+        <slot name="side" />
+    </div>
+    <div class="main">
+        <slot name="main" />
+    </div>
+    <div class="side"></div>
+</div>
+
+<style>
+    .content {
+        max-width: 2000px;
+        margin: 0 auto 228px;
+        display: flex;
+        flex-direction: row;
+    }
+    .side {
+        min-width: 400px;
+    }
+</style>

src/lib/lists/gallery-entry.svelte

@@ -75,6 +75,8 @@
     .entry p:nth-child(2) {
         font-size: 20px;
         margin-top: 12px;
+        font-family: var(--font-title);
+        font-size: 1.1rem;
         font-weight: 800;
         font-style: italic;
     }

src/lib/table-of-contents.svelte

@@ -88,6 +88,7 @@
         }
 
         .toc-level-0 a {
+            font-weight: 800;
             padding-left: 44px;
         }
         .toc-level-1 a {

src/routes/+layout.svelte

@@ -18,28 +18,58 @@
     @import url('https://fonts.upset.dev/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Michroma&family=Space+Grotesk:wght@300..700&display=swap');
 
     @font-face {
-        font-family: 'Monument';
+        font-family: 'Monument Extended';
+        font-weight: 00;
+        font-style: normal;
+        src: url('/fonts/ppmonument-extended/.woff');
+    }
+    @font-face {
+        font-family: 'Monument Extended';
+        font-weight: 100;
+        font-style: normal;
+        src: url('/fonts/ppmonument-extended/thin.woff');
+    }
+    @font-face {
+        font-family: 'Monument Extended';
+        font-weight: 200;
+        font-style: normal;
+        src: url('/fonts/ppmonument-extended/light.woff');
+    }
+    @font-face {
+        font-family: 'Monument Extended';
+        font-weight: 300;
+        font-style: normal;
+        src: url('/fonts/ppmonument-extended/book.woff');
+    }
+    @font-face {
+        font-family: 'Monument Extended';
+        font-weight: 400;
+        font-style: normal;
+        src: url('/fonts/ppmonument-extended/regular.woff');
+    }
+    @font-face {
+        font-family: 'Monument Extended';
         font-weight: 500;
         font-style: normal;
-        src: url('/fonts/ppmonument/regular.otf');
+        src: url('/fonts/ppmonument-extended/medium.woff');
     }
     @font-face {
-        font-family: 'Monument';
-        font-weight: 500;
-        font-style: italic;
-        src: url('/fonts/ppmonument/regularitalic.otf');
+        font-family: 'Monument Extended';
+        font-weight: 700;
+        font-style: normal;
+        src: url('/fonts/ppmonument-extended/bold.woff');
     }
     @font-face {
-        font-family: 'Monument';
+        font-family: 'Monument Extended';
+        font-weight: 800;
+        font-style: normal;
+        src: url('/fonts/ppmonument-extended/black.woff');
+    }
+    @font-face {
+        font-family: 'Monument Extended';
         font-weight: 900;
         font-style: normal;
-        src: url('/fonts/ppmonument/black.otf');
-    }
-    @font-face {
-        font-family: 'Monument';
-        font-weight: 900;
-        font-style: italic;
-        src: url('/fonts/ppmonument/blackitalic.otf');
+        src: url('/fonts/ppmonument-extended/heavy.woff');
     }
 
     :global {
@@ -62,7 +92,7 @@
             --color-link-visited: #ffd7f0;
             --color-link-hovered: #ffdad5;
 
-            --font-title: 'Monument';
+            --font-title: 'Monument Extended';
             --font-sans-serif: 'Manrope', 'Lato', sans-serif;
             --font-mono: 'IBM Plex Mono', monospace;
         }
@@ -98,7 +128,7 @@
         p, span, li, pre, a {
             color: var(--color-text);
             line-height: 1.7rem;
-            font-weight: 550;
+            font-weight: 500;
         }
 
         h1 {
@@ -119,7 +149,7 @@
         }
 
         h1, h2, h3, h4, h5, h6 {
-            font-weight: 500;
+            font-weight: 700;
             font-family: var(--font-title);
             color: var(--color-highlight);
             margin-top: 12px;

src/routes/projects/+page.svelte

@@ -24,7 +24,7 @@
 <BannerTitleAlt
     title="My Disordered Projects"
     banner="/projects/banner.webp"
-    subtitle="Here's a collection of my more noteworthy projects that can be found on the web in some way: projects in programming, 3D modelling, and music production."
+    subtitle="Things I have worked on"
 />
 
 <Content>
@@ -70,6 +70,7 @@
         font-weight: 700;
         font-style: italic;
         margin-top: 0;
+        font-family: var(--font-mono);
     }
     
     .banner {

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

@@ -0,0 +1,28 @@
+<script>
+	let { children } = $props();
+</script>
+
+{@render children()}
+
+<style>
+    :root {
+        --color-highlight: #C76668 !important;
+    }
+    :global {
+        h2::before {
+            letter-spacing: -0.5rem;
+            content: '› ';
+            margin-right: 15px;
+        }
+        h3::before {
+            letter-spacing: -0.3rem;
+            content: '›› ';
+            margin-right: 10px;
+        }
+        h4::before {
+            letter-spacing: -0.26rem;
+            content: '››› ';
+            margin-right: 6px;
+        }
+    }
+</style>

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

@@ -0,0 +1,37 @@
+<script>
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import TableOfContents from "$lib/table-of-contents.svelte";
+    import Video from "$lib/video.svelte";
+</script>
+
+<svelte:head>
+    <title>The Making of a Protagonist IV | denizk0461</title> 
+</svelte:head>
+
+<BannerTitleAlt title="The Making of a Protagonist, Part IV" subtitle="Project N5 Devlog" date="2025-04-27" banner="/projects/projectn5/devlog/20250316/fishmonger.webp" />
+
+<ContentSidebar>
+
+    <TableOfContents slot="side" />
+    <div slot="main">
+
+        <p>I've been making a lot of progress in a lot of different areas, so I won't be able to elaborate on every little detail, but I'll focus on more major things. Excited to share what I've been working on!</p>
+
+        <h2 id="laura">Prosthetic Implications</h2>
+
+        <p>I'm changing Laura's amputation from its previous below-the-elbow cutoff to above-the-elbow. This is mostly a stylistic change, because it means her elbow will be a mechanical replacement as well, and that might look cool, I think.</p>
+
+        <p>I've also been thinking about how her prosthetic could play into the story. A while back, I watched <a href="https://www.youtube.com/watch?v=jZfgQTC9CEA">this video by champutee</a> on arm amputee representation in video games. Admittedly, I feel I'll likely fall into quite the same categories in some ways, making Laura's prosthetic so advanced that it'll more or less serve as a perfect replacement for her organic arm. I had a potentially neat idea that would impact gameplay, though.</p>
+
+        <p>At one point in the game, Laura could lose function of her prosthetic entirely and be forced to continue without being able to use it. This would reflect in gameplay especially because Laura would then be unable to use any two-handed items, which will include a majority of her weapons as well.</p>
+
+        <p>Laura will likely have something between 4 and 8 weapons available to her. I'm thinking that some will be two-handed from the start (including her main rifle), and some will level-up from one-handed to two-handed or dual-handed (for example, a blaster in each hand). This would mean that more advanced players who progress quicker and manage to level up their weapons early (through XP, collectibles, or purchases, I've not decided) will face a greater challenge, since more of their weapons will be levelled up to their two-handed versions, thus making a larger part of their arsenal unavailable for this part of the game.</p>
+
+        <p>In our teacher training, we call this 'differentiation' ('Differenzierung')!</p>
+
+        <img src="/projects/projectn5/devlog/20250316/laura.webp">
+
+        <Video src="/projects/projectn5/devlog/20250316/hair-swoosh.mp4" />
+    </div>
+</ContentSidebar>