diff --git a/web/src/index.css b/web/src/index.css index a22f643..755108b 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -113,11 +113,17 @@ text-wrap: pretty; } -/* Article grid: as many ~20rem columns as the width allows. */ +/* Article grid: as many ~20rem columns as the width allows, capped at 5. + The column minimum grows with the width once 5 columns fit, so a 6th + never appears. */ @utility article-grid { + --grid-gap: 1.5rem; display: grid; - gap: 1.5rem; - grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); + gap: var(--grid-gap); + grid-template-columns: repeat( + auto-fill, + minmax(min(100%, max(20rem, (100% - 4 * var(--grid-gap)) / 5 - 1px)), 1fr) + ); } /* Skip rendering work for off-screen cards in long lists. */ diff --git a/web/src/lib/format.ts b/web/src/lib/format.ts index 2eb2d71..70b7382 100644 --- a/web/src/lib/format.ts +++ b/web/src/lib/format.ts @@ -1,10 +1,16 @@ // Formatters are built once: constructing Intl objects per render is costly in long lists. const shortDate = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }); +const shortDateYear = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' }); + +/** Short date, with the year when it isn't the current one. */ +function shortWithYear(d: Date) { + return d.getFullYear() === new Date().getFullYear() ? shortDate.format(d) : shortDateYear.format(d); +} const longDate = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }); const relative = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' }); export function formatShort(iso?: string) { - return iso ? shortDate.format(new Date(iso)) : ''; + return iso ? shortWithYear(new Date(iso)) : ''; } export function formatLong(iso?: string) { @@ -20,7 +26,7 @@ export function formatRelative(iso?: string) { if (abs < 3600) return relative.format(Math.round(diff / 60), 'minute'); if (abs < 86400) return relative.format(Math.round(diff / 3600), 'hour'); if (abs < 7 * 86400) return relative.format(Math.round(diff / 86400), 'day'); - return shortDate.format(new Date(iso)); + return shortWithYear(new Date(iso)); } export function readingTimeLabel(minutes?: number) {