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 c349bdedfcaa0ed90cf55426a6635761e117fea7..061ca166fcf06ab0fdcc70881bbdea3eb823ab3e 100644 (file)
--- 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) */