diff options
| author | soryu-co <bot@soryu.co> | 2026-05-06 12:39:02 +0000 |
|---|---|---|
| committer | soryu-co <bot@soryu.co> | 2026-05-06 12:39:02 +0000 |
| commit | 30bfe2149fdead196c08a8cfaf5bb5415e6ee7c4 (patch) | |
| tree | 393934a1aadcca9fb42a517bad84faf679df2229 /makima/frontend/src/lib | |
| parent | 771ece20e5e669f93fc0aba0459ac1ff2fa0825b (diff) | |
| download | soryu-30bfe2149fdead196c08a8cfaf5bb5415e6ee7c4.tar.gz soryu-30bfe2149fdead196c08a8cfaf5bb5415e6ee7c4.zip | |
Align mission/makima body, fix mobile bg, add typewriter hero rotator
Three fixes coming out of QA on staging (soryu.eirin.xyz):
1. Mission / MAKIMA body alignment
- The amber/magenta accent rule + 18px indent used to live on
.mission-headline only, so paragraphs (and the mission image)
started 18px to the LEFT of the headline.
- Move the rule + padding-left onto the .mission-screen wrapper
itself. Headline, image, and all paragraph(s) now share one
consistent column edge.
- Tighten the makima-badge so it doesn't stretch the grid column
(justify-self: start + width: max-content). Image gets explicit
width: 100%; display: block to behave inside the column.
2. Mobile background coverage
- pc98.css mobile-block override ('@media max-width:768px') reset
.modern-landing-page to position: relative + margin-top: 100px,
leaving a 100-156px band at the top where only the body color
showed and pushing the wrapper bottom past the viewport.
- Force position: fixed on the wrapper at every breakpoint with
!important. Use 100dvh (dynamic viewport height) so the gradient
follows iOS Safari's collapsing URL bar rather than getting
clipped.
- Mirror the dusk gradient onto <body> as a fallback so any
sub-pixel rounding gap shows the same colour, not white.
3. Typewriter hero rotator
- New <TypewriterRotator/> component (frontend/src/components/
TypewriterRotator.tsx) — types, holds, deletes, gaps, advances.
Honours prefers-reduced-motion (renders the first phrase static).
- LandingPage.tsx renders it inside a new .hero-tagline wrapper
where the old static CSS ::after lived. Five phrases, all
bilingual JP/EN in the same Heisei tactical voice:
* 低遅延ストリーミング · LOW-LATENCY OBSERVABILITY
* リアルタイム監視 · REAL-TIME SURVEILLANCE
* ミッションクリティカル · MISSION-CRITICAL INFRASTRUCTURE
* エンドツーエンド可視化 · END-TO-END VISIBILITY
* 安全な意思決定 · SECURE DECISIONS AT THE EDGE
- Hide the old .hero::after pseudo-tagline; .hero-tagline keeps
the same centred position, amber colour, and tracking.
- Caret blink animation (steps(1), 1s) — separate from the typing
timing so it always blinks at human speed.
npm run build passes (CSS 94 kB / 18.2 kB gzip, JS 238 kB / 75 kB
gzip — +1.5 kB net for the rotator + new phrases).
Verified at 1280x720 / 390x844 via Playwright DOM probe:
- mission/makima: headline.x === paragraph.x === image.x ✓
- mobile: wrapper y=56, h=788, bottom=844 (full coverage) ✓
- typewriter: types, holds, deletes, advances to phrase 2 ✓
Screenshots in docs/heisei-screenshots/after-*.jpg refreshed.
Staging at soryu.eirin.xyz updated via rsync.
Diffstat (limited to 'makima/frontend/src/lib')
0 files changed, 0 insertions, 0 deletions