[PR #3903] feat(website): polish interactions and remove em dashes #5963

Open
opened 2026-10-31 01:10:46 +00:00 by bsakaguchi · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/morluto/rea/pull/3903
Author: @Nathandona
Created: 10/15/2026
Status: 🔄 Open

Base: main ← Head: website/polish-design


📝 Commits (2)

  • b66458a feat(website): add interaction feedback, numbered steps and clickable case cards
  • d592062 docs(website): replace em dashes in titles and prose

📊 Changes

45 files changed (+4495 additions, -4269 deletions)

View changed files

📝 website/locales/ar/messages.po (+209 -209)
📝 website/locales/de/messages.po (+209 -209)
📝 website/locales/el/messages.po (+209 -209)
📝 website/locales/es/messages.po (+209 -209)
📝 website/locales/fa/messages.po (+209 -209)
📝 website/locales/fr/messages.po (+209 -209)
📝 website/locales/id/messages.po (+209 -209)
📝 website/locales/it/messages.po (+208 -208)
📝 website/locales/ja/messages.po (+209 -209)
📝 website/locales/ko/messages.po (+209 -209)
📝 website/locales/messages.pot (+196 -197)
📝 website/locales/pl/messages.po (+209 -209)
📝 website/locales/pt-BR/messages.po (+210 -209)
📝 website/locales/ru/messages.po (+0 -0)
📝 website/locales/th/messages.po (+0 -0)
📝 website/locales/tr/messages.po (+0 -0)
📝 website/locales/uk/messages.po (+0 -0)
📝 website/locales/vi/messages.po (+0 -0)
📝 website/locales/zh-CN/messages.po (+0 -0)
📝 website/locales/zh-TW/messages.po (+0 -0)

...and 25 more files

📄 Description

Summary

Polish to the website's interactions within the existing visual system, plus removal of em dashes from English page titles and prose. Palette and layout tokens are unchanged.

Problem and expected behavior

  • Buttons, copy controls and header controls switched color instantly and gave no feedback when pressed.
  • On the homepage, a case-study card opened its page only through the underlined link at the bottom; the rest of the card was inert.
  • The three "How it works" steps used the browser's default 1. list markers, which read as a plain list rather than a sequence.
  • The language menu and opened <details> appeared abruptly, and the disclosure markers were the default triangles.

Change and scope

  • Interaction feedback: 150ms color transitions on controls and a scale(0.97) pressed state (--press), with a shared --ease-out curve. Hover color changes are unchanged apart from the transition.
  • How it works: numbered badges joined by a thin rule. On phones the rule becomes vertical, and in RTL the order mirrors.
  • Case cards: the existing text link is stretched to cover the card. The focus ring moves to the card, and on pointer devices hovering the card highlights its border. The link text and markup are unchanged.
  • Menus and details: the language menu enters with a short fade and scale from its corner. FAQ, evidence and homepage disclosures get a rotating chevron, and their content fades in when opened.
  • Typography: text-wrap: balance on headings and text-wrap: pretty on paragraphs to avoid orphans.
  • Reduced motion: keeps the opacity and color changes and removes all movement.
  • Style guide: one paragraph documents these rules so later components reuse them.

Em dashes: page titles now use | REA as the separator (REA: … for the home and Blog titles). The homepage reading and help links, the contributors intro and one Touhou sentence are rewritten without em dashes. To keep translations from falling back to English, each catalog's msgid was renamed to the new English wording with its existing msgstr kept, since the meaning is unchanged. Translated title separators (—REA, -REA and similar) were normalized to | REA. Other punctuation inside translations is left to native reviewers.

Not included: header layout (covered by #3598), copy text, colors, new fonts, shadows, gradients and scroll effects.

Contract and boundary impact

  • Semantic owner and earliest changed stage: website/public/assets/styles.css

  • Contribution scope fit and linked maintainer decision: not applicable (website styling only)

  • CLI and MCP/tool-catalog contract: none

  • Provider, bridge, target-format, or platform compatibility: none

  • Evidence, artifact, provenance, or reconstruction contract: none

  • Target selection, authority, upstream behavior, and cleanup details: not applicable

  • Generated metadata, package, or installation impact: none

  • Documentation or usability only; no target interaction.

Evidence and regression coverage

  • Tests added or updated: none (visual CSS change)
  • Base reproduction or other evidence: local preview screenshots with Chrome via Playwright: homepage steps and cards in light and dark, homepage at 390px, Arabic (/ar/) RTL steps and the FAQ disclosure. A scripted click inside the first case card, away from the link text, navigated to showcase/aegis/. At 390px, document.documentElement.scrollWidth was 390, so there is no horizontal page scroll.
  • Remaining proof gaps: Safari and Firefox not checked. @starting-style entry transitions are progressive and fall back to an instant appearance in browsers without support. The /rea/ base path was not previewed.

Validation performed

  • python3 scripts/website.py check: exit 0
  • python3 scripts/website.py translations status: all 19 catalogs 1728/1728 translated, 0 missing or fuzzy
  • grep -rho "—" website/public --include='*.html' | wc -l: 0
  • npx oxfmt@0.72.0 --check on the changed CSS, HTML and style guide: all files formatted

Compatibility, safety, and release

  • Breaking changes or migration steps: none
  • Real Hopper/Ghidra, browser, or OS coverage: Chrome on Linux only
  • Package or release metadata impact: none
  • Security, privacy, process, or containment review: not applicable

Author readiness

Human owner: @Nathandona

  • I reviewed the final diff and relevant existing code, understand the change and its edge cases, and take responsibility for the complete PR, including AI-assisted work.
  • I checked the evidence above, confirmed it supports the current change, and recorded meaningful validation gaps.
  • I declare this PR ready for initial maintainer review.

Before merge

  • This PR addresses a concrete problem or an agreed enhancement.
  • Material scope and authority questions are resolved, and any required maintainer scope decision covers the final diff.
  • The PR has one focused outcome and the title follows type(scope): outcome.
  • Related issue is linked, or the reason for not linking one is stated above.
  • Tests cover changed observable behavior and meaningful failure paths.
  • Owning docs, contracts, and generated metadata are updated where needed.
  • User-visible CLI/MCP changes include representative output.
  • I checked the final diff for secrets, unrelated cleanup, and unsupported claims.

🤖 Generated with Claude Code


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/morluto/rea/pull/3903 **Author:** [@Nathandona](https://github.com/Nathandona) **Created:** 10/15/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `website/polish-design` --- ### 📝 Commits (2) - [`b66458a`](https://github.com/morluto/rea/commit/b66458a4011b8d03779d49755651e3180881ef88) feat(website): add interaction feedback, numbered steps and clickable case cards - [`d592062`](https://github.com/morluto/rea/commit/d5920627db14738a19352e4b408f64551ee4067a) docs(website): replace em dashes in titles and prose ### 📊 Changes **45 files changed** (+4495 additions, -4269 deletions) <details> <summary>View changed files</summary> 📝 `website/locales/ar/messages.po` (+209 -209) 📝 `website/locales/de/messages.po` (+209 -209) 📝 `website/locales/el/messages.po` (+209 -209) 📝 `website/locales/es/messages.po` (+209 -209) 📝 `website/locales/fa/messages.po` (+209 -209) 📝 `website/locales/fr/messages.po` (+209 -209) 📝 `website/locales/id/messages.po` (+209 -209) 📝 `website/locales/it/messages.po` (+208 -208) 📝 `website/locales/ja/messages.po` (+209 -209) 📝 `website/locales/ko/messages.po` (+209 -209) 📝 `website/locales/messages.pot` (+196 -197) 📝 `website/locales/pl/messages.po` (+209 -209) 📝 `website/locales/pt-BR/messages.po` (+210 -209) 📝 `website/locales/ru/messages.po` (+0 -0) 📝 `website/locales/th/messages.po` (+0 -0) 📝 `website/locales/tr/messages.po` (+0 -0) 📝 `website/locales/uk/messages.po` (+0 -0) 📝 `website/locales/vi/messages.po` (+0 -0) 📝 `website/locales/zh-CN/messages.po` (+0 -0) 📝 `website/locales/zh-TW/messages.po` (+0 -0) _...and 25 more files_ </details> ### 📄 Description ## Summary Polish to the website's interactions within the existing visual system, plus removal of em dashes from English page titles and prose. Palette and layout tokens are unchanged. ## Problem and expected behavior - Buttons, copy controls and header controls switched color instantly and gave no feedback when pressed. - On the homepage, a case-study card opened its page only through the underlined link at the bottom; the rest of the card was inert. - The three "How it works" steps used the browser's default `1.` list markers, which read as a plain list rather than a sequence. - The language menu and opened `<details>` appeared abruptly, and the disclosure markers were the default triangles. ## Change and scope - **Interaction feedback:** 150ms color transitions on controls and a `scale(0.97)` pressed state (`--press`), with a shared `--ease-out` curve. Hover color changes are unchanged apart from the transition. - **How it works:** numbered badges joined by a thin rule. On phones the rule becomes vertical, and in RTL the order mirrors. - **Case cards:** the existing text link is stretched to cover the card. The focus ring moves to the card, and on pointer devices hovering the card highlights its border. The link text and markup are unchanged. - **Menus and details:** the language menu enters with a short fade and scale from its corner. FAQ, evidence and homepage disclosures get a rotating chevron, and their content fades in when opened. - **Typography:** `text-wrap: balance` on headings and `text-wrap: pretty` on paragraphs to avoid orphans. - **Reduced motion:** keeps the opacity and color changes and removes all movement. - **Style guide:** one paragraph documents these rules so later components reuse them. **Em dashes:** page titles now use ` | REA` as the separator (`REA: …` for the home and Blog titles). The homepage reading and help links, the contributors intro and one Touhou sentence are rewritten without em dashes. To keep translations from falling back to English, each catalog's `msgid` was renamed to the new English wording with its existing `msgstr` kept, since the meaning is unchanged. Translated title separators (`—REA`, `-REA` and similar) were normalized to ` | REA`. Other punctuation inside translations is left to native reviewers. Not included: header layout (covered by #3598), copy text, colors, new fonts, shadows, gradients and scroll effects. ## Contract and boundary impact - Semantic owner and earliest changed stage: `website/public/assets/styles.css` - Contribution scope fit and linked maintainer decision: not applicable (website styling only) - CLI and MCP/tool-catalog contract: none - Provider, bridge, target-format, or platform compatibility: none - Evidence, artifact, provenance, or reconstruction contract: none - Target selection, authority, upstream behavior, and cleanup details: not applicable - Generated metadata, package, or installation impact: none - [x] Documentation or usability only; no target interaction. ## Evidence and regression coverage - Tests added or updated: none (visual CSS change) - Base reproduction or other evidence: local preview screenshots with Chrome via Playwright: homepage steps and cards in light and dark, homepage at 390px, Arabic (`/ar/`) RTL steps and the FAQ disclosure. A scripted click inside the first case card, away from the link text, navigated to `showcase/aegis/`. At 390px, `document.documentElement.scrollWidth` was 390, so there is no horizontal page scroll. - Remaining proof gaps: Safari and Firefox not checked. `@starting-style` entry transitions are progressive and fall back to an instant appearance in browsers without support. The `/rea/` base path was not previewed. ## Validation performed - `python3 scripts/website.py check`: exit 0 - `python3 scripts/website.py translations status`: all 19 catalogs 1728/1728 translated, 0 missing or fuzzy - `grep -rho "—" website/public --include='*.html' | wc -l`: 0 - `npx oxfmt@0.72.0 --check` on the changed CSS, HTML and style guide: all files formatted ## Compatibility, safety, and release - Breaking changes or migration steps: none - Real Hopper/Ghidra, browser, or OS coverage: Chrome on Linux only - Package or release metadata impact: none - Security, privacy, process, or containment review: not applicable ## Author readiness Human owner: @Nathandona - [x] I reviewed the final diff and relevant existing code, understand the change and its edge cases, and take responsibility for the complete PR, including AI-assisted work. - [x] I checked the evidence above, confirmed it supports the current change, and recorded meaningful validation gaps. - [x] I declare this PR ready for initial maintainer review. ## Before merge - [ ] This PR addresses a concrete problem or an agreed enhancement. - [ ] Material scope and authority questions are resolved, and any required maintainer scope decision covers the final diff. - [ ] The PR has one focused outcome and the title follows `type(scope): outcome`. - [ ] Related issue is linked, or the reason for not linking one is stated above. - [ ] Tests cover changed observable behavior and meaningful failure paths. - [ ] Owning docs, contracts, and generated metadata are updated where needed. - [ ] User-visible CLI/MCP changes include representative output. - [ ] I checked the final diff for secrets, unrelated cleanup, and unsupported claims. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
morluto/rea#5963
No description provided.