Skip to content

Fix mobile + tablet responsive layout, theme-match screenshots, unstick CI#1

Merged
sethbang merged 3 commits into
mainfrom
site/responsive-fixes
May 15, 2026
Merged

Fix mobile + tablet responsive layout, theme-match screenshots, unstick CI#1
sethbang merged 3 commits into
mainfrom
site/responsive-fixes

Conversation

@sethbang
Copy link
Copy Markdown
Owner

Summary

Three related site/CI fixes, batched so this branch's own CI can actually run green.

Responsive layout (site/)

  • Kill the 229px horizontal scroll on phones — the unwrapped xattr command in install step 2 forced the whole page wide. .install-body now has min-width: 0 and the grid track uses minmax(0, 1fr) so pre's overflow-x works.
  • Scope .install-steps grid to direct children (> li) so nested install-options bullets stop rendering as fractured 2-column rows.
  • .reveal is now fail-safe: visible by default, JS opts into the animation via .reveal-armed. If JS stalls, content still shows.
  • Stacked hero (≤960px): constrain .hero-copy to 460px and center it, so tablet widths get the same tidy block as phones instead of a left-stranded install card.
  • 44px min touch targets on header/footer/brand nav links.
  • Below 540px: hero install icon 180→140, smaller pre font.

Screenshots

  • Feature images use <picture> with prefers-color-scheme sources (light/dark), mirroring the hero. Light-mode screenshots no longer clash with the light theme.

CI

  • Drop the retired macos-13 hosted runner from the build matrix (it was queueing jobs for 7+ hours waiting for a runner that no longer exists). Build on macos-14 + macos-15; the macOS 13 floor stays enforced at compile time.

README

  • App icon added above the title; fixed a re-renders word split by a stray line break.

Test plan

  • Verified zero horizontal overflow at 375 / 414 / 430 / 768 / 820 / 1024 / 1440 via Playwright (docWidth == viewport at every width).
  • Verified zero sub-44px touch targets.
  • Verified install step 2 renders as a normal bulleted list.
  • Verified stacked hero is centered at 768 and 820.
  • CI green on macos-14 + macos-15.

🤖 Generated with Claude Code

sethbang and others added 3 commits May 14, 2026 19:04
- Swap each feature image to a <picture> block with prefers-color-scheme
  sources, mirroring the hero pattern. Light-mode screenshots no longer
  clash with the light theme.
- Set explicit width/height per source to keep aspect-ratio honest across
  variants.
- Drop justify-content: center on .hero-copy and pin .hero-install with
  margin-top: auto so the install card bottom aligns with the hero image
  bottom.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Kill 229px horizontal scroll on phones: the unwrapped xattr command in
  install step 2 forced the page wide. .install-body now has min-width: 0
  and the grid track uses minmax(0, 1fr) so pre's overflow-x can work.
- Scope .install-steps grid to direct children (> li) so nested
  install-options bullets stop rendering as fractured 2-column rows.
- Make .reveal fail-safe: base state is visible, JS arms .reveal-armed
  before animating. If JS stalls or fails, content stays shown.
- Stacked hero (<=960px): constrain .hero-copy to 460px and center it so
  tablet widths get the same tidy block as phones, not a left-stranded
  install card.
- Bump header/footer/brand nav links to 44px min touch targets.
- Below 540px: shrink hero install icon 180->140, smaller pre font.
- Fix "re-renders" word split by a stray line break in the README intro.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
GitHub retired the macos-13 hosted runner image, so jobs requesting it
queue indefinitely waiting for a runner that no longer exists. Build on
macos-14 + macos-15 instead. The macOS 13 minimum (LSMinimumSystemVersion)
is a compile-time floor and stays enforced regardless of runner OS.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
markee 2d1cab8 Commit Preview URL

Branch Preview URL
May 15 2026, 08:15 AM

@sethbang sethbang merged commit 23f56d2 into main May 15, 2026
4 checks passed
@sethbang sethbang deleted the site/responsive-fixes branch May 19, 2026 04:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant