1900-03-02 · hash: site-css-demo

site.css feature showcase

Quick overview

This post is a living playground for every class shipped in src/static/site.css. Keep it around to verify layout regressions after CSS changes.

Demonstrates background, border, badge, and pill styling.

retro web vibes local assets type-safe build box shadows

The inline list above uses the ornamental star bullets and gap spacing.

2026-03-02

Hover to see the slight lift from the transform transition.

2026-03-02

Demonstrates cover borders, card padding, and box shadow stack.

2026-03-02

Shows grid spacing and responsive collapse to 2 then 1 columns.

2026-03-02 · hash: site-css-demo

The shell uses the card background, thick border, and shadow stack. The default typography pulls from the SourceHanSerifCN stack.

Citation block to test left border, padding, and muted text.

Notice text uses the muted color and small font size.

Inline code like .button-link and .pill-row should inherit monospace and remain readable.

// TypeScript block with Shiki highlighting
const hello = (name: string) => {
  return `hi, ${name}`;
};
console.log(hello("world"));

Resize the viewport to confirm media queries: header stacking, grid collapse, and hero badge repositioning.