From 5fb434cb1857f0a1d81fa1c24bb8c79cb7df2498 Mon Sep 17 00:00:00 2001 From: Mischa POSLAWSKY Date: Sat, 10 Feb 2024 01:06:39 +0100 Subject: [PATCH] perl: margin between possibly multiline list items MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Comments on a Hacker News post where wruza raises a valid point: > > > In tables without borders and/or margins, you can never tell where each > > > feature starts or if there’s one or two of them when the text wraps. > > > Not sure what drives people to use tables at all for title:content or > > > feature:description lists. > > > > Each row has 2 columns. Does the left column ever wrap? I don't see it > > wrapping because it's pretty narrow. Because the left column never wraps, > > you can use the left column to determine when a new row begins in both > > columns. > > Yes, the left column wraps on mobile. --- base.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/base.css b/base.css index c349bde..061ca16 100644 --- a/base.css +++ b/base.css @@ -138,11 +138,6 @@ h2 small { grid: auto-flow / 1fr 1fr; clear: both; } -@media (max-width: 42em) { - .section dl { - grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr); - } -} .section dl > dt { grid-column: 1; text-align: right; @@ -154,7 +149,15 @@ dl > dd { grid-column: 2; text-align: left; padding-left: 1em; - margin: 0; + margin: 0 0 .5ex; +} +@media (max-width: 42em) { + .section dl { + grid: auto-flow / minmax(8em, 1fr) minmax(20em, 1fr); + } + dl > dd { + margin-bottom: 1ex; /* distinguish rows more as dts can wrap */ + } } /* "keyboard" (list of keys) */ -- 2.30.0