Description List (`<dl>`) Styling

[NeilBrommer]

There currently isn't any styling for description lists. The default styling isn't very clear and isn't mobile friendly. I've written some styling to improve them and add some other option way of formatting these lists. The end result looks like this:

There's a CodePen example here.

The SCSS:

$columns-base-name: dl-columns;
$wsu-breakpoint-map: (
  "phone-small": 450px,
  "phone": 576px,
  "tablet": 768px,
  "tablet-medium": 860px,
  "tablet-large": 992px,
  "desktop": 1260px,
  "ultrawide": 1600px,
  "xultrawide": 1900px,
  "xxultrawide": 2400px
);

dl {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-bottom: 1em;
}

dt {
  font-weight: bold;
  line-height: 1.75;
}

dd {
  margin-inline-start: 0;
  margin-left: 1em;
  line-height: 1.75;
}

// Add spacing between dd elements
dd + dd {
  margin-top: 0.5em;
}

dl.index-list {
  dt {
    display: inline;

    &:after {
      content: " - ";
    }
  }

  dd {
    display: inline;
    margin-left: 0;

    &:not(:last-child):after {
      // Display each dt/dd pair on separate lines
      content: "";
      display: block;
      margin-bottom: 1em;
    }
  }
}

@each $name, $value in $wsu-breakpoint-map {
  @media (min-width: #{$value}) {
    dl.#{$columns-base-name}-#{$name} {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0 1rem;

      & > dt {
        grid-column: 1;
      }

      & > dd {
        grid-column: 2;
        margin-left: 0;
        margin-top: 0;
      }

      div.escape-columns {
        grid-column: span 2;

        dt {
          margin-top: 0.5em;
        }

        dd {
          margin-left: 1em;
        }

        dt,
        dd {
          display: block;
        }
      }
    }
  }
}