From ea4592b4c208a170d0ac6961db09c3fcd200fc7b Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 14 Jul 2025 12:12:30 +0200
Subject: [PATCH] edited style and added games page

---
 src/lib/content-sidebar.svelte   |  4 +-
 src/lib/content.svelte           |  3 +-
 src/lib/header.svelte            | 98 ++++++++++++++++++++++++--------
 src/lib/table-of-contents.svelte |  5 +-
 src/lib/webrings/gamedev.svelte  |  8 +--
 src/routes/+layout.svelte        | 11 ++--
 src/routes/+page.svelte          | 19 +++++--
 src/routes/games/+page.svelte    | 34 +++++++++++
 8 files changed, 138 insertions(+), 44 deletions(-)
 create mode 100644 src/routes/games/+page.svelte

diff --git a/src/lib/content-sidebar.svelte b/src/lib/content-sidebar.svelte
index 31b19ff..eacb62b 100644
--- a/src/lib/content-sidebar.svelte
+++ b/src/lib/content-sidebar.svelte
@@ -5,9 +5,6 @@
     <div class="main">
         <slot name="main" />
     </div>
-    <div class="side">
-        <slot name="side-right" />
-    </div>
 </div>
 
 <style>
@@ -16,6 +13,7 @@
         margin: 0 auto 228px;
         display: flex;
         flex-direction: row;
