edited the button corner on the main page

src/lib/components/indie-button.ts

@@ -5,23 +5,11 @@ export interface IndieButton {
 }
 
 export let buttons: IndieButton[] = [
-    {
-        img: "flag-progress.png",
-        alt: "A button showing the progress pride flag.",
-    },
-    {
-        img: "gnu-linux.gif",
-        alt: "A button with the Linux penguin and the text 'Made on GNU/Linux'.",
-    },
     {
         img: "iso8601.png",
         alt: "A button with the text 'ISO 8601 YYYY-MM-DD'.",
         link: "https://www.iso8601.com/",
     },
-    {
-        img: "notbyai.png",
-        alt: "A button with the text 'created by a human, not by AI' and a smiley next to it.",
-    },
     {
         img: "queercoded.png",
         alt: "A button with the text \"you're telling me a queer coded this\" on a rainbow background.",
@@ -31,11 +19,6 @@ export let buttons: IndieButton[] = [
         alt: "A red button with the text 'MADE WITH SVELTEKIT'.",
         link: "https://svelte.dev",
     },
-    {
-        img: "sexno.png",
-        alt: "A button with the text 'SEX? NO.' on a white background with a blue border.",
-        link: "https://youtu.be/J4i0tuoYBG0?t=176",
-    },
     {
         img: "trans-rights-now.png",
         alt: "A button with the text 'TRANS RIGHTS NOW!' next to a trans flag.",

src/lib/components/table-of-contents.svelte

@@ -80,10 +80,11 @@
         }
         
         .toc-container {
-            max-width: 650px;
+            max-width: var(--width-toc);
             margin-left: auto;
             margin-right: auto;
             margin-top: 12px;
+            box-sizing: border-box;
             background-color: var(--color-background-highlight);
             padding: 16px 0;
             border: var(--border-style) var(--border-dash-size) var(--color-highlight);

src/routes/+layout.svelte

@@ -97,6 +97,13 @@
         font-style: normal;
     }
 
+    @font-face {
+        font-family: "LIGHTYEARS";
+        src: url("/fonts/lightyears.woff2");
+        font-weight: 400;
+        font-style: normal;
+    }
+
     /* OpenMoji */
     @font-face {
         font-family: "OpenMoji";
@@ -121,6 +128,7 @@
 
             --color-background: #111111;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 20%, transparent);
+            --color-background-highlight-alt: color-mix(in srgb, var(--color-highlight-alt) 20%, transparent);
             --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent);
             --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent);
             
@@ -154,6 +162,8 @@
             --font-mono: 'Kode Mono', 'OpenMoji', monospace;
             --font-size-mono: 0.9em;
 
+            --font-lightyears: 'LIGHTYEARS', sans-serif;
+
             --font-size-h1: 2.0rem;
             --font-size-h2: 1.5rem;
             --font-size-h3: 1.3rem;
@@ -164,6 +174,7 @@
 
             /* sizing */
             --media-width: 80%;
+            --width-toc: 650px;
 
             /* page sizing */
             --page-width: 1200px;
@@ -331,6 +342,10 @@
             border: var(--border-dash-size) var(--border-style) var(--color-highlight); */
         }
 
+        .lightyears-text {
+            font-family: var(--font-lightyears);
+        }
+
         .horizontally-centre-aligned {
             width: var(--media-width);
             display: flex;
@@ -460,5 +475,15 @@
             font-family: var(--font-sans-serif);
             padding: 4px;
         }
+
+        .callout-warning {
+            margin: 12px auto;
+            max-width: var(--width-toc);
+            padding: 12px 20px;
+            box-sizing: border-box;
+            backdrop-filter: blur(var(--blur-radius-background));
+            background-color: var(--color-background-highlight-alt);
+            border: var(--border-dash-size) var(--border-style) var(--color-highlight-alt);
+        }
     }
 </style>

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import Content from "$lib/viewport/content.svelte";
-    import SubtitledImage from "$lib/components/subtitled-image.svelte";
     import GalleryRow, { type GalleryRowEntry } from "$lib/lists/gallery-row.svelte";
 
     import { posts as devlogPosts } from "./projects/projectn5/devlog/posts";
@@ -71,10 +70,12 @@
 
 <Content>
     <h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
+    <a href="/blog/2026/0325" class="page-subtitle gradient-title lightyears-text">you can change the world from your bedroom!</a>
 
     <hr>
 
     <div>
+
         <img class="me-img pixelated-img" src="me.webp" alt="Pixelated mirror selfie of the website creator wearing a green shirt, fitting the website theme. The face is obscured." title="hi!">
 
         <p>Hi! I'm Deniz. Welcome to my website! I keep rewriting this introduction but I'm REALLY bad at this type of stuff.</p>
@@ -129,12 +130,13 @@
         </div>
 
         <div class="button-container">
