diff options
| author | soryu-co <bot@soryu.co> | 2026-05-06 11:30:27 +0000 |
|---|---|---|
| committer | soryu-co <bot@soryu.co> | 2026-05-06 11:30:27 +0000 |
| commit | 771ece20e5e669f93fc0aba0459ac1ff2fa0825b (patch) | |
| tree | 81ebd2324d831d9921d876e203629b3966a4c222 /frontend/src/components | |
| parent | dcfea4c42dcd6cce6e9f80d22cfc51b9b28ba104 (diff) | |
| download | soryu-771ece20e5e669f93fc0aba0459ac1ff2fa0825b.tar.gz soryu-771ece20e5e669f93fc0aba0459ac1ff2fa0825b.zip | |
Tighten mission/makima top space and use highlighted nav state
The CTA row is now a top navbar, so the old 'Close' label on the
active panel button is redundant — the button itself should look
like the current page. Two fixes here:
1. Replace 'Close' with a persistent active highlight.
- LandingPage.tsx: button keeps its label ('Mission' / 'MAKIMA')
and gains an is-active class + aria-current="page" when its
panel is open. heisei.css renders the active state as a solid
amber underline + amber text — same visual language as the
hover indicator, just persistent.
- The button still toggles the panel closed when clicked again,
so the interaction is unchanged; only the labelling moved.
2. Remove the white-space band above mission content.
- The legacy .modern-landing-page wrapper from pc98.css pinned
itself at top: 120px and height: calc(100vh - 120px), matching
the original 120px-tall floating header. The new header is
72px (56px on mobile), which left ~50px of dead space below
the navbar before the mission/makima content started.
- Override the wrapper to top: 72px / height: calc(100vh - 72px)
on desktop and 56px on mobile so it sits flush under the
header.
- Cover-content padding-top retuned for the new wrapper origin:
desktop default 84px, mission-mode 72px (navbar 52 + 20 gap).
Mobile default 76px, mission-mode 64px (navbar 48 + 16 gap).
Verified at 1280x720:
navbar y=72-124 · mission headline starts y=144 · 20px gap ✓
active Mission button: 'taisho-cta is-active', aria-current=page ✓
npm run build passes (CSS 92.6 kB / 18.1 kB gzip). Screenshots in
docs/heisei-screenshots/after-*.jpg refreshed against the tightened
layout.
Diffstat (limited to 'frontend/src/components')
| -rw-r--r-- | frontend/src/components/LandingPage.tsx | 40 |
1 files changed, 24 insertions, 16 deletions
diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index f126d6f..931fe68 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -192,23 +192,31 @@ export function LandingPage({ onLogin }: LandingPageProps) { <div className="hero" /> )} - {/* CTA row spanning full width: left Mission/MAKIMA, right Login */} - <div className="cta-area"> - <div className="cta-left"> - <button className="taisho-cta" onClick={handleMission}> - <span className="cta-text">{activePanel === 'mission' ? 'Close' : 'Mission'}</span> - </button> - <button className="taisho-cta" onClick={handleMakimaPanel}> - <span className="cta-text">{activePanel === 'makima' ? 'Close' : 'MAKIMA'}</span> - </button> - </div> - <div className="cta-right"> - <button className="taisho-cta" onClick={handleLogin}> - <span className="cta-icon">▶</span> - <span className="cta-text">Login</span> - </button> - </div> + {/* CTA row spanning full width: left Mission/MAKIMA, right Login */} + <div className="cta-area"> + <div className="cta-left"> + <button + className={`taisho-cta${activePanel === 'mission' ? ' is-active' : ''}`} + aria-current={activePanel === 'mission' ? 'page' : undefined} + onClick={handleMission} + > + <span className="cta-text">Mission</span> + </button> + <button + className={`taisho-cta${activePanel === 'makima' ? ' is-active' : ''}`} + aria-current={activePanel === 'makima' ? 'page' : undefined} + onClick={handleMakimaPanel} + > + <span className="cta-text">MAKIMA</span> + </button> </div> + <div className="cta-right"> + <button className="taisho-cta" onClick={handleLogin}> + <span className="cta-icon">▶</span> + <span className="cta-text">Login</span> + </button> + </div> + </div> </div> </div> |
