From b2d7cc7231f3051cdcac32e8fbe0935a6b0a60ec Mon Sep 17 00:00:00 2001
From: Angel Wang <angel@angelcube.dev>
Date: Sun, 2 Aug 2026 11:42:26 -0600
Subject: [PATCH] feat: reset for redesign

---
 .github/workflows/deploy.yml  |  41 ------------
 src/components/entry.astro    |  10 ---
 src/components/footer.astro   |  17 -----
 src/components/header.astro   |  17 -----
 src/layouts/layout.astro      |  16 -----
 src/layouts/meta.astro        |   4 +-
 src/layouts/post.astro        |  40 ++++++++++++
 src/pages/404.astro           |  19 ------
 src/pages/about.astro         |  42 ------------
 src/pages/index.astro         |  22 ++-----
 src/pages/journal/index.astro |  13 ++++
 src/pages/projects.astro      |  36 -----------
 src/scripts/LocalTime.tsx     |  25 --------
 src/scripts/NowPlaying.tsx    | 116 ----------------------------------
 src/styles/404.scss           |  58 -----------------
 src/styles/_font.scss         |   8 +++
 src/styles/_var.scss          | 103 +++++++++++++++---------------
 src/styles/about.scss         |  74 ----------------------
 src/styles/footer.scss        |  44 -------------
 src/styles/header.scss        |  54 ----------------
 src/styles/index.scss         |  94 ++-------------------------
 src/styles/journal.scss       |  11 ++++
 src/styles/post.scss          |  92 +++++++++++++++++++++++++++
 src/styles/projects.scss      |  50 ---------------
 24 files changed, 229 insertions(+), 777 deletions(-)
 delete mode 100644 .github/workflows/deploy.yml
 delete mode 100644 src/components/entry.astro
 delete mode 100644 src/components/footer.astro
 delete mode 100644 src/components/header.astro
 delete mode 100644 src/layouts/layout.astro
 create mode 100644 src/layouts/post.astro
 delete mode 100644 src/pages/404.astro
 delete mode 100644 src/pages/about.astro
 create mode 100644 src/pages/journal/index.astro
 delete mode 100644 src/pages/projects.astro
 delete mode 100644 src/scripts/LocalTime.tsx
 delete mode 100644 src/scripts/NowPlaying.tsx
 delete mode 100644 src/styles/404.scss
 delete mode 100644 src/styles/about.scss
 delete mode 100644 src/styles/footer.scss
 delete mode 100644 src/styles/header.scss
 create mode 100644 src/styles/journal.scss
 create mode 100644 src/styles/post.scss
 delete mode 100644 src/styles/projects.scss

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
deleted file mode 100644
index 1a1bb8a..0000000
--- a/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,41 +0,0 @@
-name: deploy
-
-on:
-  # Trigger the workflow every time you push to the `main` branch
-  # Using a different branch name? Replace `main` with your branch’s name
-  push:
-    branches: [ main ]
-  # Allows you to run this workflow manually from the Actions tab on GitHub.
-  workflow_dispatch:
-
-# Allow this job to clone the repo and create a page deployment
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    env:
-      LASTFM_KEY: ${{ secrets.LASTFM_KEY }}
-    steps:
-      - name: checkout
-        uses: actions/checkout@v6
-      - name: build astro
-        uses: withastro/action@v6
-        # with:
-          # path: . # The root location of your Astro project inside the repository. (optional)
-          # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
-          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
-
-  deploy:
-    needs: build
-    runs-on: ubuntu-latest
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: deploy
-        id: deployment
-        uses: actions/deploy-pages@v4
\ No newline at end of file
diff --git a/src/components/entry.astro b/src/components/entry.astro
deleted file mode 100644
index 5858686..0000000
--- a/src/components/entry.astro
+++ /dev/null
@@ -1,10 +0,0 @@
----
-const { title, description, href } = Astro.props
----
-
-<div>
-    <a href={href}>
-        <h3>{title}</h3>
-    </a>
-    <p>{description}</p>
-</div>
\ No newline at end of file
diff --git a/src/components/footer.astro b/src/components/footer.astro
deleted file mode 100644
index 1412da0..0000000
--- a/src/components/footer.astro
+++ /dev/null
@@ -1,17 +0,0 @@
----
-import "../styles/footer.scss"
-import {SparkleFillIcon} from '@primer/octicons-react'
-import {Temporal} from 'temporal-polyfill'
-
----
-
-<footer>
-    <hr>
-    <div class="footer-caption">
-        <SparkleFillIcon size={20} className="logo"/>
-        <span>&copy; {Temporal.Now.plainDateISO().year} Angel Wang</span>
-        <span>Computer [for] human.</span>
-    </div>
-    <img src="/logotype.svg" alt="angelcube" />
-
-</footer>
diff --git a/src/components/header.astro b/src/components/header.astro
deleted file mode 100644
index 344ebd9..0000000
--- a/src/components/header.astro
+++ /dev/null
@@ -1,17 +0,0 @@
----
-import "../styles/header.scss"
-import {SparkleFillIcon} from '@primer/octicons-react'
-const { title } = Astro.props
----
-<header>
-    <div class="title">
-        <h1>{title}</h1>
-    </div>
-    <nav>
-        <a href="/" aria-label="Home">
-            <SparkleFillIcon size={32} className="header-icon"/>
-        </a>
-        <a href="/about">About</a>
-        <a href="/projects">Projects</a>
-    </nav>
-</header>
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
deleted file mode 100644
index 452cd48..0000000
--- a/src/layouts/layout.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-import Meta from '../layouts/meta.astro'
-import Header from '../components/header.astro'
-import Footer from "../components/footer.astro"
-const { title } = Astro.props
----
-
-<Meta>
-	<body>
-		<main>
-			<Header title={title}/>
-			<slot />
-		</main>
-		<Footer />
-	</body>
-</Meta>
diff --git a/src/layouts/meta.astro b/src/layouts/meta.astro
index 452ec13..68af1ce 100644
--- a/src/layouts/meta.astro
+++ b/src/layouts/meta.astro
@@ -33,5 +33,7 @@
 		</script>
 	</head>
 