-            <h4 class="update-header">88x31 buttons</h4>
+            <h4 class="update-header">button corner</h4>
             <div class="button-subcontainer">
                 {#each buttons as button}
                     <IndieButton button={button} />
                 {/each}
             </div>
+            <p>to be expanded!</p>
             <p class="small-supertext">my own 88x31 button is in the making. ETA: ???</p>
         </div>
     </div>
@@ -243,6 +245,12 @@
         background-clip: text;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        padding-bottom: 12px;
+    }
+
+    .page-subtitle {
+        /* padding-bottom: 12px; */
+        width: fit-content;
+        margin: 4px 0 12px 0;
+        display: block;
     }
 </style>

src/routes/blog/2026/0317.md

@@ -1,3 +1,9 @@
+<div class="callout-warning">
+    <p><b>Note</b>: as I'm constantly learning new things, this blog post is sort of outdated now. The information is still correct, but it feels inefficient and leads into a dead-end. I dislike this, as I wanted to write a guide that provides an expandable base. Therefore, I'll likely either update or replace this article and trim it down to focus on the important bits.</p>
+
+    <p>Expect a Go API.</p>
+</div>
+
 *Hey!*
 
 Do you want to develop a web application in SvelteKit? Do you want this application to access a PostgreSQL database on a remote server? Do you struggle with CORS (cross-origin resource sharing) and CSRF (cross-site request forgery) and keep receiving error 403? Well, I did, and I couldn't find ***ANYTHING*** on the internet going beyond a test running locally. This is why I'm writing this guide.

src/routes/blog/2026/0325.md

@@ -0,0 +1,32 @@
+<p class="lightyears-text">The world looks so different now. The world looks so different now. The world looks so different now.</p>
+
+## Background
+
+One of my favourite music artists, [Jaron](https://youtu.be/GXvqQ5-P82I), released his album LIGHTYEARS a little over a year ago. For his visuals, he uses a variety of symbols in place of Latin letters, and there's a converter on [his website](https://jaronsteele.com/) too. Only problem is that my browser can't seem to display most of the characters because the characters aren't included in most fonts.
+
+That's why I made a font! It allows you to type Latin characters from `A-Z` as well as numbers `0-9` and `!?` in the LIGHTYEARS style. Like this:
+
+<p class="lightyears-text">trans rights!</p>
+
+The font exclusively uses characters from the Noto font family. Many of the Noto varieties have been stitched together to recreate the whole LIGHTYEARS alphabet.
+
+To create the font, I used [FontForge](https://fontforge.org). Finding this tool was both a blessing and a curse, as it was exactly what I needed, but it kept. crashing. all. the. time. I tried both the AppImage as well as the release on `dnf` and both had the same issues. I managed to make it work, but it took a lot of patience. Eventually I figured out that importing Noto Maths gave me a 3-8 second window before the editor crashed. The project file would forget the imported font, but if I had copied any glyphs it would keep those.
+
+## Download & use
+
+[Download the font here](https://files.denizk0461.dev/public/lightyears.woff2). It's in the web-optimised `woff2` format and has most characters stripped to minimise its file size – it's less than 20 kilobytes in size! Uppercase and lowercase letters are the same.
+
+For use on your website, put the font into your resources/static/similar folder and then add this block of code to your CSS file:
+
+<pre class="code-block">
+@font-face &#123;
+    font-family: "LIGHTYEARS";
+    src: url("/fonts/lightyears.woff2");
+    font-weight: 400;
+    font-style: normal;
+}
+</pre>
+
+Then you can change any element's font by setting `font-family: 'LIGHTYEARS', sans-serif;`. Because it's the Latin characters and Arabic numbers that have been changed, you can type text in regular English and people can 'decrypt' the messages by copy-pasting the text somewhere else!
+
+You do **not** need Jaron's converter to type stylised text! The converter returns the actual symbols from other scripts, whereas this font only changes how letters look.

src/routes/blog/posts.ts

@@ -23,6 +23,17 @@ export interface BlogPostLink {
 
 
 export const posts: BlogPostLink[] = [
+	{
+		key: "2026/0325",
+		post: {
+			date: "2026-03-25",
+			time: "22:22",
+			banner: "banner.webp",
+			bannerAlt: "A sunset captured from an Autobahn exit.",
+			title: "I made a LIGHTYEARS font",
+			description: "I feel electric and it's only getting brighter!",
+		}
+	},
 	{
 		key: "2026/0317",
 		post: {

src/routes/meta/updates/updates.ts

@@ -1,6 +1,12 @@
 import { type UpdateEntry } from "$lib/components/update-entry.svelte";
 
 export const entries: UpdateEntry[] = [
+    {
+        date: "2026-03-25",
+        time: "22:22",
+        content: "I made a LIGHTYEARS font!",
+        link: "/blog/2026/0325",
+    },
     {
         date: "2026-03-17",
         time: "17:10",