Punk Theme Design Spec

Date: 2026-03-25 Project: L’Underfitting — Quarto Blog Status: Approved

Overview

Apply a Classic Punk / Zine aesthetic to the main blog — a personal blog covering math, quantum computing, machine learning, and research. The style applies globally to all pages: homepage, blog listing, individual posts, portfolio, projects. This is a writing-first blog; the punk style frames the content without overwhelming it.

Design Direction

Classic Punk / Zine / Stencil. Inspired by DIY zines, stencil art, and punk print culture. Newsprint paper feel, heavy Impact type, Courier Prime for listing/card body text, clean Lora serif for long-form article reading. Red and yellow as the only accent colors against near-black and newsprint.

Color Palette

Name Hex Usage
Newsprint #F5F0E8 Page background
Carbon #1A1A1A Navbar, headings, code backgrounds
Punk Red #CC2200 Tags, links, accents, borders
Stencil Yellow #F5C842 Logo, nav highlight
Ink Grey #555555 Body text, bylines, secondary text

Typography

Role Font Style
Logo Impact (system) Uppercase, text-shadow: 2px 2px 0 #CC2200
H1–H3 Impact (system) Uppercase, tight letter-spacing
Body (listings, cards) Courier Prime (Google Fonts) 0.75rem / 1.7 line-height
Body (articles) Lora (Google Fonts) 1rem / 1.75 line-height
Blockquotes Courier Prime Italic, red left border
Bylines / meta Courier Prime 0.75rem, red left border
Tags / labels Impact Uppercase on #CC2200 background

Google Fonts import: Courier Prime (400, 700, italic) + Lora (400, 600, italic).

Implementation

Files

  • custom.scss — new file at project root (alongside _quarto.yml), contains all punk styles
  • styles.css — delete the source file (not _site/, which is a build artifact regenerated automatically); its existing rules (.listing-item border-radius, background) directly conflict with the punk spec and will cause specificity issues if both load
  • _quarto.yml — update theme to reference custom.scss

_quarto.yml change

format:
  html:
    theme: [cosmo, custom.scss]

Remove the css: styles.css line entirely once styles.css is deleted.

Paper Grain Texture

Not implemented. Quarto’s asset pipeline resolves url() fragments (including those inside data: URIs) as file paths, causing a runtime error when the SVG filter references #n. The newsprint background color (#F5F0E8) alone carries the effect.

Component Specs

Page Footer

  • Background: #1A1A1A
  • Text color: #888
  • Font: Courier Prime, 0.75rem
  • Top border: 2px solid #CC2200
  • Links: #F5C842, no underline

Page Background

  • All pages: background-color: #F5F0E8 with SVG paper grain (see Implementation)

Title Block Banner (title-block-banner: true)

Quarto renders a banner via .quarto-title-banner and #title-block-header. Override these selectors: - .quarto-title-banner: background: #1A1A1A - .quarto-title h1: Impact, uppercase, color: #F5F0E8 - .quarto-title-meta / byline elements: Courier Prime, #888, red left border

No accent word coloring — applying #CC2200 to a single word in a dynamically rendered YAML title is not achievable via SCSS alone (would require Lua filter or frontmatter <span> tags). This feature is out of scope.

Headings (H1–H3, in article body)

  • Font: Impact, uppercase, color: #1A1A1A
  • H1: ~2.8rem, letter-spacing: -0.02em
  • H2: ~1.8rem, border-bottom: 2px solid #1A1A1A, padding-bottom
  • H3: ~1.1rem

Tags / Categories

  • Background: #CC2200, color: #fff
  • Font: Impact, uppercase, font-size: 0.6rem, letter-spacing: 0.1em
  • border-radius: 0 (flat stencil, no rounding)

Bylines / Post Meta

  • Font: Courier Prime, 0.75rem, color: #555
  • border-left: 3px solid #CC2200, padding-left: 0.5rem

Listing Cards — Grid type (Blog, Portfolio)

  • Container: dashed borders between cards (border: 1px dashed #AAA)
  • Card title: Impact, uppercase, color: #1A1A1A
  • Card description: Courier Prime, 0.75rem (consistent with non-article body)
  • Tag: red Impact label
  • Portfolio image treatment: filter: grayscale(30%) contrast(1.1) for a print-like feel. object-fit: cover.

Listing — Table type (Projects)

The projects/index.qmd uses type: table, which renders an HTML <table>. Override: - Table header row: background: #1A1A1A, color: #F5C842, Impact, uppercase - Table body rows: background: #F5F0E8 - Row borders: 1px solid #AAA (dashed where possible via border-style: dashed) - Row hover: background: #EDE8DF - Table links: color: #CC2200

Hero / Title Block (listing pages, homepage)

  • Background: #1A1A1A
  • Title: Impact, uppercase, color: #F5F0E8, large
  • Byline/subtitle: Courier Prime, color: #888, red left border
  • Bottom: 3px dashed #333

Article Body (post pages)

  • Font: Lora, 1rem, line-height: 1.75, color: #222
  • Max width: 680px, centered. Because _quarto.yml sets page-layout: full globally, this constraint must be applied to .page-body .content or article.content (the actual Quarto content column selector under full layout), not to body or .container. The implementer should inspect the rendered HTML to confirm the correct selector — a rule on the wrong element will be silently ignored under full layout.
  • H2/H3: Impact, uppercase, border-bottom: 2px solid #1A1A1A
  • Blockquotes: Courier Prime, italic, border-left: 3px solid #CC2200, color: #444
  • Links: color: #CC2200, underline, text-underline-offset: 2px
  • Inline code: Courier Prime, slight warm background (#EDE8DF), color: #CC2200
  • Code blocks: background: #1A1A1A, color: #F5C842, border-left: 3px solid #CC2200

Callout Blocks

Override Quarto’s default pastel callout styles: - All callout types: background: #EDE8DF, border-left: 4px solid #CC2200 - Callout title: Impact, uppercase, color: #1A1A1A - Callout body: Lora (inherits article body) - Remove default colored icon backgrounds; use a flat #CC2200 icon color for all types

Code Fold Toggle / Code Tools

  • Toggle button: Courier Prime, color: #CC2200, no default Bootstrap styling
  • Code tools toolbar: background: #1A1A1A, icon color #F5C842

Math / KaTeX

  • Left as browser/KaTeX default. On newsprint background with dark text this renders acceptably. No custom KaTeX overrides in scope.

Buttons / CTAs

  • Primary: background: #CC2200, color: #fff, Impact, uppercase, border-radius: 0
  • Secondary / outline: border: 2px solid #1A1A1A, color: #1A1A1A, border-radius: 0

Scope

In scope: - custom.scss — new file at project root, all punk styles - _quarto.yml — update theme array, remove css: styles.css - styles.css — delete

Out of scope: - Dark mode - Animations / transitions beyond hover states - Per-page theme variations - Modifying content or frontmatter of existing .qmd files - Accent word coloring in dynamically rendered titles (requires Lua filter) - Observable JS / OJS widget internals (sliders, charts, Observable cells) - KaTeX / math rendering overrides