added lightyears font to feed

This commit is contained in:
2026-04-07 19:31:58 +02:00
parent 224341e3e3
commit 792483232f
7 changed files with 57 additions and 23 deletions

View File

@@ -13,7 +13,7 @@
{#snippet pageButtons(currentIndex: number)} {#snippet pageButtons(currentIndex: number)}
<div class="page-button-container blurred-background"> <div class="page-button-container blurred-background">
{#if currentIndex == 1} {#if currentIndex == 1}
<p class="page-button page-button-left">|</p> <p class="page-button page-button-left">x</p>
{:else} {:else}
<a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a> <a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a>
{/if} {/if}
@@ -23,7 +23,7 @@
{/each} {/each}
{#if currentIndex == data.maxPages} {#if currentIndex == data.maxPages}
<p class="page-button page-button-right">|</p> <p class="page-button page-button-right">x</p>
{:else} {:else}
<a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a> <a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a>
{/if} {/if}
@@ -51,8 +51,11 @@
<TableOfContents /> <TableOfContents />
{#each data.contents as post} {#each data.feedEntries as entry}
<svelte:component this={post} /> <h2>{entry.title}</h2>
<p class="subtitle">{entry.subtitle}</p>
<p class="subtitle">{entry.date}</p>
<svelte:component this={entry.content} />
{/each} {/each}
</Content> </Content>
@@ -101,7 +104,7 @@
background-color: var(--color-background-highlight-alt); background-color: var(--color-background-highlight-alt);
} }
/* .subtitle { .subtitle {
font-family: var(--font-mono); font-family: var(--font-mono);
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
@@ -117,5 +120,5 @@
.subtitle::after { .subtitle::after {
content: " -->"; content: " -->";
} */ }
</style> </style>

View File

@@ -1,5 +1,12 @@
import { entries } from './feed'; import { entries } from './feed';
interface FeedEntry {
content: any;
title: string;
subtitle: string;
date: string;
}
let entriesPerPage = 8; let entriesPerPage = 8;
export async function load({ params, url }) { export async function load({ params, url }) {
@@ -11,7 +18,7 @@ export async function load({ params, url }) {
// TODO check if index exceeds maximum permitted and redirect (to max page?) // TODO check if index exceeds maximum permitted and redirect (to max page?)
let contents = []; let feedEntries: FeedEntry[] = [];
let start = (pageIndex - 1) * entriesPerPage; let start = (pageIndex - 1) * entriesPerPage;
for (let i = start; i < start + entriesPerPage; i += 1) { for (let i = start; i < start + entriesPerPage; i += 1) {
@@ -22,8 +29,14 @@ export async function load({ params, url }) {
// Vite complains if I don't do this even though it's stupid // Vite complains if I don't do this even though it's stupid
const path = entries[i].split("/"); const path = entries[i].split("/");
const page = await import(`./${path[0]}/${path[1]}.md`); const page = await import(`./${path[0]}/${path[1]}.md`);
const md = page.metadata;
contents.push(page.default); feedEntries.push({
content: page.default,
title: md.title,
subtitle: md.subtitle,
date: md.date,
});
} }
let currentPage = pageIndex; let currentPage = pageIndex;
@@ -32,6 +45,6 @@ export async function load({ params, url }) {
return { return {
currentPage, currentPage,
maxPages, maxPages,
contents, feedEntries,
}; };
} }

View File

@@ -1,12 +1,13 @@
---
title: My First Month Drawing
subtitle: self-imposed drawing challenge
date: February March 2026
---
<script lang="ts"> <script lang="ts">
import ImageGallery from "$lib/lists/image-gallery.svelte"; import ImageGallery from "$lib/lists/image-gallery.svelte";
</script> </script>
## My First Month Drawing
<p class="subtitle">self-imposed drawing challenge</p>
<p class="subtitle">February March 2026</p>
Back in January, I was thinking to myself that I'd really like to learn to draw. It would have some practical benefits like potentially being able to draw concept art for my game, but ultimately I just liked the idea of drawing as a hobby. I doodled a few small things before deciding that I should challenge myself to draw something every single day for an entire month (4 weeks); [I documented the entire thing here](/blog/2026/0205), but spoiler alert: I think I succeeded in learning to draw and I am now able to sketch like I was never able to before! Back in January, I was thinking to myself that I'd really like to learn to draw. It would have some practical benefits like potentially being able to draw concept art for my game, but ultimately I just liked the idea of drawing as a hobby. I doodled a few small things before deciding that I should challenge myself to draw something every single day for an entire month (4 weeks); [I documented the entire thing here](/blog/2026/0205), but spoiler alert: I think I succeeded in learning to draw and I am now able to sketch like I was never able to before!
Here are some of my favourite drawings from around that time, in chronological order: Here are some of my favourite drawings from around that time, in chronological order:

View File

@@ -1,13 +1,14 @@
---
title: 3DS USB-C mod
subtitle: DIY charging port mod
date: October 2024
---
<script lang="ts"> <script lang="ts">
import SubtitledImage from "$lib/components/subtitled-image.svelte"; import SubtitledImage from "$lib/components/subtitled-image.svelte";
import ImageGallery from "$lib/lists/image-gallery.svelte"; import ImageGallery from "$lib/lists/image-gallery.svelte";
</script> </script>
## 3DS USB-C mod
<p class="subtitle">DIY charging port mod</p>
<p class="subtitle">October 2024</p>
<SubtitledImage <SubtitledImage
image="electronics/3ds-usb-c/showcase.mp4" image="electronics/3ds-usb-c/showcase.mp4"
subtitle="it charges via USB-C! also do you like my A Hat in Time theme?" subtitle="it charges via USB-C! also do you like my A Hat in Time theme?"

View File

@@ -1,12 +1,14 @@
---
title: deej0461
subtitle: PC companion audio source controller
date: August 2024
---
<script lang="ts"> <script lang="ts">
import SubtitledImage from "$lib/components/subtitled-image.svelte"; import SubtitledImage from "$lib/components/subtitled-image.svelte";
import ImageGallery from "$lib/lists/image-gallery.svelte"; import ImageGallery from "$lib/lists/image-gallery.svelte";
</script> </script>
## deej0461
<p class="subtitle">PC companion audio source controller</p>
<p class="subtitle">August 2024</p>
<SubtitledImage <SubtitledImage
image="electronics/deej0461/finished.webp" image="electronics/deej0461/finished.webp"
altText="A golden 3D printed shell with a slider on its left, two LEDs recessed, and four black buttons on its right. The buttons have symbols of speakers, monitors, and headphones printed on them. Three screws at the top are visible. A USB-C cable is plugged into the back of it." altText="A golden 3D printed shell with a slider on its left, two LEDs recessed, and four black buttons on its right. The buttons have symbols of speakers, monitors, and headphones printed on them. Three screws at the top are visible. A USB-C cable is plugged into the back of it."

View File

@@ -1,5 +1,6 @@
export let entries: string[] = [ export let entries: string[] = [
// 2026 // 2026
"misc/lightyears-font",
"drawings/firstmonth", "drawings/firstmonth",
// 2024 // 2024
"electronics/3ds-usb-c", "electronics/3ds-usb-c",

View File

@@ -0,0 +1,13 @@
---
title: LIGHTYEARS font
subtitle: Stylised font
date: March 2026
---
<p class="lightyears-text">The world looks so different now. The world looks so different now. The world looks so different now.</p>
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>
[Download the font here](https://files.natconf.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. People can 'decrypt' text by copy-pasting it somewhere else!