Add site rewrite plan and simplify CLAUDE.md - #4
Open
ctrlswing wants to merge 16 commits into
Open
Conversation
Comprehensive plan doc covering 9 workstreams: site architecture, content strategy, page CRO, email sequence, AI SEO, launch strategy, schema markup, analytics tracking, and copywriting decisions. CLAUDE.md slimmed to point at plan doc with work discipline rules (commit after every task, keep plan doc current). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace "coming soon" placeholder with a contained dark-panel card featuring headline, 4 metric cells, and inline email signup form. Inspired by Shell Foundation's presentation-card aesthetic, adapted to CH47's warm amber + Geist design system. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The initial landing page commit referenced new CSS custom properties (--color-panel, --color-neutral-*, --color-primary-*) that only existed locally. This commit includes the updated design system tokens, layout changes, LogoAnimated token updates, polish fixes to spacing/contrast, and removes legacy pages/components from the pre-rebuild site. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove header border-bottom so logo floats above content - Bump hint text opacity 0.25 → 0.35 for readability - Merge duplicate .email-form__btn rule (glow animation) - Remove data-counter from "0" cell (no-op animation) - Remove logo glow/breathing animation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Design system: - Prune main.css from 1169 to ~260 lines (remove 25 unused component patterns, 26 unused tokens, dead keyframes, stale responsive rules) - Add panel token scale (panel-fg, panel-fg-muted, panel-fg-dim, panel-divider, panel-border) for dark surface consistency - Add radius-xl (16px) and radius-2xl (24px) tokens for card - Add shadow-card token - Replace all hardcoded rgba() divider/text values with tokens Accessibility: - Fix heading hierarchy: add visually-hidden h2 above h3 metrics - Add aria-live region for form success/error announcements - Add focus-visible for submit button in dark context - Strengthen input focus ring (0.12 → 0.3 opacity) - Bump contrast: cell descriptions 0.5→0.6, placeholder 0.28→0.4, footer/icons 0.3→0.35 (via panel-dim token) - Add aria-hidden to decorative button SVGs - Remove redundant aria-label from buttons with visible text - Set counter initial values to targets in HTML Cleanup: - Delete orphaned src/scripts/copy-to-clipboard.ts - Remove dead sitemap filters from astro.config.mjs - Add .playwright-mcp/ and .superdesign/ to .gitignore - Remove dead --logo-glow CSS variable from LogoAnimated - Fix hardcoded transition in LogoAnimated to use tokens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…files P0 fixes: - Email input: :focus → :focus-visible with stronger ring (0.3 opacity) - Email form: disable button during submission to prevent double-submit - Email form: add aria-required, aria-invalid, restore original placeholder - Tokenize 13 hardcoded rgba values in index.astro → design system tokens - Add missing tokens: --color-panel-tint (0.05), --color-panel-tint-hover (0.08) - Normalize mobile input heights from 50px to 48px (matches system base) - Add pointer-events: none to disabled submit button Stale cleanup: - Rewrite CLAUDE.md to reflect actual current state - Rewrite llms.txt (was referencing old MCP architecture, wrong GitHub org) - Remove public/skills/ (4 files from archived skills repo) - Remove tests/homepage.test.mjs (every test referenced deleted files) - Remove legacy observers from scroll-reveal.ts (.hero, .rupture, data-section, data-animate) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Design tokens added: - Full primary amber ramp (50-900, was 400-600) - Full neutral scale (50, 600 added to fill gaps) - Semantic colors: warning, info (had success, destructive) - Light surface tokens: --color-fg, --color-fg-muted, --color-fg-dim, --color-border, --color-border-hover, --color-surface, --color-surface-raised - --radius-full (pill shapes), --shadow-elevated Components added (@layer components): - .btn (primary, secondary, ghost) with sizes (sm, md, lg) - .badge (default, primary, success, destructive) - .card (bordered + flat variant) - .label (mono uppercase, + muted variant) - .code (inline) and .code-block (+ header) - .divider (light + panel variant) Brand reference page (/brand): - Demonstrates all tokens, typography, and components - Shows dark panel surface usage - noindex, excluded from sitemap - Live email form demos (all 3 variants) Also: removed unused Geist weight 300 from font URL Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add subtle hover micro-interactions to badges, buttons, code, and brand page demos (swatches, radius, shadows, token table). Move ~25 inline style attributes in brand.astro to scoped CSS classes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove translateY hover from all buttons, email submits, and cards - Remove unnecessary transform transitions and badge/code hover effects - Fix CSS specificity: .brand-section h3 was overriding dark panel heading color (invisible text) and type sample sizes - Shadow demos escalate on hover, radius demos darken border only Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Strip amber box-shadow hover glows from btn--primary, btn--secondary, email-signup__submit, email-form__btn. Remove hero card button glow animation. Hover is now background-color-only. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Nav.astro: sticky header with LogoAnimated, site name, and links - Footer.astro: shared footer with social icons and ctrlswing attribution - .link component: inline underline links with muted variant - Typography scale tokens (--text-xs through --text-4xl) - Spacing scale tokens (--space-1 through --space-16) - Brand page: add Nav/Footer, link demos, token docs, spacing visualization - Clean up brand header (no logo—Nav handles it), remove old footer styles Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Nav: floating pill centered on page with frosted glass background, backdrop blur, grouped link pills in segmented control style. Inspired by Raycast/Linear/Dub.co floating nav pattern. Brand header: dark panel hero block with large "Design System" display type, oversized "47" watermark, and section anchor pills for quick navigation. Creates a strong identity moment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Nav: max-width 960px (matches page content), removed "channel47" text — logo does the work alone. Removed unused .nav__name styles. Footer: replaced border-top with a Unicode signal waveform strip using lower-block characters (▁▂▃▄▅▆▇█). Alternating tall and short peaks create a modulated broadcast wave — ties into the Channel 47 identity and LogoAnimated block-character vocabulary. Amber-colored at 20% opacity. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace pill radius (--radius-full) with design system tokens (--radius-md outer, --radius-xs inner) for shape consistency with the geometric logo. Footer signal strip upgraded from subtle 8px single-line to bold 14px 3-line woven waveform in amber. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replaces the 15-section design system reference (1050 lines of swatch rows, token tables, spacing bars) with 5 focused visual moments that show the brand in use rather than in isolation: 1. The Mark — cinematic hero with LogoAnimated at 2x, wordmark, watermark 2. Palette — just 3 color blocks (cream, amber, charcoal), no 10-shade rows 3. Voice — typography shown as real brand copy, not specimen labels 4. In Context — single dark panel vignette composing badges, code, email, buttons together as a natural UI scene 5. Elements — tight grid of interactive cells (buttons, badges, radius, motion, type scale, signal waveform) https://claude.ai/code/session_01J44ZBbNKdEtErkYFL2ccUv
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
2 participants
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.
Comprehensive plan doc covering 9 workstreams: site architecture,
content strategy, page CRO, email sequence, AI SEO, launch strategy,
schema markup, analytics tracking, and copywriting decisions. CLAUDE.md
slimmed to point at plan doc with work discipline rules (commit after
every task, keep plan doc current).
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com