diff --git a/web/lanes.css b/web/lanes.css index f670c62c..15b72ba4 100644 --- a/web/lanes.css +++ b/web/lanes.css @@ -23,6 +23,8 @@ a { color: inherit; } grid-template-columns: var(--label) 1fr var(--read); gap: 14px; padding: 14px; + /* A plate's tape stops at the screen's edge, so the page never pans. */ + overflow-x: clip; } .lead { grid-column: 1 / 3; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; min-height: 88px; } .lead-em { font-size: 28px; flex: none; } @@ -31,7 +33,8 @@ a { color: inherit; } .lead-text { margin: 0; font-size: 18px; line-height: 1.45; max-width: 70ch; overflow-wrap: anywhere; color: var(--ink); } .lead-text.quiet { color: var(--ink-faint); } .lead-by { margin: 8px 0 0; color: var(--ink-dim); display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; } -.lead-by b { color: var(--ink); font-weight: 600; } +/* A long handle is cut to the line (plate.css `.mention`), not run past it. */ +.lead-by b { min-width: 0; color: var(--ink); font-weight: 600; } .readings { display: flex; flex-direction: column; gap: 12px; padding: 14px; } /* The readings are the graph's sticky note, stuck on a little crooked. */ .readings.plate { background: url(grain.png), var(--sticky); transform: rotate(-0.8deg); } @@ -181,7 +184,8 @@ footer.legend { position: fixed; left: 14px; bottom: 12px; z-index: 3; max-width footer.legend svg { flex: none; } @media (max-width: 1100px) { - .head { grid-template-columns: 1fr; } + /* The column is the screen's width, never the readings' widest row. */ + .head { grid-template-columns: minmax(0, 1fr); } .lead { grid-column: auto; } /* As on the graph, the strip gives way to the readings on a narrow screen. */ .activity { display: none; } @@ -191,8 +195,7 @@ footer.legend svg { flex: none; } /* A phone: the readings under the lead, every lane one column with its trace above what it said, and the legend at the foot of the page. */ @media (max-width: 720px) { - /* A plate's tape stops at the screen's edge, so the page never pans. */ - .head { padding: 8px; gap: 8px; overflow-x: clip; } + .head { padding: 8px; gap: 8px; } .lead { padding: 12px; gap: 10px; min-height: 0; } .lead-em { font-size: 22px; } .lead-text { font-size: 14px; }