Skip to content

Redesign the About page around Apple's interface guidelines - #12

Merged
TakeruF merged 2 commits into
mainfrom
docs/about-page-redesign
Aug 31, 2026
Merged

Redesign the About page around Apple's interface guidelines#12
TakeruF merged 2 commits into
mainfrom
docs/about-page-redesign

Conversation

@TakeruF

@TakeruF TakeruF commented Aug 31, 2026

Copy link
Copy Markdown
Owner

Rebuilds docs/index.html (the About / landing page) following Apple's HIG-derived design and motion rules.

Design

  • Typography — size-specific tracking (display -0.035em → body 0 → small caps +0.09em), leading that moves inversely to size, a fluid clamp() scale with spacing in rem so the layout scales with the user's text size, and font-feature-settings: "palt" for Japanese headings.
  • Materials — the nav is a translucent backdrop-filter layer that content scrolls under, with a scroll edge effect (a gradient that fades in once content is beneath it) instead of a permanent 1px divider. Shadow weight now scales with surface size.
  • Dark mode — full token set under prefers-color-scheme; releases.html follows through the shared variables.
  • Hero — type only, on a soft gradient ground that dissolves into the page.

Motion (docs/interactions.js, no dependencies)

A spring parameterised the Apple way (damping ratio + response in seconds) drives a draggable promo carousel:

  • 1:1 pointer tracking with setPointerCapture and grab-offset preserved
  • release velocity → momentum projection (v/1000)·d/(1−d), then handed to the spring as initial velocity
  • grabbing mid-flight resumes from the on-screen value, so there is no jump
  • rubber-banded resistance at the edges; a flick commits on the sign of the velocity, not on distance
  • 10px hysteresis so vertical intent stays with the page scroll; trackpad horizontal swipe, arrow keys, dots and arrow buttons all work

Press feedback fires on pointerdown rather than click.

Accessibility

prefers-reduced-motion, prefers-reduced-transparency and prefers-contrast: more are each handled. Without JavaScript nothing is hidden and the carousel falls back to the original stacked strip. A skip link and in-page nav links were added; the four new strings are translated in all four languages.

Two fixes found along the way

  • The sticky nav never stuck. body { overflow-x: hidden } made <body> the scroll container, so the nav scrolled away. Clipping now lives on <html> only. Verified no horizontal overflow from 320px to 1920px.
  • The four onboarding screenshots carried 48px of transparent padding on the right, which read as an off-centre frame once they were given shadows and rounded corners. Trimmed to 1472×1144 (and ~1.5MB lighter overall).

Verification

Chrome, light/dark/mobile, all four languages (no unresolved i18n keys), JS-disabled and reduced-motion paths, carousel gestures (flick, slow drag, edge rubber-band, mid-flight interrupt, vertical pass-through), and no horizontal overflow at eight widths.

🤖 Generated with Claude Code

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Aug 31, 2026

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review Completed 2026-08-31T04:41:11.426661Z 74b483b PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 74b483bbbc

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread docs/interactions.js
Comment thread docs/interactions.js Outdated
An abandoned gesture could leave the track parked between slides:
pointerdown stops the loop and clears velocity before horizontal intent is
known, but a tap inside the 10px hysteresis returns early from endDrag, and
a vertical move clears activePointer so endDrag never runs at all. Both
paths now resume the pending motion.

Reduced motion also still slid a full viewport width on every arrow, dot,
key and drag release — only faster, at a 150ms response. It now lands on the
target slide without traversing. Dragging stays 1:1, since that is the
finger rather than an animation.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@TakeruF
TakeruF merged commit b844140 into main Aug 31, 2026
2 checks passed
@TakeruF
TakeruF deleted the docs/about-page-redesign branch August 31, 2026 04:46
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