moved CSS rules so that link lists and ul look identical; adjusted header

2026-01-21 17:42:59 +01:00
parent 01feb485bf
commit df73da9ae2
14 changed files with 271 additions and 302 deletions
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Banner2 from "$lib/banner2.svelte";
    import TableOfContents from "$lib/table-of-contents.svelte";
    import type { Project } from './projects';
    import { projects } from './projects';
    import LinkList from "$lib/link-list.svelte";
-    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import Content from "$lib/content.svelte";

    let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
        var result: Project[] = [];
@@ -21,72 +21,115 @@
    <title>Projects | denizk0461</title> 
 </svelte:head>

-<BannerTitleAlt
-    title="My Disordered Projects"
-    banner="/projects/banner.webp"
-    bannerAlt="Closeup of the purple protagonist from Project N5"
-    subtitle="Things I have worked on"
-/>
+<Content>
+    <Banner2
+        title="My Disordered Projects"
+        banner="/projects/banner.webp"
+        bannerAlt="Closeup of the purple protagonist from Project N5"
+        subtitle="Things I have worked on" />

-<ContentSidebar>
-    <TableOfContents slot="side-left" />
+    <TableOfContents />

-    <div slot="main">
-        <h2 id="games">Games</h2>
-        {#each projects as project}
-            {#if project.type == "game"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-        <h2 id="hardware">Hardware</h2>
-        {#each projects as project}
-            {#if project.type == "hardware"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-        <h2 id="apps">Apps</h2>
-        {#each projects as project}
-            {#if project.type == "app"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-        <h2 id="music">Music</h2>
-        {#each projects as project}
-            {#if project.type == "music"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-    </div>
-</ContentSidebar>
+    <h2 id="games">Games</h2>
+    {#each projects as project}
+        {#if project.type == "game"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+    <h2 id="hardware">Hardware</h2>
+    {#each projects as project}
+        {#if project.type == "hardware"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+    <h2 id="apps">Apps</h2>
+    {#each projects as project}
+        {#if project.type == "app"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+    <h2 id="music">Music</h2>
+    {#each projects as project}
+        {#if project.type == "music"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+</Content>

 {#snippet projectSummary({
    project
 }: {
    project: Project;
 })}
-    <div>
-        <h3 id="{project.id}">{project.title}</h3>
-        {#if project.subtitle}
-        <p class="project-subtitle">» {project.subtitle}</p>
-        {/if}
-        {#if project.banner}
+    <h3 id="{project.id}">{project.title}</h3>
+    {#if project.subtitle}
+        <p class="project-subtitle">[ {project.subtitle} ]</p>
+    {/if}
+    {#if project.banner}
        <div class="project-banner-container">
            <img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
            {#if project.date}
-            <p class="project-date project-date-embed">{project.date}</p>
+                <p class="project-date project-date-embed">{project.date}</p>
            {/if}
        </div>
-        {:else}
-        {#if project.date}
+    {:else}
+    {#if project.date}
        <p class="project-date">{project.date}</p>
-        {/if}
-        {/if}
-        {#if project.icon}
+    {/if}
+    {/if}
+    {#if project.icon}
        <img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
-        {/if}
-        {#each project.paragraphs as paragraph}
-            <p>{@html paragraph}</p>
-        {/each}
-        <LinkList entries={project.links} />
-    </div>
-{/snippet}
+    {/if}
+    {#each project.paragraphs as paragraph}
+        <p>{@html paragraph}</p>
+    {/each}
+    <LinkList entries={project.links} />
+{/snippet}
+
+<style>
+    .project-subtitle {
+        font-family: var(--font-mono);
+        font-size: 1.0rem;
+        margin-top: 0;
+    }
+
+    .project-banner-container {
+        position: relative;
+        width: fit-content;
+        height: 300px;
+        margin-left: auto;
+        margin-right: auto;
+        display: flex;
+    }
+    
+    .project-banner {
+        margin: 0; /* reset left/right margins */
+        width: 100%;
+    }
+
+    .project-icon {
+        float: left;
+        margin: 16px 16px 16px 0;
+        width: 20%;
+    }
+
+    .project-date {
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: 1rem;
+        width: fit-content;
+        margin: 0;
+        padding: 0;
+        
+        color: var(--color-text-dark);
+        background-color: var(--color-highlight);
+        font-family: var(--font-stylised);
+        padding: 4px;
+    }
+
+    .project-date-embed {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+    }
+</style>
--- a/src/routes/projects/daisyfm/+page.svelte
+++ b/src/routes/projects/daisyfm/+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 TableOfContents from "$lib/table-of-contents.svelte";
 </script>
@@ -8,19 +8,20 @@
    <title>Daisy FM Synth | denizk0461</title> 
 </svelte:head>

-<BannerTitleAlt
-    title="Daisy FM Synth"
-    banner="/projects/daisyfm/banner.webp"
-    bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
-
 <Content>
+    <Banner2
+        title="Daisy FM Synth"
+        date="2025-04-04"
+        banner="/projects/daisyfm/banner.webp"
+        bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
+
    <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>

    <p>So... <i>how did we get here?</i></p>

-    <TableOfContents disableStickyScrolling />
+    <TableOfContents />

    <h2 id="creation">How did I make this?</h2>

--- a/src/routes/projects/projectn5/devlog/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/+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 type { DevlogPost } from "./devlog-posts";
    import { posts, type DevlogPost } from "./posts";
@@ -19,13 +19,11 @@
    <title>Project N5 Devlog | denizk0461</title> 
 </svelte:head>

-<BannerTitleAlt
-    title="Project N5; Development Log"
-    banner="/projects/projectn5/banner2.webp"
-    wide
-/>
-
 <Content>
+    <Banner2
+        title="Project N5; Development Log"
+        banner="/projects/projectn5/banner2.webp" />
+
    <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>

    <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
--- a/src/routes/projects/projectn5/devlog/2025/0816.md
+++ b/src/routes/projects/projectn5/devlog/2025/0816.md
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
+    import List, { type ListEntry } from "$lib/link-list.svelte";

-    let builds: LinkEntry[] = [
+    let builds: ListEntry[] = [
        {
            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:

-<LinkList entries={builds} />
+<List 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.

--- a/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
+++ b/src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte
@@ -21,10 +21,8 @@
        bannerAlt="{data.bannerAlt}"    
    />

-    <TableOfContents disableStickyScrolling />
+    <TableOfContents />

-    <!-- <div slot="main"> -->
    <svelte:component this={data.content} />
-	<!-- </div> -->

 </Content>
--- a/src/routes/projects/projects.ts
+++ b/src/routes/projects/projects.ts
@@ -274,11 +274,11 @@ export const projects: Project[] = [
        title: "Magician",
        subtitle: "Online Multiplayer Card Game",
        paragraphs: [
-            "<b>Magician</b> is a clone of the card game <i>Wizard</i>. I've made it primarily to play with friends, but it's also a test for programming client-server multiplayer games. The clients are programmed in Godot, the server in Python, and they communicate via TCP/IP websockets. The game works with 3 to 6 players and requires an active connection to the server, which should be reachable most times.",
+            "<b>Magician</b> is a clone of the card game <i>Wizard</i>. I've made it primarily to play with friends, but it's also a test for programming client-server multiplayer games. The clients are programmed in Godot, the server in Python, and they communicate via TCP/IP websockets. The game works with 3 to 6 players.",
        ],
        links: [
            {
-                text: "Play <b>Magician</b>",
+                text: "View the latest <b>Magician</b> build",
                link: "//apps.denizk0461.dev/magician",
            },
        ],