added new blog post
This commit is contained in:
@@ -71,7 +71,7 @@
|
|||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
|
<h1 class="gradient-title"><i>Moin!</i> ~ welcome to my website :)</h1>
|
||||||
<p class="page-subtitle gradient-title lightyears-text">you can change the world from your bedroom!</p>
|
<a href="/blog/2026/0325" class="page-subtitle gradient-title lightyears-text">you can change the world from your bedroom!</a>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@@ -251,5 +251,6 @@
|
|||||||
/* padding-bottom: 12px; */
|
/* padding-bottom: 12px; */
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin: 4px 0 12px 0;
|
margin: 4px 0 12px 0;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
32
src/routes/blog/2026/0325.md
Normal file
32
src/routes/blog/2026/0325.md
Normal file
@@ -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 {
|
||||||
|
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.
|
||||||
@@ -23,6 +23,17 @@ export interface BlogPostLink {
|
|||||||
|
|
||||||
|
|
||||||
export const posts: 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",
|
key: "2026/0317",
|
||||||
post: {
|
post: {
|
||||||
|
|||||||
@@ -1,6 +1,12 @@
|
|||||||
import { type UpdateEntry } from "$lib/components/update-entry.svelte";
|
import { type UpdateEntry } from "$lib/components/update-entry.svelte";
|
||||||
|
|
||||||
export const entries: UpdateEntry[] = [
|
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",
|
date: "2026-03-17",
|
||||||
time: "17:10",
|
time: "17:10",
|
||||||
|
|||||||
BIN
static/blog/2026/0325/banner.webp
Normal file
BIN
static/blog/2026/0325/banner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Reference in New Issue
Block a user