From dcfea4c42dcd6cce6e9f80d22cfc51b9b28ba104 Mon Sep 17 00:00:00 2001 From: soryu-co Date: Wed, 6 May 2026 11:21:38 +0000 Subject: Center mobile navbar buttons (kill leftover pc98 margin-top) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The bottom-CTA layout in pc98.css had a mobile-specific margin-top: 20px on .taisho-cta, which carried over into the new top navbar and pushed every button 20px below the navbar's vertical center on mobile (visible misalignment at 390x844 — the Mission/MAKIMA/Login pills were sitting near the bottom edge of the bar). - Add margin: 0 !important to .taisho-cta in heisei.css (and to the mobile-block override) so the legacy column-layout margin is wiped on both breakpoints. - Switch buttons to height: 32px + line-height: 32px for stable vertical centering inside the 48px (mobile) / 52px (desktop) navbar. - Force align-self: center on .cta-left/.cta-right so they don't inherit any stretched height from previously-applied rules. Verified via Playwright DOM probe at 390x844: navbar y=56–104 (centerY 80) · buttons y=64–96 (centerY 80) ✓ And at 1280x720: navbar y=72–124 (centerY 98) · buttons y=83–113 (centerY 98) ✓ Screenshots in docs/heisei-screenshots/after-*.jpg refreshed. --- frontend/src/styles/heisei.css | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) (limited to 'frontend/src') diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css index 0245034..e12481d 100644 --- a/frontend/src/styles/heisei.css +++ b/frontend/src/styles/heisei.css @@ -413,6 +413,7 @@ body { background: var(--hz-night); color: var(--hz-ink); } border: 0 !important; outline: 0; padding: 8px 16px; + margin: 0 !important; /* nuke pc98.css mobile-block margin-top */ font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 11px; @@ -538,14 +539,29 @@ body { background: var(--hz-night); color: var(--hz-ink); } .cta-area { top: 56px; height: 48px; - padding: 6px 14px !important; + padding: 0 14px !important; /* center via flex, not via padding */ gap: 8px; + align-items: center !important; } - .cta-left { gap: 0; } - .taisho-cta { padding: 6px 10px; font-size: 10px; letter-spacing: 0.18em; } - .cta-right .taisho-cta { padding: 6px 14px; font-size: 10px; } - .cta-text { font-size: 10px; } - .cta-icon { font-size: 9px; } + .cta-left, + .cta-right { + height: auto !important; /* don't inherit any column-layout height */ + align-self: center !important; + align-items: center !important; + } + .cta-left { gap: 0; flex-direction: row !important; } + .taisho-cta { + padding: 0 10px; /* let height drive vertical centering */ + height: 32px; + line-height: 32px; + font-size: 10px; + letter-spacing: 0.18em; + align-self: center !important; + margin: 0 !important; /* kill pc98.css mobile margin-top: 20px */ + } + .cta-right .taisho-cta { padding: 0 14px; font-size: 10px; height: 32px; line-height: 32px; } + .cta-text { font-size: 10px; line-height: 32px; } + .cta-icon { font-size: 9px; line-height: 32px; } .modern-landing-page.manga-style .taisho-cover .cover-content { padding: 124px 20px 28px; -- cgit v1.2.3