From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 10 Feb 2024 00:06:39 +0000 (+0100)
Subject: perl: margin between possibly multiline list items
X-Git-Url: http://git.shiar.net/sheet.git/commitdiff_plain/5fb434cb1857f0a1d81fa1c24bb8c79cb7df2498

perl: margin between possibly multiline list items

Comments on a Hacker News <https://news.ycombinator.com/item?id=39227169>
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.
---

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) */