-	<slot />
+	<body>
+		<slot />
+	</body>
 </html>
diff --git a/src/layouts/post.astro b/src/layouts/post.astro
new file mode 100644
index 0000000..6b084b4
--- /dev/null
+++ b/src/layouts/post.astro
@@ -0,0 +1,40 @@
+---
+type PostType = "Album Review" | "Book Review" | "Misc"
+
+type Frontmatter = {
+    title: string,
+    type: PostType,
+    date: string
+}
+
+import Meta from "./meta.astro"
+import "../styles/post.scss"
+import { Temporal } from "temporal-polyfill"
+
+const frontmatter = Astro.props.frontmatter as Frontmatter
+---
+<Meta>
+    <main>
+        <header>
+            <nav>
+                <span class="back">
+                    <a href="/journal">← back to journal</a>
+                </span>
+                <span class="name">angelcube ✦</span>
+            </nav>
+            <div class="title">
+                <div class="heading">
+                    <span class="type">{frontmatter.type}</span>
+                    <h1>{frontmatter.title}</h1>
+                </div>
+                <div class="date-meta">
+                    <span>Written</span>
+                    <span class="date">{Temporal.PlainDate.from(frontmatter.date).toLocaleString("en-CA", {year: "numeric", month: "long", day: "numeric"})}</span>
+                </div>
+            </div>
+        </header>
+        <article>
+            <slot />
+        </article>
+    </main>
+</Meta>
\ No newline at end of file
diff --git a/src/pages/404.astro b/src/pages/404.astro
deleted file mode 100644
index 0eb7cac..0000000
--- a/src/pages/404.astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-import Meta from "../layouts/meta.astro";
-import {SparkleFillIcon} from '@primer/octicons-react'
-import "../styles/404.scss"
----
-<Meta>
-    <main>
-        <div class="title">
-            <h1>This is not the page you are looking for.</h1>
-        </div>
-        <div class="return-home">
-            <span>
-                <SparkleFillIcon size={32} className="header-icon"/>
-                <a href="/">Return home?</a>
-            </span>
-
-        </div>
-    </main>
-</Meta>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
deleted file mode 100644
index 5b68c89..0000000
--- a/src/pages/about.astro
+++ /dev/null
@@ -1,42 +0,0 @@
----
-import Layout from "../layouts/layout.astro";
-import "../styles/about.scss";
----
-
-<Layout title="About me">
-    <div class="columns">
-        <div class="column left">
-            <p class="big">
-                My name is Angel Wang. I'm a queer Chinese tinkergirl living in Alberta, Canada. I write code and music to
-                stop myself from going insane, with the goal of creating → computer [for] human.
-            </p>
-            <p class="big">
-                The songs and software I never wrote end up in the garbage can that is my Tumblr. Check it out if you
-                like half-baked poetry.
-            </p>
-            <p class="big">
-                Outside of this, I like video games and typography. Sometimes I call myself a designer. Sometimes I'll
-                make something worth noting. Consistency is overrated.
-            </p>
-            <hr>
-            <h2>This website?</h2>
-            <p>
-                This website was handwritten in Astro and Sass, with a sprinkling of React. It's hosted on GitHub Pages—
-                you can find the source <a href="https://github.com/weightedangelcube/web">here</a>. The title font is
-                <a href="https://pangrampangram.com/products/neue-machina-collection">PP Neue Machina</a> by Pangram
-                Pangram, the code font is <a href="https://github.com/RedHatOfficial/RedHatFont">Red Hat Mono</a> by 
-                MCKL, and the body font is <a href="https://rsms.me/inter/">Inter</a> by Rasmus Andersson—the latter
-                from which the layout of this site was unceremoniously plagiarized. Many thanks (and apologies) to him.  
-            </p>
-            <h2>My GPG key?</h2>
-            <p>
-                <code>BDAAE38FE1693BAE29871EB45EE035609EDD78F1</code>.
-            </p>
-        </div>
-        <div class="column right">
-            <a class="big" href="https://insidethecube.tumblr.com/">Tumblr @insidethecube</a>
-            <a class="big" href="https://github.com/weightedangelcube">GitHub @weightedangelcube</a>
-            <a class="big" href="https://www.youtube.com/@weightedangelcube">YouTube @weightedangelcube</a>
-        </div>
-    </div>
-</Layout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4763a92..3ac8540 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,19 +1,7 @@
 ---
