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,12 +97,19 @@
         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";
         src: url("/fonts/openmoji/openmoji.woff2") format("woff2");
         unicode-range: U+23,U+2A,U+2D,U+30-39,U+A9,U+AE,U+200D,U+203C,U+2049,U+20E3,U+2117,U+2120,U+2122,U+2139,U+2194-2199,U+21A9,U+21AA,U+229C,U+231A,U+231B,U+2328,U+23CF,U+23E9-23F3,U+23F8-23FE,U+24C2,U+25A1,U+25AA-25AE,U+25B6,U+25C0,U+25C9,U+25D0,U+25D1,U+25E7-25EA,U+25ED,U+25EE,U+25FB-25FE,U+2600-2605,U+260E,U+2611,U+2614,U+2615,U+2618,U+261D,U+2620,U+2622,U+2623,U+2626,U+262A,U+262E,U+262F,U+2638-263A,U+2640,U+2642,U+2648-2653,U+265F,U+2660,U+2663,U+2665,U+2666,U+2668,U+267B,U+267E,U+267F,U+2691-2697,U+2699,U+269B,U+269C,U+26A0,U+26A1,U+26A7,U+26AA,U+26AB,U+26B0,U+26B1,U+26BD,U+26BE,U+26C4,U+26C5,U+26C8,U+26CE,U+26CF,U+26D1,U+26D3,U+26D4,U+26E9,U+26EA,U+26F0-26F5,U+26F7-26FA,U+26FD,U+2702,U+2705,U+2708-270D,U+270F,U+2712,U+2714,U+2716,U+271D,U+2721,U+2728,U+2733,U+2734,U+2744,U+2747,U+274C,U+274E,U+2753-2755,U+2757,U+2763,U+2764,U+2795-2797,U+27A1,U+27B0,U+27BF,U+2934,U+2935,U+2B05-2B07,U+2B0C,U+2B0D,U+2B1B,U+2B1C,U+2B1F-2B24,U+2B2E,U+2B2F,U+2B50,U+2B55,U+2B58,U+2B8F,U+2BBA-2BBC,U+2BC3,U+2BC4,U+2BEA,U+2BEB,U+3030,U+303D,U+3297,U+3299,U+E000-E009,U+E010,U+E011,U+E040-E06D,U+E080-E0B4,U+E0C0-E0CC,U+E0FF-E10D,U+E140-E14A,U+E150-E157,U+E181-E189,U+E1C0-E1C4,U+E1C6-E1D9,U+E200-E216,U+E240-E269,U+E280-E283,U+E2C0-E2C4,U+E2C6-E2DA,U+E300-E303,U+E305-E30F,U+E312-E316,U+E318-E322,U+E324-E329,U+E32B,U+E340-E348,U+E380,U+E381,U+F000,U+F77A,U+F8FF,U+FE0F,U+1F004,U+1F0CF,U+1F10D-1F10F,U+1F12F,U+1F16D-1F171,U+1F17E,U+1F17F,U+1F18E,U+1F191-1F19A,U+1F1E6-1F1FF,U+1F201,U+1F202,U+1F21A,U+1F22F,U+1F232-1F23A,U+1F250,U+1F251,U+1F260-1F265,U+1F300-1F321,U+1F324-1F393,U+1F396,U+1F397,U+1F399-1F39B,U+1F39E-1F3F0,U+1F3F3-1F3F5,U+1F3F7-1F4FD,U+1F4FF-1F53D,U+1F549-1F54E,U+1F550-1F567,U+1F56F,U+1F570,U+1F573-1F57A,U+1F587,U+1F58A-1F58D,U+1F590,U+1F595,U+1F596,U+1F5A4,U+1F5A5,U+1F5A8,U+1F5B1,U+1F5B2,U+1F5BC,U+1F5C2-1F5C4,U+1F5D1-1F5D3,U+1F5DC-1F5DE,U+1F5E1,U+1F5E3,U+1F5E8,U+1F5EF,U+1F5F3,U+1F5FA-1F64F,U+1F680-1F6C5,U+1F6CB-1F6D2,U+1F6D5-1F6D7,U+1F6DC-1F6E5,U+1F6E9,U+1F6EB,U+1F6EC,U+1F6F0,U+1F6F3-1F6FC,U+1F7E0-1F7EB,U+1F7F0,U+1F90C-1F93A,U+1F93C-1F945,U+1F947-1F9FF,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FBC5-1FBC9,U+E0061-E0067,U+E0069,U+E006C-E0079,U+E007F;
-}
+    }
 
     /* #endregion */
 
@@ -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",