Apply "Broadcast" redesign concept across the site#30
Open
backlineint wants to merge 1 commit into
Open
Conversation
Implements Concept A ("Broadcast") from the Claude Design handoff: a
dark-indigo editorial look with a chunky Alfa Slab One masthead,
radiating rings + horizon-cloud motifs, Space Mono coral kickers, and
electric-blue + gold accents.
- Add src/styles/broadcast.css: the full design system, ported from the
concept's fixed-width mockup into a fluid/responsive sheet. Maps the
Open Props theme vars onto the Broadcast palette so existing
components inherit the dark theme.
- BaseHead: load Alfa Slab One / Libre Franklin / Space Mono; import the
new stylesheet last so it wins the cascade.
- Header/Footer: mono brand + uppercase nav with gold active state;
footer gains the horizon-cloud SVG and social/bottom links.
- Home: rings, gold pill, stacked masthead, mono bio, find-me row,
Latest rows, and the "Off the clock" two-up cards.
- Writing feed + RadPostTeaser: masthead, section header with archive
count, and post rows with coral kickers, slab titles, tags, and real
thumbnails.
- Post / MarkdownPage layouts: centered slab title, kicker meta, hero,
and prose body with gold slab headings (h2-h4), blue links, coral
bullets.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
✅ Deploy Preview for dashing-puppy-fc62ba ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Applies Concept A — "Broadcast" from the Claude Design handoff to the entire site: a dark-indigo editorial look with a chunky Alfa Slab One masthead, radiating ring + horizon-cloud motifs, Space Mono coral kickers, and electric-blue + gold accents — itshipped.fm's energy in Brian's blue.
Why
This is the implementation of the redesign direction explored in the design tool. The handoff shipped fixed-width HTML/CSS mockups (Home / Writing feed / Single post); this PR recreates that visual language as real, responsive Astro components.
Changes
src/styles/broadcast.css(new) — the full design system, ported from the concept'sa.css. Usesclamp()for display type instead of the mockup's fixed 1280px artboard, and maps the Open Props theme vars (--text-*,--surface-*,--link) onto the Broadcast palette so existing components inherit the dark theme.BaseHead.astro— loads the Google Fonts trio (Alfa Slab One / Libre Franklin / Space Mono), drops the Atkinson preloads, imports the new stylesheet last.Header.astro/Footer.astro— mono brand + uppercase nav with a gold active state; footer gains the horizon-cloud SVG and social/bottom links.index.astro— rings, gold pill, stacked masthead, mono bio, find-me row, Latest rows, and the Off the clock two-up cards (Recent Projects / Currently Enjoying).posts/index.astro+RadPostTeaser.astro— the Writing feed with a section header + archive count, and post rows with coral date kickers, slab titles, tags, and real thumbnails when a post has an image.Post.astro/MarkdownPage.astro— article layout: back link, centered slab title, kicker meta, 16:8 hero, rule, and prose body styled with gold slab headings, blue links, and coral▸bullets.Reviewer notes
##/###/####for section headings (the mockup only had one level), so proseh2–h4get a descending gold slab scale andh5/h6become coral mono — a deliberate extension beyond the single mockup style to fit real posts.perry_weather.jpg) isn't part of the Broadcast design, so it was dropped from the home page; the asset and the now-unusedRadTwoColcomponent remain in the repo.Verification
pnpm buildpassesastro checkand builds all 64 pages.🤖 Generated with Claude Code