summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorsoryu-co <bot@soryu.co>2026-05-06 11:21:38 +0000
committersoryu-co <bot@soryu.co>2026-05-06 11:21:38 +0000
commitdcfea4c42dcd6cce6e9f80d22cfc51b9b28ba104 (patch)
tree42495b48fd971818f6586d7b0c5541d19d113432
parentf810781c1c612f276cd5b954a9f93a2101b0274f (diff)
downloadsoryu-dcfea4c42dcd6cce6e9f80d22cfc51b9b28ba104.tar.gz
soryu-dcfea4c42dcd6cce6e9f80d22cfc51b9b28ba104.zip
Center mobile navbar buttons (kill leftover pc98 margin-top)
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.
-rw-r--r--docs/heisei-screenshots/after-01-desktop-default.jpgbin104425 -> 104420 bytes
-rw-r--r--docs/heisei-screenshots/after-02-desktop-mission.jpgbin302138 -> 302134 bytes
-rw-r--r--docs/heisei-screenshots/after-03-desktop-makima.jpgbin96167 -> 96165 bytes
-rw-r--r--docs/heisei-screenshots/after-04-desktop-login-hover.jpgbin104554 -> 104514 bytes
-rw-r--r--docs/heisei-screenshots/after-05-mobile-default.jpgbin64248 -> 64719 bytes
-rw-r--r--docs/heisei-screenshots/after-06-mobile-mission.jpgbin177493 -> 178036 bytes
-rw-r--r--frontend/src/styles/heisei.css28
7 files changed, 22 insertions, 6 deletions
diff --git a/docs/heisei-screenshots/after-01-desktop-default.jpg b/docs/heisei-screenshots/after-01-desktop-default.jpg
index 5db2c00..5e6a52b 100644
--- a/docs/heisei-screenshots/after-01-desktop-default.jpg
+++ b/docs/heisei-screenshots/after-01-desktop-default.jpg
Binary files differ
diff --git a/docs/heisei-screenshots/after-02-desktop-mission.jpg b/docs/heisei-screenshots/after-02-desktop-mission.jpg
index 014f9ff..213a961 100644
--- a/docs/heisei-screenshots/after-02-desktop-mission.jpg
+++ b/docs/heisei-screenshots/after-02-desktop-mission.jpg
Binary files differ
diff --git a/docs/heisei-screenshots/after-03-desktop-makima.jpg b/docs/heisei-screenshots/after-03-desktop-makima.jpg
index 8aff25f..93049b3 100644
--- a/docs/heisei-screenshots/after-03-desktop-makima.jpg
+++ b/docs/heisei-screenshots/after-03-desktop-makima.jpg
Binary files differ
diff --git a/docs/heisei-screenshots/after-04-desktop-login-hover.jpg b/docs/heisei-screenshots/after-04-desktop-login-hover.jpg
index 4ff0276..e510696 100644
--- a/docs/heisei-screenshots/after-04-desktop-login-hover.jpg
+++ b/docs/heisei-screenshots/after-04-desktop-login-hover.jpg
Binary files differ
diff --git a/docs/heisei-screenshots/after-05-mobile-default.jpg b/docs/heisei-screenshots/after-05-mobile-default.jpg
index e7e3dab..8b5760d 100644
--- a/docs/heisei-screenshots/after-05-mobile-default.jpg
+++ b/docs/heisei-screenshots/after-05-mobile-default.jpg
Binary files differ
diff --git a/docs/heisei-screenshots/after-06-mobile-mission.jpg b/docs/heisei-screenshots/after-06-mobile-mission.jpg
index 6d174c7..6b0ed8c 100644
--- a/docs/heisei-screenshots/after-06-mobile-mission.jpg
+++ b/docs/heisei-screenshots/after-06-mobile-mission.jpg
Binary files differ
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;