+        padding: 0 24px;
     }
     .side {
         min-width: 400px;
diff --git a/src/lib/content.svelte b/src/lib/content.svelte
index 58971a2..6a03f4c 100644
--- a/src/lib/content.svelte
+++ b/src/lib/content.svelte
@@ -4,7 +4,8 @@
 
 <style>
     .content {
-        max-width: 1200px;
+        max-width: var(--page-width);
         margin: 0 auto 228px;
+        padding: 0 24px;
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/header.svelte b/src/lib/header.svelte
index b64cff4..2b79879 100644
--- a/src/lib/header.svelte
+++ b/src/lib/header.svelte
@@ -1,39 +1,89 @@
-<div class="center-stuff">
+<!-- <div class="center-stuff">
     <p class="banner-text" style="margin-right: 8px;">denizk0461's</p>
     <a class="banner-image" href="/">
-        <img src="/favicon.webp"/>
+        <img src="/favicon.webp" alt="Favicon">
     </a>
     <p class="banner-text" style="margin-left: 8px;">website</p>
+</div> -->
+
+<div class="header-container">
+    <div class="header-content">
+        <a class="favicon" href="/">
+            <img class="favicon-image" src="/favicon.webp" alt="Favicon">
+        </a>
+        <div class="links">
+            <span>»</span>
+            <a href="/projects">Projects</a>
+            <span> // </span>
+            <a href="/games">Games</a>
+            <span>«</span>
+        </div>
+    </div>
 </div>
 
 <style>
-    @keyframes header-text-anim {
-        0% { color: #96C9DC; }
-        33% { color: #9CE391; }
-        66% { color: #E03E59;}
-        100% { color: #96C9DC; }
+    .header-container {
+        margin: 0 0 ;
+        padding: 0;
+        background-color: transparent;
     }
-    .center-stuff {
-        width: fit-content;
+
+    .header-content {
         display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
         align-items: center;
+        max-width: var(--page-width);
+        margin: 0 auto;
+        padding: 0 24px;
+    }
+
+    .favicon {
+        margin: 8px 0;
+        background: url("/favicon.webp");
+    }
+
+    .favicon-image {
+        width: initial;
+        max-height: 32px;
+    }
+
+    .links {
         margin-left: auto;
-        margin-right: auto;
+        margin-right: 0;
+
+        padding: 12px 24px;
+        background-color: var(--color-background-highlight-hover);
+        clip-path: polygon(
+            12px 0%,
+            100% 0%,
+            calc(100% - 12px) 100%,
+            0% 100%,
+            12px 0%
+        );
     }
-    .banner-image {
-        width: 64px;
-        margin-top: 16px;
-        margin-bottom: 16px;
-    }
-    .banner-text {
-        width: fit-content;
-        font-family: 'Space Mono', monospace;
+
+    a, span {
+        font-family: var(--font-title);
+        font-size: 1rem;
         font-weight: 700;
-        color: var(--color-highlight);
-        margin: 0px 24px;
-        animation-name: header-text-anim;
-        animation-duration: 2.13333333333s;
-        animation-iteration-count: infinite;
-        animation-timing-function: linear;
+        color: var(--color-text);
+    }
+
+    a {
+        text-decoration: none;
+        transition: 0.2s ease-in-out color;
+    }
+    
+    a:link {
+        color: var(--color-text);
+    }
+    /* visited link */
+    a:visited {
+        color: var(--color-text);
+    }
+    /* mouse over link */
+    a:hover {
+        color: var(--color-text-dark);
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/table-of-contents.svelte b/src/lib/table-of-contents.svelte
index c507af0..c99979b 100644
--- a/src/lib/table-of-contents.svelte
+++ b/src/lib/table-of-contents.svelte
@@ -47,8 +47,7 @@
 </script>
 
 <div class="toc-container notched">
-    <ul class="toc-list" bind:this={container}>
-    </ul>
+    <ul class="toc-list" bind:this={container}></ul>
 </div>
 
 <style>
@@ -60,6 +59,8 @@
 
             background-color: var(--color-background-highlight);
             padding: 16px 0;
+            position: sticky;
+            top: 20px;
         }
 
         .toc-list {
diff --git a/src/lib/webrings/gamedev.svelte b/src/lib/webrings/gamedev.svelte
index cd1542f..493e36f 100644
--- a/src/lib/webrings/gamedev.svelte
+++ b/src/lib/webrings/gamedev.svelte
@@ -6,10 +6,10 @@
     </div>
     <div class="webring-row">
         <span>〔</span>
-        <a href="https://www.rainbowcemetery.com/devring/prev.php?id=0">↫ PREV</a>
-        <a href="https://www.rainbowcemetery.com/devring/rand.php?id=0">RAND</a>
-        <a href="https://www.rainbowcemetery.com/devring/list.php?id=0">LI<i>S</i>T</a>
-        <a href="https://www.rainbowcemetery.com/devring/next.php?id=0">NEXT ↬</a>
+        <a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">↫ PREV</a>
+        <a href="https://www.rainbowcemetery.com/devring/rand.php?id=18">RAND</a>
+        <a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LI<i>S</i>T</a>
+        <a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT ↬</a>
         <span>〕</span>
     </div>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8433b74..0b1d793 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,7 +13,7 @@
 <Footer />
 
 <style>
-    @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');
+    @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=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
     @font-face {
         font-family: 'Monument Extended';
@@ -75,7 +75,7 @@
             --color-text: #d0d0d0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
-            --color-highlight: #DB7072 !important;
+            --color-highlight: #51B86B !important;
 
             --color-background: #1b1b1b;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
@@ -91,8 +91,10 @@
             --color-link-hovered: #ffdad5;
 
             --font-title: 'Monument Extended';
-            --font-sans-serif: 'Manrope', 'Lato', sans-serif;
+            --font-sans-serif: 'Inter', 'Lato', sans-serif;
             --font-mono: 'IBM Plex Mono', monospace;
+
+            --page-width: 1200px;
         }
 
         html {
@@ -106,6 +108,7 @@
             font-size: 1.1rem;
             color: var(--color-text); /* text colour */
             
+            margin: 0;
             background-color: var(--color-background);
         }
 
@@ -126,7 +129,7 @@
         p, span, li, pre, a {
             color: var(--color-text);
             line-height: 1.7rem;
-            font-weight: 500;
+            font-weight: 400;
         }
         .styled-list {
             padding: 0;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4d568c6..7d07324 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,9 +4,14 @@
     import Gallery from "$lib/lists/gallery-entry.svelte";
     import LinkList from "$lib/link-list.svelte";
 
+    import type { DevlogPost } from "$lib/devlog-posts";
+    import { posts } from "$lib/devlog-posts";
+
     var lastIndex = -1;
     let meImg: string = "common/me/a.webp";
 
+    $: setPicture();
+
     function getRandom(to: number): number {
         var buf = new Uint8Array(1);
         crypto.getRandomValues(buf);
@@ -37,27 +42,27 @@
                     title: "Project N5 – devlog",
                     subtitle: "my active Godot game project about finding yourself in an unfamiliar future",
                     fullWidth: true,
-                    img: "projects/projectn5/devlog/2025/0316/fishmonger.webp",
+                    img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
                     link: "projects/projectn5/devlog",
                 },
                 {
                     title: "Projects",
-                    subtitle: "an overview of what i do and have done",
+                    subtitle: "an overview of what I do and have done",
                     fullWidth: false,
                     img: "projects/project-mix.webp",
                     link: "projects",
                 },
                 {
-                    title: "Blog",
-                    subtitle: "more to come <i>soon</i>",
+                    title: "Games",
+                    subtitle: "some small games I've made that are available online",
                     fullWidth: false,
                     img: "common/hypertext.webp",
-                    link: "",
+                    link: "games",
                 },
             ]}/>
         </div>
         <div class="subcontainer">
-            <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} onclick={setPicture}>↫ me </h3>
+            <h3>about ↬<img id="me-img" class="me-img" title="hi there" src={meImg} alt="A mini picture of me">↫ me </h3>
 
             <p>Hi! I'm Deniz. I'm a programmer, sometimes a music producer, and rarely a hard-working student in Northern Germany. Welcome to my webpage!</p>
 
@@ -65,6 +70,8 @@
 
             <h3>where to find me</h3>
 
+            <p>{posts[0].title}</p>
+
             <LinkList entries={[
                 {
                     icon: "icons/bluesky.svg",
diff --git a/src/routes/games/+page.svelte b/src/routes/games/+page.svelte
new file mode 100644
index 0000000..a563ca4
--- /dev/null
+++ b/src/routes/games/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Content from "$lib/content.svelte";
+    import LinkList from "$lib/link-list.svelte";
+</script>
+
+<svelte:head>
+    <title>Games | denizk0461</title> 
+</svelte:head>
+
+<BannerTitleAlt
+    title="Games"
+    banner="/projects/banner.webp"
+    subtitle="Just some small game projects"
+/>
+
+<Content>
+    <p>Here you'll find all the game projects I've put online!</p>
+
+    <p>Do note: the things on here are mostly quick projects, largely unfinished, and possibly not fun.</p>
+
+    <LinkList entries={
+        [
+            {
+                text: "swordsnstuff",
+                link: "swordsnstuff",
+            },
+            {
+                text: "magician - warning no server",
+                link: "magician",
+            }
+        ]
+    }></LinkList>
+</Content>
\ No newline at end of file