-import Layout from "../layouts/layout.astro";
-import "../styles/index.scss";
-import NowPlaying from "../scripts/NowPlaying";
-import LocalTime from "../scripts/LocalTime";
+import Meta from "../layouts/meta.astro";
 ---
-<Layout title="Hi, I'm angelcube">
-    <div class="columns">
-        <div class="column left">
-            <p class="big">
-                I'm a computer human living in Alberta, Canada. I write code and music to stop myself from going insane.
-            </p>
-        </div>
-        <div class="column right">
-            <LocalTime client:only="react"/>
-            <NowPlaying client:only="react" />
-        </div>
-    </div>
-</Layout>
\ No newline at end of file
+<Meta>
+    <p>This site is currently a work in progress. - Angel, Aug 1 2026</p>
+    <p>If it's been a ridiculously long amount of time since the date above, please go bug Angel at <code>angel@angelcube.dev</code>.</p>
+</Meta>
\ No newline at end of file
diff --git a/src/pages/journal/index.astro b/src/pages/journal/index.astro
new file mode 100644
index 0000000..37af622
--- /dev/null
+++ b/src/pages/journal/index.astro
@@ -0,0 +1,13 @@
+---
+import Meta from "../../layouts/meta.astro"
+import "../../styles/journal.scss"
+
+const posts = Object.values(import.meta.glob('./*.mdx', { eager: true }));
+---
+
+<Meta>
+    <main>
+        <h1>journal →</h1>
+        {posts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+    </main>
+</Meta>
\ No newline at end of file
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
deleted file mode 100644
index 186fdb0..0000000
--- a/src/pages/projects.astro
+++ /dev/null
@@ -1,36 +0,0 @@
----
-import Layout from "../layouts/layout.astro"
-import Entry from "../components/entry.astro"
-import "../styles/projects.scss"
----
-
-<Layout title="Things I've created">
-    <h2>What I'm working on</h2>
-    <div class="projects-container">
-        <Entry title="cc" 
-               description="A mysterious game by mysterious individuals..." 
-               href="https://github.com/csomethingcollab/cc" />
-        <Entry title="everest: fmod2" 
-               description="A project to merge FMOD 2 support into Celeste mod loader Everest." />
-        <Entry title="on-together discord rpc" 
-               description="A Discord Rich Presence mod for game On-Together." 
-               href="https://github.com/weightedangelcube/ot-discordrpc"/>
-    </div>
-    <hr>
-    <h2>Things I've made</h2>
-    <div class="projects-container">
-        <Entry title="slime origin" 
-               description="An addon for the Minecraft mod Origins that adds a Slime origin."
-               href="https://github.com/weightedangelcube/slime-origin" />
-        <Entry title="pomme" 
-               description="A browser startpage with big, easy-click buttons." 
-               href="https://github.com/weightedangelcube/pomme-page/" />
-    </div>
-    <hr>
-    <h2>Cool open-source contributions</h2>
-    <div class="projects-container">
-        <Entry title="web-scrobbler: chillhop radio" 
-               description="Adds support for Chillhop Radio to Web Scrobbler."
-               href="https://github.com/web-scrobbler/web-scrobbler/pull/5813" />
-    </div>
-</Layout>
diff --git a/src/scripts/LocalTime.tsx b/src/scripts/LocalTime.tsx
deleted file mode 100644
index 85ae076..0000000
--- a/src/scripts/LocalTime.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect, useState } from "react"
-import { Temporal } from "temporal-polyfill"
-
-export default function LocalTime() {
-    const [time, setTime] = useState("")
-    const [timezone, setTimezone] = useState("")
-    const [loading, setLoading] = useState(true)
-
-    useEffect(() => {
-        setInterval(() => {
-            setTime(Temporal.Now.zonedDateTimeISO("America/Edmonton").toPlainDateTime().toLocaleString("en-CA", { hourCycle: "h24" }))
-            setLoading(false);
-
-            setTimezone("UTC" + Temporal.Now.zonedDateTimeISO("America/Edmonton").offset)
-
-        }, 1000)
-    })
-
-    if (loading) return;
-
-    return (
-        <p className="local-time">{time} <sup>{timezone}</sup></p>
-    )
-    
-}
\ No newline at end of file
diff --git a/src/scripts/NowPlaying.tsx b/src/scripts/NowPlaying.tsx
deleted file mode 100644
index e931a19..0000000
--- a/src/scripts/NowPlaying.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useEffect, useState } from "react"
-import { AudioWaveform } from 'lucide-react';
-
-interface TrackData {
-    name: string;
-    album: string;
-    artist: string;
-    URL: string;
-    coverArtURL?: string;
-}
-
-async function fetchTrackData() {
-    let trackData : TrackData = {
-        name: "Unknown",
-        album: "Unknown",
-        artist: "Unknown",
-        URL: "",
-    }
-
-    const listenResponse = await fetch("https://api.listenbrainz.org/1/user/angelcube/playing-now")
-    if (!listenResponse.ok) throw `${listenResponse.status} ${listenResponse.statusText}`
-
-    const listenJSON = await listenResponse.json()
-    if (listenJSON.payload.count == 0) return
-    const rawListenData = listenJSON.payload.listens[0].track_metadata
-
-    trackData.name = rawListenData.track_name
-    trackData.artist = rawListenData.artist_name
-    trackData.album = rawListenData.release_name
-
-    // this needs to be encoded separately—URLSearchParams encodes spaces as "+"
-    let query = encodeURIComponent(`artist:"${rawListenData.artist_name}" AND recording:"${rawListenData.track_name}" ${!rawListenData.release_name ? "" : `AND release:"${rawListenData.release_name}"`}`)
-
-    const metadataLookupParams = new URLSearchParams({
-        fmt: "json",
-        limit: "1"
-    })
-    const metadataLookupResponse = await fetch("https://musicbrainz.org/ws/2/recording/?" + metadataLookupParams + "&query=" + query, {
-        headers: {"User-Agent": "angelcube's ListenBrainz widget/0.0.0 (https://angelcube.dev/)"}
-    })
-    const metadataLookupJSON = await metadataLookupResponse.json()
-
-    if (metadataLookupJSON.recordings.length == 0) {
-        return trackData
-    }
-
-    const metadataLookup = metadataLookupJSON.recordings[0]
-
-    trackData.name = metadataLookup.title
-    trackData.URL = "https://listenbrainz.org/track/" + metadataLookup.id
-
-    trackData.artist = "" // reset this, we set it to Unknown before
-    metadataLookup["artist-credit"].forEach((artistCredit) => {
-        trackData.artist += artistCredit.name
-        if (artistCredit.joinphrase != undefined) trackData.artist += artistCredit.joinphrase
-    });
-
-    // preemptively set this to the first release found
-    trackData.album = metadataLookup.releases[0]["release-group"].title
-    let releaseGroupMBID = metadataLookup.releases[0]["release-group"].id
-
-    // then do a lookup
-    metadataLookup.releases.forEach(release => {
-        if (rawListenData.release_name == release.title) {
-            trackData.album = release["release-group"].title
-            releaseGroupMBID = release["release-group"].id
-        }
-    });
-
-    const coverArtResponse = await fetch(`https://coverartarchive.org/release-group/${releaseGroupMBID}`);
-    if (coverArtResponse.ok) {
-        const coverArtJSON = await coverArtResponse.json();
-        trackData.coverArtURL = coverArtJSON?.images[0].thumbnails.small;
-    }
-
-    return trackData;
-}
-
-export default function NowPlaying() {
-    const [data, setData] = useState({} as TrackData)
-    const [loading, setLoading] = useState(true)
-
-    useEffect(() => {
-        const handleFetch = async () => {
-            const result = await fetchTrackData()
-            setData(result)
-            setLoading(false);
-        }
-        handleFetch()
-    }, [])
-
-    if (loading) {
-        return (
-            <div id="now-playing">
-                <p><i>Loading...</i></p>
-            </div>
-        )
-    }
-    
-    if (!data) { // listening to nothing
-        return
-    } else {
-        return (
-            <div id="now-playing">
-                <p>
-                    <AudioWaveform width="1em" height="1em" strokeWidth={2.5} />
-                    <span> Currently listening to </span>
-                    <span><b>{data.name}</b> by <b>{data.artist}</b> on <b>{data.album}</b>. </span>
-                    <a href={data.URL} target="_blank">↗</a>
-                </p>
-            </div>
-        )
-    }
-
-
-}
\ No newline at end of file
diff --git a/src/styles/404.scss b/src/styles/404.scss
deleted file mode 100644
index 254a6ad..0000000
--- a/src/styles/404.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@use "./var";
-
-main {
-    display: flex;
-
-    span {
-        width: fit-content;
-        background-color: var(--heading-color);
-        color: var(--background-color);
-    }
-
-    .title {
-        margin-top: 30vh;
-        width: 100%;
-        flex: auto;
-
-        h1 {
-            margin: 0;
-        }
-    }
-
-    .return-home {
-        width: calc(100% / 3);
-        display: flex;
-        flex-direction: column;
-        flex: none;
-        margin-top: 30vh;
-
-        a {
-            font-family: var(--font-main);
-            font-size: 2rem;
-            text-decoration: none;
-            color: var(--background-color);
-        }
-        
-        a:hover {
-            text-decoration: underline;
-            text-decoration-thickness: 2px;
-        }
-    }
-}
-
-@media only screen and (max-width: 786px) {
-    main {
-        flex-direction: column;
-        height: auto;
-
-        .title, .return-home {
-            margin-top: 10vh;
-        }
-
-        .return-home {
-            width: auto;
-        }
-        
-        margin-bottom: 10vh;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/_font.scss b/src/styles/_font.scss
index 92766f6..21ce424 100644
--- a/src/styles/_font.scss
+++ b/src/styles/_font.scss
@@ -43,4 +43,12 @@
   // 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;
+  src: url("https://pangrampangram.com/cdn/shop/files/PPTelegraf-Variable.woff2") format("woff2");
 }
\ No newline at end of file
diff --git a/src/styles/_var.scss b/src/styles/_var.scss
index 3971f74..f95f833 100644
--- a/src/styles/_var.scss
+++ b/src/styles/_var.scss
@@ -2,67 +2,68 @@
 
 :root {
     color-scheme: light dark;
-    overscroll-behavior: none;
     
     --width: 1125px;
-    --font-main: 'PP Neue Machina Inktrap Variable';
-    --font-secondary: 'Inter Variable';
-    --font-code: 'Red Hat Mono VF';
+    --font-heading: 'PP Neue Machina Inktrap Variable', sans-serif;
+    --font-body: 'PP Telegraf Variable', sans-serif;
+    --font-code: 'IBM Plex Mono', monospace;
     --font-scale: 1em;
-    --background-color: light-dark(#eff1f5, #242424);
-    --title-color: light-dark(#242424, #eff1f5);
-    --heading-color: light-dark(#242424, #eff1f5);
-    --text-color: light-dark(#242424, #eff1f5);
-    --link-color: light-dark(#242424, #eff1f5);
-    --visited-color: light-dark(#242424, #eff1f5);
+    --background-color: light-dark(#faf4ed, #242424);
+    --title-color: light-dark(#242424, #faf4ed);
+    --heading-color: light-dark(#242424, #faf4ed);
+    --text-color: light-dark(#242424, #faf4ed);
+    --link-color: light-dark(#242424, #faf4ed);
+    --visited-color: light-dark(#242424, #faf4ed);
     --code-background-color: light-dark(#dcdfe6, #37393d);
     --blockquote-color: light-dark(#dcdfe6, #37393d);
 }
 
+// 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 {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
 body {
-    margin: 0;
-    padding: 0 20px;
-    font-family: var(--font-secondary);
-    font-size: var(--font-scale);
-    text-align: left;
-    background-color: var(--background-color);
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    line-height: 1.5;
-    color: var(--text-color);
+	line-height: 1;
 }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	font-weight: normal;
-    font-family: var(--font-main);
-    color: var(--heading-color);
+ol, ul {
+	list-style: none;
 }
-
-a {
-    color: var(--link-color);
+blockquote, q {
+	quotes: none;
 }
-
-main {
-    margin: auto;
-    max-width: var(--width);
-    margin-bottom: 20vh;
-	line-height: 1.6;
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
 }
-
-@media only screen and (max-width:767px) {
-    main {
-        margin-bottom: 80px;
-    }
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
 }
-
-code {
-    background-color: var(--code-background-color);
-    border-radius: 0.15em;
-    font-family: 'Red Hat Mono VF';
-    font-size: 1rem;
-}
\ No newline at end of file
diff --git a/src/styles/about.scss b/src/styles/about.scss
deleted file mode 100644
index d5fd279..0000000
--- a/src/styles/about.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@use "./var";
-
-header a:nth-child(2) {
-    background-color: var(--heading-color);
-    color: var(--background-color);
-}
-
-p.big {
-    font-size: 1.4rem;
-}
-
-p.big:first-child {
-    margin-top: 0;
-}
-
-a.big {
-    letter-spacing: -0.03em;
-    font-family: var(--font-main);
-    display: block;
-    font-size: 1.4rem;
-    text-decoration: none;
-}
-
-a.big:hover {
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-}
-
-a.big::after{
-    content: " ↗"
-}
-
-h2 {
-    letter-spacing: -0.03em;
-}
-
-.columns {
-    display: flex;
-}
-
-.column.left {
-    margin-right: 10%;
-    flex: auto;
-}
-
-.column.right {
-    width: calc(100% / 3);
-    flex: none;
-}
-
-@media only screen and (max-width: 1200px) {
-    .column.right a.big::after {
-        content: ""
-    }
-}
-
-@media only screen and (max-width: 786px) {
-    .columns {
-        flex-direction: column-reverse;
-    }
-
-    .column.left {
-        margin-right: 0;
-    }
-
-    .column.right {
-        // border-bottom: 2px solid var(--text-color);
-        width: auto;
-    }
-
-    .column {
-        padding: 20px 0;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
deleted file mode 100644
index f977e78..0000000
--- a/src/styles/footer.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-footer {
-    overflow: hidden;
-
-    hr {
-        margin: 20px;
-    }
-
-    .footer-caption {
-        max-width: var(--width);
-        margin: auto;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        margin-top: 2em;
-        margin-bottom: 3em;
-
-        span {
-            letter-spacing: -0.03em;
-            font-family: var(--font-main);
-            font-size: 1.25rem;
-        }
-    }
-
-    @media only screen and (max-width: 786px) {
-        .footer-caption {
-            grid-template-columns: 1fr 1fr;
-            gap: 0.5em;
-
-            span {
-                font-size: 1rem;
-                text-align: end;
-            }
-
-            span:last-child {
-                grid-area: 2 / 2;
-            }
-        }
-    }
-
-    img {
-        margin-top: -6.66%;
-        width: 100%;
-        transform: translateY(33%);
-    }
-}
\ No newline at end of file
diff --git a/src/styles/header.scss b/src/styles/header.scss
deleted file mode 100644
index 46c153d..0000000
--- a/src/styles/header.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-header {
-    display: flex;
-    width: 100%;
-    height: 100vh;
-}
-
-header .title {
-    margin-top: 30vh;
-    width: 100%;
-    flex: auto;
-}
-
-header .title h1 {
-    letter-spacing: -0.03em;
-    margin: 0;
-}
-
-header nav {
-    width: calc(100% / 3);
-    display: flex;
-    flex-direction: column;
-    flex: none;
-    margin-top: 30vh;
-
-    a {
-        width: fit-content;
-        font-family: var(--font-main);
-        font-size: 2rem;
-        text-decoration: none;
-        letter-spacing: -0.03em;
-
-        .header-icon:hover {
-            box-shadow: inset 0 -2px 0 0 currentColor;
-        }
-    }
-
-    a:hover {
-        text-decoration: underline;
-        text-decoration-thickness: 2px;
-    }
-}
-
-@media only screen and (max-width: 786px) {
-    header {
-        flex-direction: column;
-        height: auto;
-
-        .title, nav {
-            margin-top: 10vh;
-        }
-        
-        margin-bottom: 10vh;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7c92e1e..ab4af69 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,93 +1,9 @@
 @use "./_var.scss";
 
-header a:nth-child(1) {
-    background-color: var(--heading-color);
-    color: var(--background-color);
+p {
+    font-family: var(--font-main)
 }
 
-p.big {
-    font-family: var(--font-secondary);
-    font-size: 1.4rem;
-}
-
-.columns {
-    display: flex;
-    
-    .column.left {
-        margin-right: 10%;
-        flex: auto;
-    }
-
-    .column.right {
-        width: calc(100% / 3);
-        flex: none;
-
-        p.local-time {
-            position: relative;
-            bottom: 0.25rem;
-
-            font-feature-settings: "tnum" 1;
-            font-size: 1.4rem;
-            letter-spacing: -0.075em;
-        }
-    }
-}
-
-@media only screen and (max-width: 786px) {
-    .columns {
-        flex-direction: column;
-
-        .column {
-            padding: 20px 0;
-        }
-
-        .column.left {
-            margin-right: 0;
-        }
-
-        .column.right {
-            // border-bottom: 2px solid var(--text-color);
-            width: auto;
-        }
-    }
-}
-
-#now-playing {
-    i {
-        font-size: 1rem;
-        font-variation-settings: "ital" 100; // because of course it works that way
-    }
-
-    p {
-        font-family: var(--font-main);
-        font-size: 1.4rem;
-        letter-spacing: -0.03em;
-    }
-
-    b {
-        font-weight: 575;
-    }
-
-    a {
-        text-decoration: none;
-    }
-
-    a:hover {
-        text-decoration: underline;
-        text-decoration-thickness: 2px;
-    }
-
-    .lucide {
-        vertical-align: text-bottom;
-    }
-
-    .metadata {
-        display: flex;
-        flex-direction: column;
-    }
-
-}
-
-
-
-
+code {
+    font-family: var(--font-code)
+}
\ No newline at end of file
diff --git a/src/styles/journal.scss b/src/styles/journal.scss
new file mode 100644
index 0000000..0ad6013
--- /dev/null
+++ b/src/styles/journal.scss
@@ -0,0 +1,11 @@
+@use "./var";
+
+body {
+    background-color: var(--background-color);
+    font-family: var(--font-body);
+}
+
+h1 {
+    font-family: var(--font-heading);
+    font-size: 2rem;
+}
\ No newline at end of file
diff --git a/src/styles/post.scss b/src/styles/post.scss
new file mode 100644
index 0000000..13cfa3d
--- /dev/null
+++ b/src/styles/post.scss
@@ -0,0 +1,92 @@
+@use "_var";
+
+body {
+    background-color: var(--background-color);
+    font-family: var(--font-body);
+}
+
+main {
+    margin: 20px;
+}
+
+header {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-template-areas: 
+        "nav nav nav nav nav"
+        "title title title title title"
+        "title title title title title"
+        "title title title title title"
+        "title title title title title";
+
+    row-gap: 40px;
+
+    nav {
+        grid-area: nav;
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-template-areas: 
+            "back . . . name";
+        
+        font-family: var(--font-heading);
+        font-size: 1.5rem;
+
+        span.back {
+            grid-area: back;
+
+            a {
+                color: black
+            }
+        }
+
+        span.name {
+            grid-area: name;
+        }
+    }
+
+    div.title {
+        grid-area: title;
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-template-rows: subgrid;
+        grid-template-areas:
+            "heading heading heading heading date-meta"
+            "heading heading heading heading date-meta"
+            "heading heading heading heading date-meta"
+            "heading heading heading heading date-meta";
+        
+        div.heading {
+            grid-area: heading;
+
+            span.type {
+                opacity: 65%;
+                text-transform: uppercase;
+            }
+            
+            h1 {
+                font-family: var(--font-heading);
+                font-size: 4.5rem;
+                letter-spacing: -0.06em;
+            }
+        }
+
+        div.date-meta {
+            grid-area: date-meta;
+
+            span {
+                display: block;
+            }
+            span:not(.date) {
+                text-transform: uppercase;
+                opacity: 65%;
+            }
+        }
+    }
+}
+
+article {
+    line-height: 1.35;
+    // margin-top: 20px;
+    padding: 0 120px;
+}
\ No newline at end of file
diff --git a/src/styles/projects.scss b/src/styles/projects.scss
deleted file mode 100644
index 26daa57..0000000
--- a/src/styles/projects.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@use "./var";
-
-header a:nth-child(3) {
-    background-color: var(--heading-color);
-    color: var(--background-color);
-}
-
-.projects-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-
-    div {
-        margin-right: 10%;
-
-        h3 {
-            letter-spacing: -0.03em;
-            margin-top: 0;
-            margin-bottom: 0.5em;
-        }
-
-        p {
-            margin-top: 0;
-        }
-    }
-
-    div:last-child {
-        margin-right: 0; // commits a design crime :)
-        
-    }
-
-    a:has(h3) {
-        text-decoration: none;
-    }
-
-    a[href]:has(h3):hover {
-        text-decoration: underline;
-        text-decoration-thickness: 2px;
-    }
-}
-
-main h2 {
-    letter-spacing: -0.03em;
-    margin-bottom: 0.5em
-}
-
-@media only screen and (max-width: 786px) {
-    .projects-container {
-        grid-template-columns: 1fr;
-    }
-}
\ No newline at end of file
-- 
2.51.2