Skip to content

Commit 927eefe

Browse files
fix(web): mobile-friendly read-along + remove hard-to-read mobile menu
Hides the topbar burger/drawer entirely so the cramped mobile dropdown no longer appears, but keeps the "Get the weights" CTA visible with compact sizing. In the read-along, drops the 540px desktop min-height when panes stack, tightens pane padding, and adds overflow-wrap so JA and EN spans can't get clipped by the ancestor overflow-x: clip.
1 parent eb50306 commit 927eefe

1 file changed

Lines changed: 25 additions & 7 deletions

File tree

web/app/globals.css

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1147,16 +1147,18 @@ nav.topbar.is-menu-open .topbar__drawer {
11471147
}
11481148

11491149
@media (max-width: 900px) {
1150-
nav.topbar > ul,
1151-
nav.topbar > .cta {
1150+
nav.topbar > ul {
11521151
display: none;
11531152
}
1154-
nav.topbar { padding: 0 22px; height: 56px; }
1155-
.topbar__burger { display: inline-flex; }
1156-
}
1157-
@media (min-width: 901px) {
1158-
.topbar__drawer { display: none; }
1153+
nav.topbar { padding: 0 18px; height: 56px; }
1154+
nav.topbar .cta {
1155+
padding: 8px 12px;
1156+
font-size: 10px;
1157+
letter-spacing: 0.18em;
1158+
}
11591159
}
1160+
.topbar__burger { display: none !important; }
1161+
.topbar__drawer { display: none !important; }
11601162

11611163
/* ── Paper rail (Three.js stage) ─────────────────────────────── */
11621164
#paper-stage {
@@ -2820,6 +2822,17 @@ footer.foot .meta .made {
28202822
text-transform: uppercase;
28212823
color: var(--vermilion);
28222824
}
2825+
/* Stacked panes don't need the desktop 540px min-height: let the
2826+
content size the box so short memos don't leave a dead band, and
2827+
long ones don't get clipped by ancestor `overflow-x: clip`. */
2828+
.ra-pane { padding: 26px 22px; min-height: 0; }
2829+
.ra-pane .ra-text {
2830+
overflow-wrap: anywhere;
2831+
word-break: normal;
2832+
line-break: normal;
2833+
}
2834+
.ra-tab { flex: 1 1 110px; padding: 12px 14px; }
2835+
.ra-tab__name { font-size: 13px; }
28232836
.problem .beats { grid-template-columns: 1fr; }
28242837
.problem .beat { border-right: none; border-bottom: 1px solid var(--rule); }
28252838
.how .how-grid { grid-template-columns: 1fr; }
@@ -2839,6 +2852,11 @@ footer.foot .meta .made {
28392852
.section { padding: 110px 22px; }
28402853
.hero-meta { gap: 14px; font-size: 10px; }
28412854
.topbar.is-visible { padding: 0 18px; height: 56px; }
2855+
.readalong-section { padding-left: 18px; padding-right: 18px; }
2856+
.ra-pane { padding: 22px 18px; }
2857+
.ra-pane .ra-text { font-size: 13px; line-height: 1.85; }
2858+
.ra-pane.en-pane .ra-text { font-size: 15px; line-height: 1.65; }
2859+
.ra-pane .ra-head { font-size: 8px; gap: 8px; flex-wrap: wrap; }
28422860
}
28432861

28442862
@media print {

0 commit comments

Comments
 (0)