From 9514f24c805b5c7e30db053b119219ea02f015d9 Mon Sep 17 00:00:00 2001 From: Angel Wang Date: Tue, 25 Aug 2026 16:54:46 -0600 Subject: [PATCH] post: easier to love you as well as various styling changes --- src/pages/journal/easier-to-love-you.mdx | 29 ++++++++++++++++++++++++ src/pages/journal/index.astro | 29 +++++++++++++++++++++++- src/styles/journal.scss | 21 ++++++++++++++++- src/styles/lib/_var.scss | 1 + src/styles/post.scss | 17 +++++++++++--- 5 files changed, 92 insertions(+), 5 deletions(-) create mode 100644 src/pages/journal/easier-to-love-you.mdx diff --git a/src/pages/journal/easier-to-love-you.mdx b/src/pages/journal/easier-to-love-you.mdx new file mode 100644 index 0000000..0f49ff9 --- /dev/null +++ b/src/pages/journal/easier-to-love-you.mdx @@ -0,0 +1,29 @@ +--- +layout: ../../layouts/post.astro +title: "easier to love you" +written_date: "2026-05-07" +updated_date: "2026-07-22" +description: "wait," +type: "Writings" +--- + +``` +&&&&&&&&&&&&&&&&&&&&&&&&&& (hello?) +&&&&&& wait, +&&& don't hang up yet— +I'm still writing these broken melodies &&&&&&&&&& +&&&&&&&& dedicated to you, like +&&&&& fractured seaglass bent the rays of the sun— +&& and I know it's stupid, but +don't apologize, I've heard enough && +&&&&&&&&& can't we stay like this a little longer? + I wanted to show you that the sunrises are beautiful, +&&& even though I know you prefer the midnight moon— +& we'll still be best friends no matter what happens. +&&&&&&& don't leave me for some fickle darkness, and +&& &&&&& &&&&& as long as I can hold your hand &&&&&& +&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& I will— +``` + +\ +Originally written for a dear friend's birthday. diff --git a/src/pages/journal/index.astro b/src/pages/journal/index.astro index 4b17072..b94534b 100644 --- a/src/pages/journal/index.astro +++ b/src/pages/journal/index.astro @@ -1,7 +1,27 @@ --- import "../../styles/journal.scss" +import { Temporal } from "temporal-polyfill" + +type PostType = "Ramblings" | "Writings" + const posts = Object.values(import.meta.glob('./*.mdx', { eager: true })); + + +// TODO: do this better but I'm too lazy to +const writings = posts.filter((post: any) => post.frontmatter.type === "Writings").sort((a: any, b: any) => { + const date1 = Temporal.PlainDate.from(a.frontmatter.written_date) + const date2 = Temporal.PlainDate.from(b.frontmatter.written_date) + + return Temporal.PlainDate.compare(date2, date1) +}) + +const ramblings = posts.filter((post: any) => post.frontmatter.type === "Ramblings").sort((a: any, b: any) => { + const date1 = Temporal.PlainDate.from(a.frontmatter.written_date) + const date2 = Temporal.PlainDate.from(b.frontmatter.written_date) + + return Temporal.PlainDate.compare(date2, date1) +}) --- @@ -21,7 +41,14 @@ const posts = Object.values(import.meta.glob('./*.mdx', { eager: true }));

journal →

- {posts.map((post: any) =>
  • {post.frontmatter.title}
    • )} +

    writings

    + +

    ramblings

    +
    \ No newline at end of file diff --git a/src/styles/journal.scss b/src/styles/journal.scss index be1bf7e..48a0efe 100644 --- a/src/styles/journal.scss +++ b/src/styles/journal.scss @@ -7,9 +7,28 @@ body { h1 { font-family: var(--font-heading); + font-weight: 300; font-size: 2rem; + margin-bottom: 0.5em; +} + +h2 { + font-size: 1.5rem; + margin: 0.5em 0; +} + +ul { + list-style: dash; + margin: 0.5rem; +} + +@counter-style dash { + system: cyclic; + symbols: "\2043"; + suffix: " "; } main { margin: 20px; -} \ No newline at end of file +} + diff --git a/src/styles/lib/_var.scss b/src/styles/lib/_var.scss index c6a6fc4..e875ff8 100644 --- a/src/styles/lib/_var.scss +++ b/src/styles/lib/_var.scss @@ -10,6 +10,7 @@ --font-scale: 1em; --background-color: light-dark(#faf4ed, #212720); + --foreground-color: light-dark(#f2e9e1, #2a3029); --title-color: light-dark(#242424, #faf4ed); --heading-color: light-dark(#242424, #faf4ed); --text-color: light-dark(#212720, #faf4ed); diff --git a/src/styles/post.scss b/src/styles/post.scss index 5595335..8ddd8b6 100644 --- a/src/styles/post.scss +++ b/src/styles/post.scss @@ -70,7 +70,8 @@ header { font-family: var(--font-heading); font-weight: 300; font-size: 4.5rem; - letter-spacing: -0.06em; + line-height: 0.9; + letter-spacing: -0.08em; } p.description { @@ -157,6 +158,14 @@ article { 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; + } } @@ -179,8 +188,8 @@ article { } article { - margin-left: calc(5vw + 3rem); - margin-right: 5vw; + margin-left: 0; + margin-right: 0; } } @@ -195,6 +204,8 @@ article { "name"; span.back { + font-family: var(--font-code); + text-transform: uppercase; font-size: 1rem; opacity: 65%; } -- 2.51.2