diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/main.css | 48 |
1 files changed, 41 insertions, 7 deletions
diff --git a/public/main.css b/public/main.css index 8606108..06ad2b4 100644 --- a/public/main.css +++ b/public/main.css @@ -17,12 +17,14 @@ body { margin: 0; } -/* Song */ +/* Back button */ .g-Back { margin-bottom: 0; } +/* Title */ + .g-Title { margin-top: 0; margin-bottom: 0.5rem; @@ -39,6 +41,8 @@ body { font-style: italic; } +/* Parts */ + .g-Parts { display: flex; flex-direction: column; @@ -51,7 +55,7 @@ body { gap: 0.5rem; } -.g-Part h3 { +.g-Part__Title { margin: 0; padding: 0 0.25rem; border-radius: 0.25rem; @@ -61,23 +65,36 @@ body { color: #851616; border: 1px solid #851616; width: fit-content; + padding: 0.25rem; } +/* Chords */ + .g-Chords__Tonality { display: flex; align-items: center; gap: 0.5rem; + height: 1.5rem; +} + +.g-Chords__Section { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; } .g-Chords__Table { border-collapse: collapse; + margin-top: 0.5rem; + width: 100%; } .g-Chords__Cell { width: 4rem; text-align: center; - border-left: 1px solid black; - border-right: 1px solid black; + border-left: 0.25rem solid #333; + border-right: 0.25rem solid #333; padding: 0.5rem 1rem; white-space: nowrap; } @@ -93,12 +110,28 @@ body { } .g-Chords__Chord:not(:last-child):after { - display: inline-block; - content: "/"; + display: block; + content: ""; margin-left: 0.5rem; margin-right: 1rem; + background-color: #88b57e; + width: 0.25rem; + height: 0.8em; + transform: rotate(20deg); +} + +.g-Chords__Multiplier { + font-weight: bold; + border-bottom: 0.125rem solid #181a87; + color: #181a87; } +.g-Chords__Multiplier::before { + content: "× "; +} + +/* Lyrics */ + .g-Lyrics__Paragraph { display: flex; flex-direction: column; @@ -106,5 +139,6 @@ body { } .g-Lyrics__Paragraph emph { - background-color: #a7de9b; + background-color: #88b57e; + color: white; } |