Apply Concept C "Arcade" redesign site-wide#31
Open
backlineint wants to merge 24 commits into
Open
Conversation
Implements the Arcade direction from the Claude Design handoff: a deep-plum arcade theme with heavy grotesk display type, sticker cards, a star/comet field, and a coin-gold / 1-up-green / cyan / hot-pink palette. - global.css: Arcade design tokens (mapped onto Open Props), radial-glow + dot-grid background, and full prose styling (hard-shadow code blocks, gold mono sub-headings, bordered images, gold-rule blockquotes, themed tables). - BaseHead: load Archivo Black / Space Grotesk / JetBrains Mono, drop Atkinson. - Header/Footer: arcade wordmark, mono pill nav with gold active state, cyan icon tiles, themed footer. - New Stars and StickerCard components; StickerCard renders post hero images or duotone fills with EP-number kickers and tag badges. - Home, posts feed, single post, and markdown layouts rebuilt to the concept; episode numbers derived from each post's position in the sorted archive. Layout kept fluid rather than the mockup's fixed 1280px, and real post content/links preserved. 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. |
When a post has no hero image, skip the placeholder gradient entirely rather than filling the space with a duotone fill. - StickerCard: imageless cards render text-only (no thumbnail); the featured card surfaces its "★ Latest" badge inline in the kicker instead. - Post layout: no hero image means no phero block; the post's tag is shown as a ghost badge in the meta row so it isn't lost. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Switch the nav to a 1fr/auto/1fr grid so the Posts/About/Feed links sit dead center in the viewport regardless of brand and icon widths. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bump the gap between the Bluesky/GitHub icon tiles from 8px to 14px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bump the footer social-icon gap from 12px to 14px so it matches the header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The centered nav now holds just Posts/About; the RSS feed becomes a cyan icon tile alongside Bluesky and GitHub. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Keep the brianperry.dev wordmark static on hover (no underline, no color change). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Introduce a light mode alongside the default dark Arcade theme, with a header toggle and persisted preference. - BaseHead: inline pre-paint script that applies the theme from localStorage or system preference, reapplies after view-transition swaps, and handles the toggle via a delegated click listener. - Header: sun/moon toggle tile in the icon group (icon swaps via CSS). - global.css: :root[data-theme="light"] palette (daylit lavender, white cards, deepened accents). Tokenize previously-hardcoded values — glow, dot grid, prose ink — and add a constant --badge-ink so accent badges keep dark text in both themes. Note: Shiki fenced code blocks keep their dark background in light mode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The social <a> tiles inherit a -4px top margin from Open Props normalize that the toggle <button> didn't, leaving it 4px low. Zero the margin on both so all header icon tiles share the same baseline. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The footer tiles carried the same Open Props -4px margin (all sides), which ate 8px of the 14px gap, leaving only 6px of visual spacing. Zero the margin so the footer icons sit 14px apart like the header. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop the green from ".dev" (back to ink) and append a blinking cyan terminal caret after the wordmark. Respects prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Uppercase the brand, color "perry" red (default/red/default), and append a static cyan caret. Mirrors the hero, but the header caret does not blink. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the border-bottom underlines (which sat at the bottom of the line box, detached from the text) with text-decoration underline + a small text-underline-offset on prose and hero-bio links. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The centered grid forces symmetric side columns, so the wordmark overran its column around 620px while the wrap only triggered at 520px. Add a mid tier: 720px drops to a single space-between row, 620px wraps and centers. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rewrite the hero intro to mention the AI-agents focus and Actual AI (linked to actual.ai), keeping the existing web-dev, Drupal, and speaking links. Close on "I'm really into Nintendo." Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the default Astro favicon with the gold background star on a rounded plum tile, matching the Arcade theme. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add a thin vertical divider between the dark/light toggle and the social icon links so the toggle reads as a separate utility control. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Cycle Auto -> Light -> Dark -> Auto. Auto (the default, when no preference is stored) follows the OS theme and updates live via the prefers-color-scheme listener; Light/Dark are explicit overrides. The toggle icon reflects the current mode (auto contrast / sun / moon) via data-theme-mode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Implement the 'Duotone Sticker' from the design: split the hero into a two-column layout (text left, portrait right) and add a tilted, duotone-treated photo sticker using src/assets/perry_weather.jpg — grayscale base with blended shadow/highlight overlays, a hard offset shadow, a gold star badge poking out the corner, and a "// brian.exe" tape. Duotone tokens adapt per theme (cyan/plum in dark, pink/violet in light); stacks with the sticker on top on narrow screens. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the heavy always-on duotone with a clean, near-untreated photo at rest; on hover the card develops a holographic foil — a theme-colored wash plus an iridescent rainbow sheen (color-dodge) that shimmers diagonally, with a subtle contrast/saturation pop. Honors prefers-reduced-motion. Also shorten the tape label to "// brian". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sweep the iridescent foil across the resting photo on a ~7s interval — a quick ~0.7s travel-and-fade, like light catching a holo card. Hover still gives the sustained shimmer; prefers-reduced-motion disables the idle glint. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Swap the hero columns so the duotone sticker sits on the left and the text on the right at wide breakpoints (text stays first in the DOM; mobile still stacks with the sticker on top). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Move the holographic glint from an automatic interval to hover/focus — the quick foil sweep plays (and repeats) while the card is hovered or focused, and no longer fires on its own at rest. Drop the separate tint wash and sustained shimmer. Make the whole sticker a link to /about with a focus-visible outline. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
Applies the Arcade direction from the Claude Design handoff to the entire site — a deep-plum, heavy-grotesk arcade look with sticker cards, a star/comet field, and a coin-gold / 1-up-green / cyan / hot-pink palette. (Source: the
blog-redesign-it-shipped-this-waydesign bundle, concept C.)What changed
Design system
global.css— Arcade tokens mapped onto Open Props, radial-glow + dot-grid background, and full prose styling (hard-shadow code blocks, gold mono sub-headings, bordered/shadowed images, gold-rule blockquotes, themed tables/kbd/mark).BaseHead.astro— loads Archivo Black (display), Space Grotesk (body), JetBrains Mono (kickers); drops the old Atkinson font setup.Components
Header/HeaderLink— arcade wordmark (red dot), mono uppercase pill nav with gold active state, cyan icon tiles.Footer— themed, with social tiles and mono bottom links.Stars.astro— shared decorative star/comet field.StickerCard.astro— sticker cards with hard offset shadows, duotone thumbnail fills (uses a post's hero image when present), EP-number kickers, and tag badges.Pages / layouts
Post.astro+[...slug].astro), and the markdown layout rebuilt to the concept. Episode numbers are derived from each post's position in the date-sorted archive.Notes for reviewers
1280px.pnpm build(runsastro check): 0 errors, 0 warnings, 64 pages built. Verified visually across home / feed / post / style-guide and at mobile width.🤖 Generated with Claude Code