news-digest: responsive layout — proper desk-head grid + 480px phone tier
Three things were broken on phones: 1. The collapse button I added to .desk-head had no grid placement, so it auto-flowed into the desk-sub row and looked like a floating chevron. Made the desk-head grid 4 columns explicit (num | title | count | collapse) and pinned the button to col 4 row 1. 2. The 720px breakpoint was the only one — everything inherited tablet rules at iPhone widths. Added a true-phone tier at ≤480 px that hides the section number badge and the rail gutter, floats chips inline above the title, makes the jumpnav horizontally scrollable for narrow widths, drops the edition number, and bumps touch targets. 3. Long URLs / unbroken tokens could push horizontal overflow. Added overflow-wrap: anywhere on titles + tldrs and overflow-x: hidden on body as a belt-and-suspenders catch.
This commit is contained in:
@@ -260,7 +260,9 @@ a:hover { color: var(--accent); }
|
||||
|
||||
.desk-head {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
/* num | title | count | collapse — explicit columns so the
|
||||
collapse button doesn't auto-flow into the desk-sub row. */
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
align-items: baseline;
|
||||
column-gap: 16px;
|
||||
padding-bottom: 14px;
|
||||
@@ -310,11 +312,13 @@ a:hover { color: var(--accent); }
|
||||
persisted in localStorage by section id (#world, #local, etc), so
|
||||
each device remembers per-user preference. */
|
||||
.desk-collapse {
|
||||
grid-column: 4 / 5;
|
||||
grid-row: 1 / 2;
|
||||
align-self: center;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
margin-left: 12px;
|
||||
padding: 4px 8px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
@@ -880,7 +884,11 @@ a:hover { color: var(--accent); }
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------
|
||||
responsive
|
||||
responsive — two breakpoints:
|
||||
≤ 720 px : tablet / narrow desktop. Soften the layout but still
|
||||
room for two-column-ish.
|
||||
≤ 480 px : true phone. Strip the rail, hide section numbers, tighten
|
||||
everything for a single-thumb scroll.
|
||||
------------------------------------------------------------------------- */
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@@ -888,30 +896,64 @@ a:hover { color: var(--accent); }
|
||||
.masthead-inner {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
padding: 24px var(--pad-x) 16px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
.masthead-brand,
|
||||
.masthead-edition,
|
||||
.masthead-meta { grid-column: 1 / 2; }
|
||||
.masthead-edition { justify-content: flex-start; }
|
||||
.edition-stamp { font-size: 18px; }
|
||||
.masthead-meta { grid-template-columns: 1fr; gap: 6px; }
|
||||
.desk-title { font-size: 28px; }
|
||||
.desk-head { grid-template-columns: auto 1fr; row-gap: 6px; }
|
||||
.desk-sub { grid-column: 1 / 3; padding-left: 0; }
|
||||
.desk-count { display: none; }
|
||||
.item { grid-template-columns: 64px 1fr; column-gap: 14px; }
|
||||
.item-rail { padding-top: 4px; }
|
||||
.masthead-edition { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
|
||||
.edition-stamp { font-size: 16px; padding: 3px 8px; }
|
||||
.masthead-meta {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.meta-row { font-size: 10.5px; flex-wrap: wrap; }
|
||||
|
||||
.jumpnav ol { gap: 18px; padding: 10px var(--pad-x); }
|
||||
|
||||
/* Desk header: num / title row 1, sub spans below, count + collapse
|
||||
pushed to row 1 right-side. */
|
||||
.desk-head {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
row-gap: 6px;
|
||||
}
|
||||
.desk-num { padding-top: 2px; }
|
||||
.desk-title { font-size: 26px; }
|
||||
.desk-sub {
|
||||
grid-column: 1 / 4;
|
||||
padding-left: 0;
|
||||
padding-bottom: 0;
|
||||
align-self: start;
|
||||
}
|
||||
.desk-count { font-size: 10px; align-self: center; }
|
||||
.desk-collapse {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 2;
|
||||
margin-left: 4px;
|
||||
/* Bigger touch target for thumbs. */
|
||||
padding: 6px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Items — keep the rail but compact it. */
|
||||
.item { grid-template-columns: 60px 1fr; column-gap: 12px; }
|
||||
.item-rail { padding-top: 4px; gap: 4px; }
|
||||
.chip { font-size: 9.5px; padding: 1px 6px; }
|
||||
.item-title { font-size: 18px; }
|
||||
.item-tldr { font-size: 14px; }
|
||||
|
||||
.colophon-inner { grid-template-columns: 1fr; }
|
||||
/* On touch screens there's no hover, so the × always shows. Slightly
|
||||
bigger tap target too. */
|
||||
.item-hide { opacity: 1; width: 28px; height: 28px; font-size: 20px; }
|
||||
|
||||
/* On touch screens there's no hover, so the × always shows.
|
||||
Slightly bigger tap target too (44×44 minimum is the WCAG ask;
|
||||
28 is the visible bullseye, padded to ~44 effective via the
|
||||
parent .item gutter). */
|
||||
.item-hide { opacity: 1; width: 30px; height: 30px; font-size: 20px; }
|
||||
.hidden-tray { padding: 12px 14px; }
|
||||
|
||||
/* Headlines: stack title / source / time / tldr vertically on narrow
|
||||
screens so the title gets the full width. */
|
||||
/* Headlines: stack title / source / time / tldr vertically. */
|
||||
.headline {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
@@ -925,5 +967,74 @@ a:hover { color: var(--accent); }
|
||||
grid-row: auto;
|
||||
}
|
||||
.headline-time { text-align: left; }
|
||||
.headline-tldr { font-size: 13.5px; }
|
||||
.headline-tldr { font-size: 14px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root { --pad-x: 14px; }
|
||||
|
||||
/* Masthead: shrink the brand strip, drop the edition number badge. */
|
||||
.masthead-inner { padding: 18px var(--pad-x) 12px; }
|
||||
.brand-glyph { font-size: 26px; }
|
||||
.brand-mark { font-size: 12px; letter-spacing: .14em; }
|
||||
.edition-num { display: none; }
|
||||
.archive-link { font-size: 10px; }
|
||||
|
||||
.jumpnav ol {
|
||||
gap: 14px;
|
||||
font-size: 10.5px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.jumpnav { -webkit-overflow-scrolling: touch; }
|
||||
|
||||
/* Phone: drop the section number badge AND the rail. Chips for
|
||||
reddit cards float into the body inline (the "▲ 234" stays
|
||||
useful but the column itself is wasteful at this width). */
|
||||
.desk-num { display: none; }
|
||||
.desk-head { grid-template-columns: 1fr auto; column-gap: 10px; }
|
||||
.desk-title { font-size: 22px; }
|
||||
.desk-sub { grid-column: 1 / 3; }
|
||||
.desk-count { display: none; }
|
||||
.desk-collapse { grid-column: 2 / 3; padding: 8px 12px; }
|
||||
|
||||
/* Strip the rail entirely; chips go inline above the title. Keeps
|
||||
score/comment context but reclaims the 60px gutter for content. */
|
||||
.item {
|
||||
grid-template-columns: 1fr;
|
||||
column-gap: 0;
|
||||
row-gap: 6px;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
.item-rail {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
gap: 6px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.chip { font-size: 9px; padding: 1px 5px; }
|
||||
.item-title { font-size: 17px; line-height: 1.3; }
|
||||
.item-tldr { font-size: 13.5px; }
|
||||
.item-foot { gap: 10px; font-size: 10px; }
|
||||
.action { padding: 4px 8px; font-size: 10px; }
|
||||
.item-meta-row { margin-left: 0; flex-basis: 100%; }
|
||||
|
||||
.colophon { padding: 18px var(--pad-x); margin-top: 32px; }
|
||||
.colophon-block .meta-value { font-size: 10.5px; word-break: break-word; }
|
||||
|
||||
.brief { padding: 20px var(--pad-x) 40px; }
|
||||
.desk + .desk { margin-top: 40px; }
|
||||
}
|
||||
|
||||
/* Belt-and-suspenders: never let a long URL or unbroken token push
|
||||
horizontal overflow. */
|
||||
@media (max-width: 720px) {
|
||||
body { overflow-x: hidden; }
|
||||
.item-title, .item-tldr, .headline-title, .headline-tldr {
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user