From 181b6a424bf1ed2665ca1f444a12017fda0e21d4 Mon Sep 17 00:00:00 2001 From: Martin Pitt Date: Wed, 23 Sep 2026 22:47:42 +0200 Subject: [PATCH] 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. --- chordpro.css | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/chordpro.css b/chordpro.css index 6e1cf8d..90bf245 100644 --- 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; + } } -- 2.47.3