Scope chord styling to verses with chords

The empty chord span of a line without chords still got the chord padding,
which indented every chordless verse by 0.3ex. Chords only exist in .chords
verses, so all their styling moves into that block, written with CSS nesting.

diff --git a/chordpro.css b/chordpro.css
index 6e1cf8dbe45a4a8c05eff1447eed5fbb0f12ab89..90bf24570c20cbc438fff0ed31828cc852909456 100644 (file)
--- a/chordpro.css
+++ b/chordpro.css
@@ -19,27 +19,26 @@ h2 {
    rows. Its width is the wider of the two, so chords can never overlap each
    other or the next segment. Line wrapping only happens between segments;
    spaces in the lyrics are kept as written. */
-.verse.chords .seg {
-  display: inline-block;
-  white-space: pre;
-  /* A segment without lyrics has no baseline in its lyrics row, so baseline
-     alignment would put its chord into the lyrics row of its neighbours. All
-     chord rows have the same height, so aligning the tops lines them up. */
-  vertical-align: top;
-}
-
-.verse.chords .chord {
-  display: block;
-  /* chord names have no descenders, so keep the row tight to the lyrics */
-  line-height: 1;
-  /* keep lyrics in the bottom row when there is no chord above them */
-  min-height: 1lh;
-}
+.verse.chords {
+  .seg {
+    display: inline-block;
+    white-space: pre;
+    /* A segment without lyrics has no baseline in its lyrics row, so baseline
+       alignment would put its chord into the lyrics row of its neighbours. All
+       chord rows have the same height, so aligning the tops lines them up. */
+    vertical-align: top;
+  }
 
-.chord {
-  color: #F33;
-  font-weight: bold;
-  text-shadow: #CCC 1px 1px;
-  /* gap between adjacent chords */
-  padding-right: 0.3ex;
+  .chord {
+    display: block;
+    /* chord names have no descenders, so keep the row tight to the lyrics */
+    line-height: 1;
+    /* keep lyrics in the bottom row when there is no chord above them */
+    min-height: 1lh;
+    /* gap between adjacent chords */
+    padding-right: 0.3ex;
+    color: #F33;
+    font-weight: bold;
+    text-shadow: #CCC 1px 1px;
+  }
 }