From 9a4d09d7bf27bc5433827fbf2854c61e2051ac6a Mon Sep 17 00:00:00 2001 From: Angel Wang Date: Sat, 10 Oct 2026 10:13:02 -0400 Subject: [PATCH] feat: simplify styles --- content/about.mdx | 12 +-- src/components/Header.astro | 13 +++ src/components/{nav.astro => Nav.astro} | 0 src/components/preact/LBNowPlaying.tsx | 2 +- src/components/preact/SteamNowPlaying.tsx | 2 +- src/pages/about.astro | 10 +-- src/pages/journal/[id].astro | 4 +- src/pages/journal/index.astro | 10 +-- src/pages/now.astro | 10 +-- src/pages/projects.astro | 10 +-- src/styles/about.scss | 100 +++------------------ src/styles/components/header.scss | 34 +++++++ src/styles/index.scss | 44 +-------- src/styles/journal.scss | 28 ------ src/styles/lib/_article.scss | 104 ++++++++++++++++++++++ src/styles/lib/_var.scss | 2 +- src/styles/now.scss | 96 +------------------- src/styles/post.scss | 73 +-------------- 18 files changed, 192 insertions(+), 362 deletions(-) create mode 100644 src/components/Header.astro rename src/components/{nav.astro => Nav.astro} (100%) create mode 100644 src/styles/components/header.scss create mode 100644 src/styles/lib/_article.scss diff --git a/content/about.mdx b/content/about.mdx index af8a53c..96f5153 100644 --- a/content/about.mdx +++ b/content/about.mdx @@ -1,31 +1,31 @@ -# Hi, I’m Angel, and I do things on the internet sometimes. +## Hi, I’m Angel, and I do things on the internet sometimes.
-## I write code +### I write code Mostly frontend, and various scripts for Linux powerusering. My language of choice is TypeScript, and you can check out my coding stats here. One day I'll publish my Linux dotfiles. That day is yet to come. -## I make music +### I make music I love to sing; compose; play the piano. Although most of my projects fall through into the pit of "never happened," I'm sure that I'll make something worth noting someday. -## I write poetry +### I write poetry The cringiest of the cringe. You can find most of it [here](/journal); an ongoing archival attempt is in progress. -## I do a bunch of other things on an extremely erratic basis +### I do a bunch of other things on an extremely erratic basis Sometimes I'll speedrun a game, rig a 3D model, or draw Medic from TF2. Sometimes I'll even write about it. Consistency is overrated, anyway.
-# Hit me up? +## Hit me up? I can be reached via email at **angel [at] angelcube [dot] dev**. diff --git a/src/components/Header.astro b/src/components/Header.astro new file mode 100644 index 0000000..8ad8e7d --- /dev/null +++ b/src/components/Header.astro @@ -0,0 +1,13 @@ +--- +import Nav from "./Nav.astro" +const { title, description, navTitle="← return home", navHref="/" } = Astro.props +import "../styles/components/header.scss" +--- + +
+
\ No newline at end of file diff --git a/src/components/nav.astro b/src/components/Nav.astro similarity index 100% rename from src/components/nav.astro rename to src/components/Nav.astro diff --git a/src/components/preact/LBNowPlaying.tsx b/src/components/preact/LBNowPlaying.tsx index 83c78b1..6bb1703 100644 --- a/src/components/preact/LBNowPlaying.tsx +++ b/src/components/preact/LBNowPlaying.tsx @@ -79,7 +79,7 @@ export default function LBNowPlaying() { <> {" "}on {song.release.title} - )} [↗] {" • "} + )} [↗] {" · "} ) } diff --git a/src/components/preact/SteamNowPlaying.tsx b/src/components/preact/SteamNowPlaying.tsx index ac8616b..49cb23a 100644 --- a/src/components/preact/SteamNowPlaying.tsx +++ b/src/components/preact/SteamNowPlaying.tsx @@ -32,7 +32,7 @@ export default function SteamNowPlaying() { return ( NOW PLAYING − {game.name}{" "} - on Steam [↗] {" • "} + on Steam [↗] {" · "} ) } diff --git a/src/pages/about.astro b/src/pages/about.astro index a5f0b21..2487b1b 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -1,7 +1,7 @@ --- -import Nav from "../components/nav.astro"; import "../styles/about.scss" import { Content } from "../../content/about.mdx" +import Header from "../components/Header.astro"; --- @@ -19,13 +19,7 @@ import { Content } from "../../content/about.mdx"
-
-
+
diff --git a/src/pages/journal/[id].astro b/src/pages/journal/[id].astro index 9dbc8a4..3efb57b 100644 --- a/src/pages/journal/[id].astro +++ b/src/pages/journal/[id].astro @@ -1,7 +1,7 @@ --- -import Nav from "../../components/nav.astro"; +import Nav from "../../components/Nav.astro" import "../../styles/post.scss" -import { getCollection, render } from 'astro:content'; +import { getCollection, render } from 'astro:content' export async function getStaticPaths() { const posts = await getCollection("journal") diff --git a/src/pages/journal/index.astro b/src/pages/journal/index.astro index df3bbb7..04bdeab 100644 --- a/src/pages/journal/index.astro +++ b/src/pages/journal/index.astro @@ -1,5 +1,5 @@ --- -import Nav from "../../components/nav.astro"; +import Header from "../../components/Header.astro"; import "../../styles/journal.scss"; import { getCollection } from "astro:content"; import { Temporal } from "temporal-polyfill"; @@ -37,13 +37,7 @@ const ramblings = await getSortedPosts("Ramblings")
-
-
+

writings

    diff --git a/src/pages/now.astro b/src/pages/now.astro index bf0628a..7180766 100644 --- a/src/pages/now.astro +++ b/src/pages/now.astro @@ -1,9 +1,9 @@ --- import { Content as Now } from "../../content/now.mdx" import { Content as NowPrev } from "../../content/now-prev.mdx" -import Nav from "../components/nav.astro"; import "../styles/now.scss" import LBPinned from "../components/preact/LBPinned"; +import Header from "../components/Header.astro"; --- @@ -20,13 +20,7 @@ import LBPinned from "../components/preact/LBPinned";
    -
    -
    +
    diff --git a/src/pages/projects.astro b/src/pages/projects.astro index 8a582ac..65ba245 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -1,5 +1,5 @@ --- -import Nav from "../components/nav.astro"; +import Header from "../components/Header.astro"; import "../styles/projects.scss" --- @@ -18,13 +18,7 @@ import "../styles/projects.scss"
    -
    -
    +

    ...Coming soon!

    diff --git a/src/styles/about.scss b/src/styles/about.scss index 1a44310..688dd3a 100644 --- a/src/styles/about.scss +++ b/src/styles/about.scss @@ -1,4 +1,5 @@ -@use "./lib/var"; +@use "lib/var"; +@use "lib/article"; body { background-color: var(--background-color); @@ -10,104 +11,27 @@ main { 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: 5vh; - - div.title { - grid-area: title; - - 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%; - } - } -} - article { - line-height: 1.5; - margin: 0 20vw; - margin-bottom: 80px; + @extend %article; h2 { - font-family: var(--font-code); - text-transform: uppercase; - font-size: 1.25rem; - color: color-mix(in srgb, var(--text-color), transparent 29%); - line-height: 1.2; - margin-bottom: 0.1em; - } - - h1 { - font-family: var(--font-heading); - line-height: 1.2; font-size: 2.5rem; - font-weight: 300; - letter-spacing: -0.06em; - margin-bottom: 0.1em; } - p { - margin-bottom: 0.8em; - } - - strong { - font-weight: bold; - } + // ul:has(a) { + // list-style: "⁃ "; - 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; - } - - a { - color: var(--text-color) - } - - ul:has(a) { - list-style: "⁃ "; - - a { - // font-family: var(--font-heading); - // text-transform: uppercase; - font-size: 1.125rem; - color: var(--text-color) - } - } - - hr { - margin: 3rem auto 2rem auto; - width: 60%; - opacity: 65%; - } + // a { + // // font-family: var(--font-heading); + // // text-transform: uppercase; + // font-size: 1.125rem; + // color: var(--text-color) + // } + // } } @media (max-width: 775px) { - header div.title h1 { - font-size: 4rem; - - } - article { - margin-left: 0; - margin-right: 0; - h1 { font-size: 2rem; } diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss new file mode 100644 index 0000000..83420d4 --- /dev/null +++ b/src/styles/components/header.scss @@ -0,0 +1,34 @@ +header { + display: grid !important; + 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; + + 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%; + } + } +} + +@media (max-width: 775px) { + header div.title h1 { + font-size: 4rem; + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index a72043a..89cc723 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,5 @@ -@use "./lib/_var.scss"; +@use "lib/var.scss"; +@use "lib/article.scss"; body { background-color: var(--background-color); @@ -72,33 +73,8 @@ section#about { gap: 2rem; article { - h2 { - font-family: var(--font-heading); - font-weight: 350; - font-size: 4rem; - letter-spacing: -0.06em; - } - - h3 { - opacity: 65%; - font-family: var(--font-code); - font-size: 1.25rem; - margin-bottom: 0.2em; - } - - p { - line-height: 1.2; - margin-bottom: 1em; - } - - em { - color: var(--faded-text-color); - font-variation-settings: 'slnt' 30; - } - - a { - color: var(--text-color) - } + @extend %article; + margin: 0; } picture img { @@ -127,10 +103,6 @@ section#about { } section#about { - article h2 { - font-size: 3rem; - } - picture img { max-width: 20rem; } @@ -185,19 +157,11 @@ section#about { header div.title h1 { font-size: 4rem; } - - section#about article h2 { - font-size: 2rem; - } } @media (max-width: 400px) { header div.title h1 { font-size: 3rem; } - - section#about article h2 { - font-size: 2rem; - } } diff --git a/src/styles/journal.scss b/src/styles/journal.scss index fabf59f..a0c3a37 100644 --- a/src/styles/journal.scss +++ b/src/styles/journal.scss @@ -10,34 +10,6 @@ main { 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: 5vh; - - div.title { - grid-area: title; - - 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%; - } - } -} h2 { font-family: var(--font-heading); diff --git a/src/styles/lib/_article.scss b/src/styles/lib/_article.scss new file mode 100644 index 0000000..5ec843d --- /dev/null +++ b/src/styles/lib/_article.scss @@ -0,0 +1,104 @@ +%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; + } + } + +} + +@counter-style numbered { + system: extends decimal; + pad: 2 "0"; + suffix: " − "; +} \ No newline at end of file diff --git a/src/styles/lib/_var.scss b/src/styles/lib/_var.scss index 05f4692..2df4f3d 100644 --- a/src/styles/lib/_var.scss +++ b/src/styles/lib/_var.scss @@ -82,4 +82,4 @@ table { *::selection { color: var(--background-color); background-color: var(--text-color); -} \ No newline at end of file +} diff --git a/src/styles/now.scss b/src/styles/now.scss index 051b92e..37dd51d 100644 --- a/src/styles/now.scss +++ b/src/styles/now.scss @@ -1,4 +1,5 @@ -@use "./lib/var"; +@use "lib/var"; +@use "lib/article"; body { background-color: var(--background-color); @@ -10,101 +11,10 @@ main { 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: 5vh; - - div.title { - grid-area: title; - - 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%; - } - } -} - article { - line-height: 1.5; - margin: 0 20vw; - margin-bottom: 80px; - - h2 { - font-family: var(--font-heading); - font-weight: 300; - font-size: 3rem; - letter-spacing: -0.06em; - } - - h3 { - font-family: var(--font-code); - text-transform: uppercase; - opacity: 65%; - } - - p { - margin-bottom: 0.5em; - } - - 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; - } - - a { - color: var(--text-color) - } - - hr { - margin: 3rem auto 2rem auto; - width: 60%; - opacity: 65%; - } + @extend %article; section#also:not(:has(p)) { display: none; } - - section#now-prev { - h2 { - font-size: 2rem; - letter-spacing: -0.04em; - } - } -} - -@media (max-width: 775px) { - header div.title h1 { - font-size: 4rem; - - } - - article { - margin-left: 0; - margin-right: 0; - - h2 { - font-size: 2rem; - } - - section#now-prev h2 { - font-size: 1.5rem; - } - } } \ No newline at end of file diff --git a/src/styles/post.scss b/src/styles/post.scss index 933a831..004ee67 100644 --- a/src/styles/post.scss +++ b/src/styles/post.scss @@ -1,4 +1,5 @@ -@use "lib/_var"; +@use "lib/var"; +@use "lib/article"; body { background-color: var(--background-color); @@ -87,62 +88,7 @@ header { } article { - line-height: 1.5; - margin: 0 20vw; - margin-bottom: 80px; - - 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; - } - - 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; - } + @extend %article; } @media (max-width: 775px) { @@ -165,17 +111,4 @@ article { } } } - - article { - margin-left: 0; - margin-right: 0; - } -} - - - -@counter-style numbered { - system: extends decimal; - pad: 2 "0"; - suffix: " − "; } \ No newline at end of file -- 2.54.0