diff options
| author | soryu-co <bot@soryu.co> | 2026-05-06 15:24:01 +0000 |
|---|---|---|
| committer | soryu-co <bot@soryu.co> | 2026-05-06 15:24:01 +0000 |
| commit | 27d8b9e2aa07bc38a134d0d3c9a6488ec423bfb1 (patch) | |
| tree | 5496ea1f9aa27d39eca9dc3a892975eeb627556f | |
| parent | c99ad2bcc75e330fc66d78452d604747cf2d3443 (diff) | |
| download | soryu-27d8b9e2aa07bc38a134d0d3c9a6488ec423bfb1.tar.gz soryu-27d8b9e2aa07bc38a134d0d3c9a6488ec423bfb1.zip | |
Remove vertical accent rule from Mission/MAKIMA text columns
The 2px amber/magenta border-left + 18px indent on the right-column
text was reading as another border running parallel to the SVG image
on the left. The animated SVG already supplies all the framing the
panels need, so the rule is now redundant noise.
Removed in three places:
- .mission-screen wrapper (base + .makima-screen variant)
- desktop (>=1025px) per-block rule on headline + paragraph
- mobile (<=768px) leftover padding-left: 14px on headline
Verified: borderLeft = 0 on wrapper, headline, and paragraph(s) on
both Mission and MAKIMA. Headline + body now sit flush with the badge
at the same column edge (x=680 at 1280px).
| -rw-r--r-- | frontend/src/styles/heisei.css | 28 |
1 files changed, 11 insertions, 17 deletions
diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css index e90e492..3ccec4d 100644 --- a/frontend/src/styles/heisei.css +++ b/frontend/src/styles/heisei.css @@ -407,16 +407,15 @@ body { background: var(--hz-night); color: var(--hz-ink); } 7. Mission / Makima screens — Heisei magazine column ---------------------------------------------------------------- */ -/* Move the accent rule + indent onto the wrapper so headline, image, - and body share one consistent column edge */ +/* No more wrapper-level accent rule — body text sits flat without a + coloured indent line (the SVG owns the only visible frame on the page) */ .mission-screen { gap: 20px; - padding-left: 18px; - border-left: 2px solid var(--hz-amber); + padding-left: 0; + border-left: 0; max-width: 720px; } .mission-screen.makima-screen { - border-left-color: var(--hz-mag); gap: 14px; } @@ -485,11 +484,12 @@ body { background: var(--hz-night); color: var(--hz-ink); } /* SVG owns its frame — keep only the soft drop-shadow for elevation */ box-shadow: 0 24px 60px -24px rgba(8, 10, 24, 0.85); } - /* Right-column text: each block owns its own accent rule */ + /* Right-column text: no accent rule — keep the layout clean. + The SVG image on the left supplies all the framing. */ .mission-screen .mission-headline, .mission-screen .mission-paragraph { - padding-left: 18px; - border-left: 2px solid var(--hz-amber); + padding-left: 0; + border-left: 0; margin: 0; } .mission-screen .mission-headline + .mission-paragraph { @@ -498,16 +498,10 @@ body { background: var(--hz-night); color: var(--hz-ink); } .mission-screen .mission-paragraph + .mission-paragraph { margin-top: 8px; } - /* Makima — magenta rule */ - .mission-screen.makima-screen .mission-headline, - .mission-screen.makima-screen .mission-paragraph { - border-left-color: var(--hz-mag); - } - /* Badge: align with the rule's left edge, sit above the headline. - JSX order is headline→badge→…; reorder visually with flex order. */ + /* Badge: align with the rest of the right-column flow (no indent). */ .mission-screen.makima-screen .makima-badge { align-self: flex-start; - margin: 0 0 12px 18px; + margin: 0 0 12px 0; order: -1; } .mission-screen.makima-screen .mission-headline { order: 0; } @@ -820,7 +814,7 @@ body { background: var(--hz-night); color: var(--hz-ink); } .modern-landing-page.manga-style .masthead-vertical .jp { font-size: 24px; } .modern-landing-page.manga-style .masthead-vertical .en { font-size: 8px; } - .mission-headline { font-size: 22px; padding-left: 14px; } + .mission-headline { font-size: 22px; padding-left: 0; } .mission-paragraph { font-size: 13px; } .modern-landing-page.manga-style .hero::after { font-size: 9px; letter-spacing: 0.2em; } |
