Use distinct styles for note lists and label lists

[nevans]

Together with #1208, this brings back the original "note" and "label" list styles. It also improves on the original "note" list styling in two ways: 1) the second line and every line after it share the same indentation, and 2) commas are added between multiple dt elements.

• Use the original label description list style #1208
  This also removes margin-bottom from dt, which is necessary for the second indentation to match subsequent lines.
• Add closing tags for description list terms #1226
  Necessary for adding separators between dt.
• Bring back the float: left style, for note lists only
• Set the dt line-height to match main p.
  Otherwise, the dt has a larger line-height than the p tag inside the dd, which causes the second line to have the same indentation as the first but different from the third.
• Add commas between note list terms.

This fixes #1199.

[nevans]

For the screenshot, I added an extra <dt> for every <dd> to demonstrate how that looks in various line wrapping situations.

[nevans]

For what it's worth, here are a few times the styles for these have been updated:

• Fixed inverted CSS for note-list and label-list #770
  • which mentions that ruby/ruby@33d026034e got it backwards
• 18abd1c is the local version of ruby/ruby@33d026034e
  • This came almost immediately after ruby/ruby@009144e8ef, which changed NEWS to use the new styling (or tried to).
• dd3f81b - converted note lists from using table cells to using definition lists.
  • I think that rdoc styled them both the same from this point until 18abd1c and Fixed inverted CSS for note-list and label-list #770. But I think documentation still indicated that note lists used something more like original table style.
  • hanna uses tables for note lists. Maybe that's where hanna inherited the table styling from?

Anyway, this does not mean we need to style them differently by default. If we add the closing </dt> tag and continue to give them different classes, then I can use my own local stylesheets. But I do think it means that I'm not the only one who appreciates having distinct styles for the two list types. 🙂

If this PR is accepted, I'm willing to create a PR for similar styling for ri, so they match.

[nevans]

FWIW, I've experimented with four different styles.

The "label" style restored by #1208:

First described term
  Description starts on a new line below the term and is indented.  Lorem ipsum dolor
  sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat.
Second described term
Riker Ipsum
  We finished our first sensor sweep of the neutral zone.  Yesterday I did not know
  how to eat gagh. And blowing into maximum warp speed, you appeared for an instant
  to be in two places at once.  They were just sucked into space.  Mr. Worf, you do
  remember how to fire phasers?

The "note" style in this PR:

First described term    Description starts on same line as its term.  Subsequent
  lines are indented by one em.  Lorem ipsum dolor sit amet, consectetur adipiscing
  elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
  minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  commodo consequat.
Second described term, Riker Ipsum    Indentation levels are independent of the
  length of the terms.  Every description indents only one level.  We finished our
  first sensor sweep of the neutral zone.  Yesterday I did not know how to eat gagh.
  And blowing into maximum warp speed, you appeared for an instant to be in two
  places at once.  They were just sucked into space.  Mr. Worf, you do remember how
  to fire phasers?

Before making these PRs, I was considering a more table-like style for "notes" (e.g. as used by hanna). This can be accomplished with dl by using display: grid. But, while that is nice for some description lists, I think it's less generically applicable. Also, it would've needed extra styling to be responsive to smaller screen widths.

First described term    Definition starts on same line as its term.  All descriptions
                        share the same indentation.  This is easy to achieve with
                        display: grid.  But it does not work well with wide terms or
                        nested lists.  Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit, sed do eiusmod tempor incididunt ut labore  
                        et dolore magna aliqua.
Second described term
Riker Ipsum             I chose to style this so that the description text starts on
                        the same line as the final description term.  Every
                        description indents only one level.  We finished our first
                        sensor sweep of the neutral zone.  Yesterday I did not know
                        how to eat gagh.  And blowing into maximum warp speed, you
                        appeared for an instant to be in two places at once.  They
                        were just sucked into space.  Mr. Worf, you do remember how
                        to fire phasers?

Another reasonable approach would be to mimic how rdoc allows the comments to be formatted, indenting each dd independently, based on its corresponding terms' widths. This still doesn't work well with wide terms or nested lists, and the alternating indentations can be slightly jarring, IMO.

First term    Definition starts on same line as its term.  Each description has its
              own indentation, based on its term(s).  This still doesn't work well
              with wide terms or nested lists.  And I personally find the different
              indentation of each description to be jarring.  Lorem ipsum dolor sit
              amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              labore et dolore magna aliqua.
Second described term
Riker Ipsum              Indented according to its widest term.  We finished our
                         first sensor sweep of the neutral zone.  Yesterday I did
                         not know how to eat gagh. And blowing into maximum warp
                         speed, you appeared for an instant to be in two places at
                         once.  They were just sucked into space.  Mr. Worf, you do
                         remember how to fire phasers?

[flavorjones]

I just opened a similar issue at #1227 and I wanted to say that this PR solves my problem exactly as I'd hoped. ❤️

[st0012]

Sorry for the delay. I think the updated style looks great and thanks for fixing the tag closing issue as well 👍

[st0012]

Oops I was meant to approve