()
-
- useEffect(() => {
- const fetchData = async () => {
- const rq = await fetch("https://api.listenbrainz.org/1/angelcube/pins/current")
- if (!rq.ok) return;
- const track = await rq.json().then(json => json.pinned_recording ? json.pinned_recording.track_metadata : null) as TrackMetadata
- if (!track) return;
-
- setData(track)
- }
- fetchData()
- }, [])
-
- if (!data) return null
-
- return (
- My favourite song right now is{" "}
- {data.track_name}{" "}
- by . [↗]
-
)
+ const [data, setData] = useState()
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const rq = await fetch("https://api.listenbrainz.org/1/angelcube/pins/current")
+ if (!rq.ok) return
+ const track = (await rq
+ .json()
+ .then((json) => (json.pinned_recording ? json.pinned_recording.track_metadata : null))) as TrackMetadata
+ if (!track) return
+
+ setData(track)
+ }
+ fetchData()
+ }, [])
+
+ if (!data) return null
+
+ return (
+
+ My favourite song right now is{" "}
+ {data.track_name} by{" "}
+ . [↗]
+
+ )
}
function ArtistCredits({ artists }: { artists: ArtistCredit[] }) {
- return (
- <>
- {artists.map((artist) => (
-
-
- {artist.artist_credit_name}
-
- {artist.join_phrase}
-
- ))}
-
- )
+ return (
+ <>
+ {artists.map((artist) => (
+
+ {artist.artist_credit_name}
+ {artist.join_phrase}
+
+ ))}
+
+ )
}
function makeLBURL(slug: string) {
- return `https://listenbrainz.org${slug}`
+ return `https://listenbrainz.org${slug}`
}
-
diff --git a/src/components/preact/NowPlaying.tsx b/src/components/preact/NowPlaying.tsx
index 57513b2..bdf26cd 100644
--- a/src/components/preact/NowPlaying.tsx
+++ b/src/components/preact/NowPlaying.tsx
@@ -5,20 +5,17 @@ import "../../styles/components/now_playing.scss"
const REPEATS = 8
export default function NowPlaying() {
- const steam = SteamNowPlaying()
- const lb = LBNowPlaying()
- const items = [steam, lb].filter(Boolean)
+ const steam = SteamNowPlaying()
+ const lb = LBNowPlaying()
+ const items = [steam, lb].filter(Boolean)
- if (items.length === 0) return null
+ if (items.length === 0) return null
- const repeated = Array.from({ length: REPEATS }, (_, i) => items[i % items.length])
+ const repeated = Array.from({ length: REPEATS }, (_, i) => items[i % items.length])
- return (
-
- )
+ return (
+
+ )
}
-
diff --git a/src/components/preact/SteamNowPlaying.tsx b/src/components/preact/SteamNowPlaying.tsx
index 49cb23a..1d44d14 100644
--- a/src/components/preact/SteamNowPlaying.tsx
+++ b/src/components/preact/SteamNowPlaying.tsx
@@ -1,42 +1,42 @@
import { useEffect, useState } from "preact/hooks"
interface Game {
- name: string,
- url?: string
+ name: string
+ url?: string
}
async function getJSON(url: string): Promise {
- try {
- const res = await fetch(url)
- if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
- return (await res.json()) as T
- } catch {
- return undefined
- }
+ try {
+ const res = await fetch(url)
+ if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
+ return (await res.json()) as T
+ } catch {
+ return undefined
+ }
}
export default function SteamNowPlaying() {
- const [game, setGame] = useState()
+ const [game, setGame] = useState()
- useEffect(() => {
- const fetchData = async () => {
- const gameData = await getJSON("/api/steam")
- if (!gameData) return
- setGame(gameData)
- }
- fetchData()
- }, [])
+ useEffect(() => {
+ const fetchData = async () => {
+ const gameData = await getJSON("/api/steam")
+ if (!gameData) return
+ setGame(gameData)
+ }
+ fetchData()
+ }, [])
- if (!game) return null
+ if (!game) return null
- return (
-
- NOW PLAYING − {game.name}{" "}
- on Steam [↗] {" · "}
-
- )
+ return (
+
+ NOW PLAYING − {game.name} on Steam [
+ ↗] {" · "}
+
+ )
}
function MaybeLink({ href, children }: { href?: string; children: any }) {
- return href ? {children} : <>{children}
-}
\ No newline at end of file
+ return href ? {children} : <>{children}
+}
diff --git a/src/content.config.ts b/src/content.config.ts
index eff1a13..e7c980a 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -1,17 +1,17 @@
-import { defineCollection } from "astro:content";
-import { glob } from "astro/loaders";
-import { z } from "astro/zod";
-import { Temporal } from "temporal-polyfill";
+import { defineCollection } from "astro:content"
+import { glob } from "astro/loaders"
+import { z } from "astro/zod"
+import { Temporal } from "temporal-polyfill"
const logbook = defineCollection({
- loader: glob({ base: "./content/logbook", pattern: "**/*.{md,mdx}" }),
- schema: z.object({
- title: z.string(),
- description: z.string(),
- type: z.enum(["Writings", "Ramblings"]),
- published_date: z.string().transform((value) => Temporal.PlainDate.from(value)),
- updated_date: z.string().transform((value) => Temporal.PlainDate.from(value)),
- }),
+ loader: glob({ base: "./content/logbook", pattern: "**/*.{md,mdx}" }),
+ schema: z.object({
+ title: z.string(),
+ description: z.string(),
+ type: z.enum(["Writings", "Ramblings"]),
+ published_date: z.string().transform((value) => Temporal.PlainDate.from(value)),
+ updated_date: z.string().transform((value) => Temporal.PlainDate.from(value))
+ })
})
export const collections = { logbook }
diff --git a/src/layouts/meta.astro b/src/layouts/meta.astro
index 68af1ce..9638c4d 100644
--- a/src/layouts/meta.astro
+++ b/src/layouts/meta.astro
@@ -1,7 +1,6 @@
-
@@ -12,15 +11,12 @@
-
-
+
+
-
-
-
+
+
+
+
diff --git a/src/styles/about.scss b/src/styles/about.scss
index 688dd3a..9c2a610 100644
--- a/src/styles/about.scss
+++ b/src/styles/about.scss
@@ -2,38 +2,38 @@
@use "lib/article";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
}
main {
- margin: 20px;
+ margin: 20px;
}
article {
- @extend %article;
+ @extend %article;
- h2 {
- font-size: 2.5rem;
- }
+ h2 {
+ font-size: 2.5rem;
+ }
- // ul:has(a) {
- // list-style: "⁃ ";
+ // ul:has(a) {
+ // list-style: "⁃ ";
- // a {
- // // font-family: var(--font-heading);
- // // text-transform: uppercase;
- // font-size: 1.125rem;
- // color: var(--text-color)
- // }
- // }
+ // a {
+ // // font-family: var(--font-heading);
+ // // text-transform: uppercase;
+ // font-size: 1.125rem;
+ // color: var(--text-color)
+ // }
+ // }
}
@media (max-width: 775px) {
- article {
- h1 {
- font-size: 2rem;
- }
- }
-}
\ No newline at end of file
+ article {
+ h1 {
+ font-size: 2rem;
+ }
+ }
+}
diff --git a/src/styles/bulletin.scss b/src/styles/bulletin.scss
index 4eadf3d..2ebc718 100644
--- a/src/styles/bulletin.scss
+++ b/src/styles/bulletin.scss
@@ -2,16 +2,15 @@
@use "lib/article";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
}
main {
- margin: 20px;
+ margin: 20px;
}
-
article {
- @extend %article;
-}
\ No newline at end of file
+ @extend %article;
+}
diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss
index 95b0c29..91982f2 100644
--- a/src/styles/components/header.scss
+++ b/src/styles/components/header.scss
@@ -1,34 +1,34 @@
header {
- display: grid;
- grid-template-columns: 1fr 15rem;
- grid-template-rows: repeat(3, 1fr);
- grid-template-areas:
- "nav nav"
- "title title"
- "title title";
- row-gap: 40px;
- margin-bottom: 5vh;
+ display: grid;
+ grid-template-columns: 1fr 15rem;
+ grid-template-rows: repeat(3, 1fr);
+ grid-template-areas:
+ "nav nav"
+ "title title"
+ "title title";
+ row-gap: 40px;
+ margin-bottom: 5vh;
- div.title {
- grid-area: title;
+ div.title {
+ grid-area: title;
- h1 {
- font-family: var(--font-heading);
- font-weight: 300;
- font-size: 6rem;
- line-height: 1;
- letter-spacing: -0.08em;
- }
+ h1 {
+ font-family: var(--font-heading);
+ font-weight: 300;
+ font-size: 6rem;
+ line-height: 1;
+ letter-spacing: -0.08em;
+ }
- p.description {
- margin: 0.5em 0;
- opacity: 80%;
- }
- }
+ p.description {
+ margin: 0.5em 0;
+ opacity: 80%;
+ }
+ }
}
@media (max-width: 775px) {
- header div.title h1 {
- font-size: 4rem;
- }
-}
\ No newline at end of file
+ header div.title h1 {
+ font-size: 4rem;
+ }
+}
diff --git a/src/styles/components/nav.scss b/src/styles/components/nav.scss
index b9e5025..170c298 100644
--- a/src/styles/components/nav.scss
+++ b/src/styles/components/nav.scss
@@ -1,44 +1,43 @@
header {
- nav {
- grid-area: nav;
- display: grid;
- grid-template-columns: subgrid;
- grid-template-areas:
- "back . . . name";
-
- font-family: var(--font-heading);
- font-size: 1.5rem;
+ nav {
+ grid-area: nav;
+ display: grid;
+ grid-template-columns: subgrid;
+ grid-template-areas: "back . . . name";
- span.back {
- grid-area: back;
+ font-family: var(--font-heading);
+ font-size: 1.5rem;
- a {
- color: var(--text-color);
- }
- }
+ span.back {
+ grid-area: back;
- span.name {
- grid-area: name;
- }
- }
+ a {
+ color: var(--text-color);
+ }
+ }
+
+ span.name {
+ grid-area: name;
+ }
+ }
}
@media (max-width: 450px) {
- header {
- nav {
- grid-template-columns: 1fr;
- grid-template-rows: auto;
- row-gap: 0.25rem;
- grid-template-areas:
- "back"
- "name";
+ header {
+ nav {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ row-gap: 0.25rem;
+ grid-template-areas:
+ "back"
+ "name";
- span.back {
- font-family: var(--font-code);
- text-transform: uppercase;
- font-size: 1rem;
- opacity: 65%;
- }
- }
- }
-}
\ No newline at end of file
+ span.back {
+ font-family: var(--font-code);
+ text-transform: uppercase;
+ font-size: 1rem;
+ opacity: 65%;
+ }
+ }
+ }
+}
diff --git a/src/styles/components/now_playing.scss b/src/styles/components/now_playing.scss
index d5432ee..1776cba 100644
--- a/src/styles/components/now_playing.scss
+++ b/src/styles/components/now_playing.scss
@@ -1,50 +1,50 @@
div#now-playing-wrapper {
- background-color: var(--text-color);
- color: var(--background-color);
- font-family: var(--font-code);
-
- overflow: hidden;
- width: 100%;
-
- div#now-playing {
- display: flex;
- width: max-content;
- animation: marquee 100s linear infinite;
-
- span {
- flex-shrink: 0;
- padding: 0.4em;
- line-height: 1.2;
- white-space: nowrap;
-
- a {
- color: var(--background-color);
- }
- }
-
- &:hover {
- animation-play-state: paused;
- }
- }
+ background-color: var(--text-color);
+ color: var(--background-color);
+ font-family: var(--font-code);
+
+ overflow: hidden;
+ width: 100%;
+
+ div#now-playing {
+ display: flex;
+ width: max-content;
+ animation: marquee 100s linear infinite;
+
+ span {
+ flex-shrink: 0;
+ padding: 0.4em;
+ line-height: 1.2;
+ white-space: nowrap;
+
+ a {
+ color: var(--background-color);
+ }
+ }
+
+ &:hover {
+ animation-play-state: paused;
+ }
+ }
}
@keyframes marquee {
- 0% {
- transform: translateX(0);
- }
- 100% {
- transform: translateX(-50%);
- }
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
}
@media (max-width: 775px) {
- div#now-playing-wrapper div#now-playing {
- animation: marquee 60s linear infinite;
- }
+ div#now-playing-wrapper div#now-playing {
+ animation: marquee 60s linear infinite;
+ }
}
@media (max-width: 575px) {
- div#now-playing-wrapper div#now-playing {
- animation: marquee 20s linear infinite;
- }
-}
\ No newline at end of file
+ div#now-playing-wrapper div#now-playing {
+ animation: marquee 20s linear infinite;
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 89cc723..8224da0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,166 +2,162 @@
@use "lib/article.scss";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
- overflow-x: hidden;
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
+ overflow-x: hidden;
}
main {
- margin: 50px;
+ margin: 50px;
}
header {
- display: grid;
- grid-template-columns: 1fr 15rem;
- grid-template-areas:
- "image image"
- "title nav";
- margin-bottom: 10vh;
-
- picture {
- grid-area: image;
-
- img {
- width: 100%;
- }
- }
-
- div.title {
- grid-area: title;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- h1 {
- font-family: var(--font-heading);
- font-weight: 300;
- font-size: 6rem;
- letter-spacing: -0.08em;
- margin-bottom: 0.2em;
- }
- }
-
- nav {
- display: contents;
-
- ul {
- display: flex;
- flex-direction: column;
- align-items: end;
- gap: 0.8rem;
-
- li {
- font-family: var(--font-code);
- text-transform: uppercase;
- font-size: 2rem;
- font-weight: 400;
- text-decoration: underline;
-
- a {
- color: var(--text-color)
- }
- }
- }
- }
+ display: grid;
+ grid-template-columns: 1fr 15rem;
+ grid-template-areas:
+ "image image"
+ "title nav";
+ margin-bottom: 10vh;
+
+ picture {
+ grid-area: image;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ div.title {
+ grid-area: title;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ h1 {
+ font-family: var(--font-heading);
+ font-weight: 300;
+ font-size: 6rem;
+ letter-spacing: -0.08em;
+ margin-bottom: 0.2em;
+ }
+ }
+
+ nav {
+ display: contents;
+
+ ul {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ gap: 0.8rem;
+
+ li {
+ font-family: var(--font-code);
+ text-transform: uppercase;
+ font-size: 2rem;
+ font-weight: 400;
+ text-decoration: underline;
+
+ a {
+ color: var(--text-color);
+ }
+ }
+ }
+ }
}
section#about {
- --faded-text-color: color-mix(in srgb, var(--text-color), transparent 29%);
- display: flex;
- gap: 2rem;
-
- article {
- @extend %article;
- margin: 0;
- }
-
- picture img {
- max-width: 25rem;
- }
-
+ --faded-text-color: color-mix(in srgb, var(--text-color), transparent 29%);
+ display: flex;
+ gap: 2rem;
+
+ article {
+ @extend %article;
+ margin: 0;
+ }
+
+ picture img {
+ max-width: 25rem;
+ }
}
@media (max-width: 875px) {
- main {
- margin: 20px;
- }
-
- header {
- div.title {
- h1 {
- font-size: 5rem;
- }
- }
-
- nav ul {
- li {
- font-size: 1.5rem;
- }
- }
- }
-
- section#about {
- picture img {
- max-width: 20rem;
- }
- }
+ main {
+ margin: 20px;
+ }
+
+ header {
+ div.title {
+ h1 {
+ font-size: 5rem;
+ }
+ }
+
+ nav ul {
+ li {
+ font-size: 1.5rem;
+ }
+ }
+ }
+
+ section#about {
+ picture img {
+ max-width: 20rem;
+ }
+ }
}
-
-
@media (max-width: 715px) {
- main {
- margin: 20px;
- }
-
- header {
- margin-bottom: 0;
-
- grid-template-columns: 1fr;
- grid-template-areas:
- "image"
- "title"
- "nav";
-
- div.title {
- margin-bottom: 2rem;
- }
-
- nav {
- ul {
- align-items: initial;
- }
- }
- }
-
- section#about {
- margin-top: -15vh;
- flex-direction: column-reverse;
- gap: 2rem;
-
- picture {
- z-index: -1;
- display: flex;
- justify-content: end;
- padding-right: 1vw;
- img {
- max-width: 60vw;
- }
- }
- }
+ main {
+ margin: 20px;
+ }
+
+ header {
+ margin-bottom: 0;
+
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "image"
+ "title"
+ "nav";
+
+ div.title {
+ margin-bottom: 2rem;
+ }
+
+ nav {
+ ul {
+ align-items: initial;
+ }
+ }
+ }
+
+ section#about {
+ margin-top: -15vh;
+ flex-direction: column-reverse;
+ gap: 2rem;
+
+ picture {
+ z-index: -1;
+ display: flex;
+ justify-content: end;
+ padding-right: 1vw;
+ img {
+ max-width: 60vw;
+ }
+ }
+ }
}
@media (max-width: 515px) {
- header div.title h1 {
- font-size: 4rem;
- }
+ header div.title h1 {
+ font-size: 4rem;
+ }
}
@media (max-width: 400px) {
- header div.title h1 {
- font-size: 3rem;
- }
+ header div.title h1 {
+ font-size: 3rem;
+ }
}
-
diff --git a/src/styles/lib/_article.scss b/src/styles/lib/_article.scss
index 5ec843d..795120b 100644
--- a/src/styles/lib/_article.scss
+++ b/src/styles/lib/_article.scss
@@ -1,104 +1,103 @@
%article {
- line-height: 1.5;
- margin: 0 20vw;
- margin-bottom: 80px;
-
- h2 {
- line-height: initial;
- font-family: var(--font-heading);
- font-weight: 350;
- font-size: 3rem;
- letter-spacing: -0.06em;
- }
-
- h3 {
- opacity: 65%;
- font-family: var(--font-code);
- font-size: 1.25rem;
- margin-bottom: 0.2em;
- text-transform: uppercase;
- }
-
- blockquote {
- border-left: 5px solid color-mix(in srgb, var(--text-color), transparent 90%);
- padding-left: 20px;
- color: color-mix(in srgb, var(--text-color), transparent 30%);
-
- // no bottom margins within blockquotes
- p:not(:last-child) {
- margin-bottom: 0
- }
- }
-
- ol {
- list-style: numbered;
-
- li {
- font-size: 1.5rem;
- // font-family: var(--font-heading);
-
- &::marker {
-
- font-family: 'Inter Variable'
- }
- }
- }
-
- p {
- margin-bottom: 1em;
- }
-
- em {
- // this is precise because I'm trying to meet APCA
- color: color-mix(in srgb, var(--text-color), transparent 29%);
- font-variation-settings: 'slnt' 30;
- }
-
- strong, em > strong {
- color: var(--text-color);
- font-weight: 600;
- }
-
- a {
- color: var(--text-color);
- }
-
- small {
- color: color-mix(in srgb, var(--text-color), transparent 30%);
- font-size: 0.8em;
- }
-
- pre:has(code) {
- border-radius: 5px;
- font-family: var(--font-code);
- padding: 2rem;
- background-color: var(--foreground-color) !important;
- color: var(--text-color) !important;
- }
-
- hr {
- margin: 3rem auto 2rem auto;
- width: 60%;
- opacity: 65%;
- }
-
- @media (max-width: 775px) {
- & {
- margin-left: 0;
- margin-right: 0;
- }
- }
-
- @media (max-width: 515px) {
- h2 {
- font-size: 2.5rem;
- }
- }
-
+ line-height: 1.5;
+ margin: 0 20vw;
+ margin-bottom: 80px;
+
+ h2 {
+ line-height: initial;
+ font-family: var(--font-heading);
+ font-weight: 350;
+ font-size: 3rem;
+ letter-spacing: -0.06em;
+ }
+
+ h3 {
+ opacity: 65%;
+ font-family: var(--font-code);
+ font-size: 1.25rem;
+ margin-bottom: 0.2em;
+ text-transform: uppercase;
+ }
+
+ blockquote {
+ border-left: 5px solid color-mix(in srgb, var(--text-color), transparent 90%);
+ padding-left: 20px;
+ color: color-mix(in srgb, var(--text-color), transparent 30%);
+
+ // no bottom margins within blockquotes
+ p:not(:last-child) {
+ margin-bottom: 0;
+ }
+ }
+
+ ol {
+ list-style: numbered;
+
+ li {
+ font-size: 1.5rem;
+ // font-family: var(--font-heading);
+
+ &::marker {
+ font-family: "Inter Variable";
+ }
+ }
+ }
+
+ p {
+ margin-bottom: 1em;
+ }
+
+ em {
+ // this is precise because I'm trying to meet APCA
+ color: color-mix(in srgb, var(--text-color), transparent 29%);
+ font-variation-settings: "slnt" 30;
+ }
+
+ strong,
+ em > strong {
+ color: var(--text-color);
+ font-weight: 600;
+ }
+
+ a {
+ color: var(--text-color);
+ }
+
+ small {
+ color: color-mix(in srgb, var(--text-color), transparent 30%);
+ font-size: 0.8em;
+ }
+
+ pre:has(code) {
+ border-radius: 5px;
+ font-family: var(--font-code);
+ padding: 2rem;
+ background-color: var(--foreground-color) !important;
+ color: var(--text-color) !important;
+ }
+
+ hr {
+ margin: 3rem auto 2rem auto;
+ width: 60%;
+ opacity: 65%;
+ }
+
+ @media (max-width: 775px) {
+ & {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+
+ @media (max-width: 515px) {
+ h2 {
+ font-size: 2.5rem;
+ }
+ }
}
@counter-style numbered {
- system: extends decimal;
- pad: 2 "0";
- suffix: " − ";
-}
\ No newline at end of file
+ system: extends decimal;
+ pad: 2 "0";
+ suffix: " − ";
+}
diff --git a/src/styles/lib/_font.scss b/src/styles/lib/_font.scss
index c5f236f..795464a 100644
--- a/src/styles/lib/_font.scss
+++ b/src/styles/lib/_font.scss
@@ -1,59 +1,66 @@
@font-face {
- font-family: 'Inter Variable';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- font-feature-settings: 'liga' 1, 'calt' 1, 'cv11' 1;
- src: url("/font/inter/inter-variable.woff2") format("woff2");
+ font-family: "Inter Variable";
+ font-style: normal;
+ font-weight: 100 900;
+ font-display: swap;
+ font-feature-settings:
+ "liga" 1,
+ "calt" 1,
+ "cv11" 1;
+ src: url("/font/inter/inter-variable.woff2") format("woff2");
}
@font-face {
- font-family: 'Inter Variable';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- font-feature-settings: 'liga' 1, 'calt' 1, 'cv11' 1;
- src: url("/font/inter/inter-variable-italic.woff2") format("woff2");
+ font-family: "Inter Variable";
+ font-style: italic;
+ font-weight: 100 900;
+ font-display: swap;
+ font-feature-settings:
+ "liga" 1,
+ "calt" 1,
+ "cv11" 1;
+ src: url("/font/inter/inter-variable-italic.woff2") format("woff2");
}
-
@font-face {
- font-family: 'IBM Plex Mono Variable';
- font-style: normal;
- font-weight: 100 900;
- font-display: swap;
- src: url("/font/ibm-plex-mono/ibm-plex-mono-variable.woff2") format("woff2");
+ font-family: "IBM Plex Mono Variable";
+ font-style: normal;
+ font-weight: 100 900;
+ font-display: swap;
+ src: url("/font/ibm-plex-mono/ibm-plex-mono-variable.woff2") format("woff2");
}
@font-face {
- font-family: 'IBM Plex Mono Variable';
- font-style: italic;
- font-weight: 100 900;
- font-display: swap;
- src: url("/font/ibm-plex-mono/ibm-plex-mono-variable-italic.woff2") format("woff2");
+ font-family: "IBM Plex Mono Variable";
+ font-style: italic;
+ font-weight: 100 900;
+ font-display: swap;
+ src: url("/font/ibm-plex-mono/ibm-plex-mono-variable-italic.woff2") format("woff2");
}
-
@font-face {
- font-family: 'PP Neue Machina Inktrap Variable';
- font-style: normal italic;
- font-weight: 100 900;
- font-display: swap;
- font-feature-settings: 'ss01' 1, 'ss02' 1, 'ss05' 1, 'ss09' 1, 'ss10' 1;
- // alt a, alt r, alt g, loopy braces, high contrast y
- src: url("https://pangrampangram.com/cdn/shop/files/PPNeueMachina-InktrapVariable.woff")
- format("woff2");
- // Sorry for the hotlink, but I think there's not quite any other way to do this that doesn't involve uploading
- // the font to GitHub.
- // also, it's named woff, but it's actually a woff2 for some reason.
+ font-family: "PP Neue Machina Inktrap Variable";
+ font-style: normal italic;
+ font-weight: 100 900;
+ font-display: swap;
+ font-feature-settings:
+ "ss01" 1,
+ "ss02" 1,
+ "ss05" 1,
+ "ss09" 1,
+ "ss10" 1;
+ // alt a, alt r, alt g, loopy braces, high contrast y
+ src: url("https://pangrampangram.com/cdn/shop/files/PPNeueMachina-InktrapVariable.woff") format("woff2");
+ // Sorry for the hotlink, but I think there's not quite any other way to do this that doesn't involve uploading
+ // the font to GitHub.
+ // also, it's named woff, but it's actually a woff2 for some reason.
}
@font-face {
- font-family: 'PP Telegraf Variable';
- font-style: normal italic;
- font-weight: 100 900;
- font-display: swap;
- font-variation-settings: 'slnt' 0;
- src: url("https://pangrampangram.com/cdn/shop/files/PPTelegraf-Variable.woff2")
- format("woff2");
+ font-family: "PP Telegraf Variable";
+ font-style: normal italic;
+ font-weight: 100 900;
+ font-display: swap;
+ font-variation-settings: "slnt" 0;
+ src: url("https://pangrampangram.com/cdn/shop/files/PPTelegraf-Variable.woff2") format("woff2");
}
diff --git a/src/styles/lib/_var.scss b/src/styles/lib/_var.scss
index 2df4f3d..fdb73f3 100644
--- a/src/styles/lib/_var.scss
+++ b/src/styles/lib/_var.scss
@@ -1,14 +1,14 @@
@use "font.scss";
:root {
- color-scheme: light dark;
-
- --width: 1125px;
- --font-heading: 'PP Neue Machina Inktrap Variable', sans-serif;
- --font-body: 'PP Telegraf Variable', sans-serif;
- --font-tnum: 'Inter Variable', sans-serif;
- --font-code: 'IBM Plex Mono Variable', monospace;
- --font-scale: 1em;
+ color-scheme: light dark;
+
+ --width: 1125px;
+ --font-heading: "PP Neue Machina Inktrap Variable", sans-serif;
+ --font-body: "PP Telegraf Variable", sans-serif;
+ --font-tnum: "Inter Variable", sans-serif;
+ --font-code: "IBM Plex Mono Variable", monospace;
+ --font-scale: 1em;
--background-color: light-dark(#faf4ed, #0a0a0a);
--foreground-color: light-dark(#f2e9e1, #1b1a1a);
@@ -21,26 +21,93 @@
--blockquote-color: light-dark(#dcdfe6, #373434);
}
-
// every website gotta have one of these
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
margin: 0;
padding: 0;
border: 0;
@@ -49,22 +116,35 @@ time, mark, audio, video {
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
display: block;
}
body {
line-height: 1;
}
-ol, ul {
+ol,
+ul {
list-style: none;
}
-blockquote, q {
+blockquote,
+q {
quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: "";
content: none;
}
table {
@@ -72,11 +152,10 @@ table {
border-spacing: 0;
}
-
// safari compatibility (I HATE YOU)
// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-variation-settings#browser_compatibility
* {
- font-variation-settings: 'slnt' 0;
+ font-variation-settings: "slnt" 0;
}
*::selection {
diff --git a/src/styles/logbook.scss b/src/styles/logbook.scss
index 5275b61..e99f15b 100644
--- a/src/styles/logbook.scss
+++ b/src/styles/logbook.scss
@@ -1,103 +1,98 @@
@use "lib/_var";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
}
main {
- margin: 20px;
+ margin: 20px;
}
p.warning {
-
- strong {
- font-weight: 600;
- }
- margin-bottom: 5vh;
- line-height: 1.5;
- font-size: 1.125rem;
- border-left: 5px solid color-mix(in srgb, var(--text-color), transparent 90%);
- padding-left: 20px;
+ strong {
+ font-weight: 600;
+ }
+ margin-bottom: 5vh;
+ line-height: 1.5;
+ font-size: 1.125rem;
+ border-left: 5px solid color-mix(in srgb, var(--text-color), transparent 90%);
+ padding-left: 20px;
}
header {
- margin-bottom: 1rem;
+ margin-bottom: 1rem;
}
ul.post-list {
- display: grid;
- grid-template-columns: 1fr 15rem;
- row-gap: 0.8rem;
- column-gap: 1rem;
- align-items: last baseline;
-
- li {
- display: contents;
- font-size: 1.5rem;
- font-weight: 400;
- // font-family: var(--font-heading);
-
- span.published-date {
- text-wrap-mode: nowrap;
- display: block;
- }
-
- span.post-title {
- display: flex;
- align-items: baseline;
- gap: 1rem;
-
- a {
- color: var(--text-color);
- }
-
- &::after {
- flex: 1;
- content: "";
- border-bottom: 1px solid var(--text-color);
- transform: translateY(0.12em);
- }
- }
-
- }
+ display: grid;
+ grid-template-columns: 1fr 15rem;
+ row-gap: 0.8rem;
+ column-gap: 1rem;
+ align-items: last baseline;
+
+ li {
+ display: contents;
+ font-size: 1.5rem;
+ font-weight: 400;
+ // font-family: var(--font-heading);
+
+ span.published-date {
+ text-wrap-mode: nowrap;
+ display: block;
+ }
+
+ span.post-title {
+ display: flex;
+ align-items: baseline;
+ gap: 1rem;
+
+ a {
+ color: var(--text-color);
+ }
+
+ &::after {
+ flex: 1;
+ content: "";
+ border-bottom: 1px solid var(--text-color);
+ transform: translateY(0.12em);
+ }
+ }
+ }
}
@media (max-width: 600px) {
-
-
- h2 {
- font-size: 2rem;
- }
-
- ul.post-list {
- grid-template-columns: 1fr;
- grid-template-rows: auto;
- gap: 1.5rem;
-
- li {
- display: flex;
- flex-direction: column-reverse;
-
- // overflow: hidden;
- // text-overflow: ellipsis;
-
- span.published-date {
- opacity: 65%;
- display: inline;
- font-size: 1rem;
- }
-
- span.post-title {
- display: block;
- font-size: 1.25rem;
-
- &::after {
- display: none;
- }
- }
- }
-
- }
-}
\ No newline at end of file
+ h2 {
+ font-size: 2rem;
+ }
+
+ ul.post-list {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ gap: 1.5rem;
+
+ li {
+ display: flex;
+ flex-direction: column-reverse;
+
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+
+ span.published-date {
+ opacity: 65%;
+ display: inline;
+ font-size: 1rem;
+ }
+
+ span.post-title {
+ display: block;
+ font-size: 1.25rem;
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/now.scss b/src/styles/now.scss
index 37dd51d..fc94a0a 100644
--- a/src/styles/now.scss
+++ b/src/styles/now.scss
@@ -2,19 +2,19 @@
@use "lib/article";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
}
main {
- margin: 20px;
+ margin: 20px;
}
article {
- @extend %article;
+ @extend %article;
- section#also:not(:has(p)) {
- display: none;
- }
-}
\ No newline at end of file
+ section#also:not(:has(p)) {
+ display: none;
+ }
+}
diff --git a/src/styles/post.scss b/src/styles/post.scss
index 004ee67..db013f8 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -2,113 +2,112 @@
@use "lib/article";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
}
main {
- margin: 20px;
+ margin: 20px;
}
header {
- display: grid;
- grid-template-columns: 1fr 15rem;
- grid-template-rows: repeat(3, 1fr);
- grid-template-areas:
- "nav nav"
- "title title"
- "title title";
- row-gap: 40px;
- margin-bottom: 10vh;
-
- div.title {
- grid-area: title;
- display: grid;
- grid-template-columns: subgrid;
- grid-template-rows: subgrid;
- grid-template-areas:
- "heading published-date-meta"
- "heading updated-date-meta";
-
- align-items: end;
-
- div.heading {
- grid-area: heading;
-
- span.type {
- font-family: var(--font-code);
- opacity: 65%;
- text-transform: uppercase;
- display: block;
- margin-bottom: 0.25em;
- }
-
- h1 {
- font-family: var(--font-heading);
- font-weight: 300;
- font-size: 4.5rem;
- line-height: 1;
- letter-spacing: -0.08em;
- }
-
- p.description {
- opacity: 80%;
- }
- }
-
- div.published-date-meta {
- grid-area: published-date-meta;
- }
-
- div.updated-date-meta {
- grid-area: updated-date-meta;
- }
-
-
- div.published-date-meta, div.updated-date-meta {
- span {
- display: block;
- }
-
- span.date {
- font-family: var(--font-heading);
- font-weight: 300;
- }
-
- span:not(.date) {
- font-family: var(--font-code);
- text-transform: uppercase;
- opacity: 65%;
- margin-bottom: 0.25em;
- }
- }
-
- }
+ display: grid;
+ grid-template-columns: 1fr 15rem;
+ grid-template-rows: repeat(3, 1fr);
+ grid-template-areas:
+ "nav nav"
+ "title title"
+ "title title";
+ row-gap: 40px;
+ margin-bottom: 10vh;
+
+ div.title {
+ grid-area: title;
+ display: grid;
+ grid-template-columns: subgrid;
+ grid-template-rows: subgrid;
+ grid-template-areas:
+ "heading published-date-meta"
+ "heading updated-date-meta";
+
+ align-items: end;
+
+ div.heading {
+ grid-area: heading;
+
+ span.type {
+ font-family: var(--font-code);
+ opacity: 65%;
+ text-transform: uppercase;
+ display: block;
+ margin-bottom: 0.25em;
+ }
+
+ h1 {
+ font-family: var(--font-heading);
+ font-weight: 300;
+ font-size: 4.5rem;
+ line-height: 1;
+ letter-spacing: -0.08em;
+ }
+
+ p.description {
+ opacity: 80%;
+ }
+ }
+
+ div.published-date-meta {
+ grid-area: published-date-meta;
+ }
+
+ div.updated-date-meta {
+ grid-area: updated-date-meta;
+ }
+
+ div.published-date-meta,
+ div.updated-date-meta {
+ span {
+ display: block;
+ }
+
+ span.date {
+ font-family: var(--font-heading);
+ font-weight: 300;
+ }
+
+ span:not(.date) {
+ font-family: var(--font-code);
+ text-transform: uppercase;
+ opacity: 65%;
+ margin-bottom: 0.25em;
+ }
+ }
+ }
}
article {
- @extend %article;
+ @extend %article;
}
@media (max-width: 775px) {
- header {
- grid-template-columns: 1fr;
- grid-template-rows: auto;
-
- div.title {
- grid-template-columns: 1fr;
- grid-template-rows: auto;
- row-gap: 1rem;
- grid-template-areas:
- "heading"
- "heading"
- "published-date-meta"
- "updated-date-meta";
-
- div.heading h1 {
- font-size: 3.5rem;
- }
- }
- }
-}
\ No newline at end of file
+ header {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+
+ div.title {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto;
+ row-gap: 1rem;
+ grid-template-areas:
+ "heading"
+ "heading"
+ "published-date-meta"
+ "updated-date-meta";
+
+ div.heading h1 {
+ font-size: 3.5rem;
+ }
+ }
+ }
+}
diff --git a/src/styles/projects.scss b/src/styles/projects.scss
index 4eadf3d..2ebc718 100644
--- a/src/styles/projects.scss
+++ b/src/styles/projects.scss
@@ -2,16 +2,15 @@
@use "lib/article";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
}
main {
- margin: 20px;
+ margin: 20px;
}
-
article {
- @extend %article;
-}
\ No newline at end of file
+ @extend %article;
+}
diff --git a/src/styles/stickerbook.scss b/src/styles/stickerbook.scss
index 59476dd..c509912 100644
--- a/src/styles/stickerbook.scss
+++ b/src/styles/stickerbook.scss
@@ -1,28 +1,27 @@
@use "lib/var";
-@use 'sass:math';
+@use "sass:math";
body {
- background-color: var(--background-color);
- font-family: var(--font-body);
- color: var(--text-color);
+ background-color: var(--background-color);
+ font-family: var(--font-body);
+ color: var(--text-color);
}
main {
- margin: 20px;
+ margin: 20px;
}
-
section.stickers {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
- gap: 1rem;
- justify-content: center;
- justify-items: center;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+ gap: 1rem;
+ justify-content: center;
+ justify-items: center;
- img {
- max-width: 15rem;
- max-height: 20rem;
- }
+ img {
+ max-width: 15rem;
+ max-height: 20rem;
+ }
}
// @media (max-width: 505px) {
@@ -30,4 +29,4 @@ section.stickers {
// max-width: 8rem;
// max-height: 10rem;
// }
-// }
\ No newline at end of file
+// }
diff --git a/tsconfig.json b/tsconfig.json
index 99df2e6..3982b4c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
{
- "extends": "astro/tsconfigs/base",
- "compilerOptions": {
- "jsx": "react-jsx",
- "jsxImportSource": "preact"
- }
-}
\ No newline at end of file
+ "extends": "astro/tsconfigs/base",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "preact"
+ }
+}
diff --git a/wrangler.jsonc b/wrangler.jsonc
index 6e77141..ac83cf8 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -1,8 +1,8 @@
{
- "name": "angelcube-dev",
- "compatibility_date": "2026-10-09",
- "assets": {
- "directory": "./dist"
- },
- "preview_urls": true
-}
\ No newline at end of file
+ "name": "angelcube-dev",
+ "compatibility_date": "2026-10-09",
+ "assets": {
+ "directory": "./dist"
+ },
+ "preview_urls": true
+}