Redesign blog post page typography & spacing

[popovayoana]

Description

The current individual blog post template has poor typographic hierarchy — inconsistent heading spacing (H1–H6), cramped vertical rhythm, and unclear visual separation between sections. This makes long-form content harder to read and doesn't match the quality of the rest of the site. We need to implement a new design system for the blog post body, covering all Wagtail rich text elements.

What's wrong now

• Heading levels (H1–H6) lack clear size progression and spacing differentiation
• Insufficient whitespace between sections — content feels dense and cluttered
• Line-height on body text is too tight for long-form reading
• Inconsistent treatment of blockquotes, lists, tables, code blocks, and images

What we want

A Warm Humanist design direction: clean, spacious, and readable with a clear typographic hierarchy.

Key decisions:

• Heading font: Fraunces (serif) for H1–H3
• Body font: SF Pro Display (system sans) for H4–H6 and all body text
• Accent color: #ed5248 — used on links, list markers, blockquote border, breadcrumb
• Background: #ffffff (white, matching site)
• Content column: 860px max-width, centered
• Body line-height: 1.8
• Blockquotes: Editorial style — no background fill, 2px accent left border, Fraunces italic
• All media (images, code blocks, embeds) get rounded corners (8px, hero 12px)
• Fully responsive across desktop, tablet, mobile, and small mobile

Design reference

📎 ckan-blog.html

Scope

The attached HTML file is the complete design reference. Open it in a browser. It contains:

• Rendered template — Lorem Ipsum content showing every Wagtail element (H1–H6, paragraphs, bold, italic, links, blockquote, unordered list, ordered list, nested lists, image with caption, inline code, code block, table, embedded video)
• Dev spec — 10 numbered spec cards with exact pixel values, font weights, line-heights, colors, spacing, responsive breakpoints, and 10 key rules

Notes

• All CSS values are documented as custom properties (--ink, --accent, --border, etc.) in the reference file — please adopt the same token structure
• Use clamp() for fluid type scaling and side padding as specified

[popovayoana]

@alexmorev Who can work on improving the blog? Please have a look at the specs and let me know if it looks good. I used AI to create it and I want to make sure it makes sense for you as a dev. We also need to improve the events page but I will create a separate issue for it. // cc @Alex-Pavlyuk

[popovayoana]

@alexmorev @Alex-Pavlyuk I've done the design, we need to implement it - html file is attached. With AI should be really quick... when can we work on it? I can assign it to our one of our devs if you provide access...

[alexmorev]

@popovayoana I saw the message and will work on this issue.