Specify chord duration

4 files changed, 16 insertions, 4 deletions

diff --git a/public/main.css b/public/main.css
index 236ddc0..8606108 100644
--- a/public/main.css
+++ b/public/main.css
@@ -53,13 +53,13 @@ body {
 
 .g-Part h3 {
     margin: 0;
-    background-color: #f0f0f0;
     padding: 0 0.25rem;
     border-radius: 0.25rem;
     font-size: 110%;
     font-weight: normal;
     font-family: monospace;
     color: #851616;
+    border: 1px solid #851616;
     width: fit-content;
 }
 
@@ -78,13 +78,25 @@ body {
     text-align: center;
     border-left: 1px solid black;
     border-right: 1px solid black;
-    padding: 0.5rem 0;
+    padding: 0.5rem 1rem;
+    white-space: nowrap;
+}
+
+.g-Chords__Chord {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: baseline;
+}
+
+.g-Chords__Rhythm {
+    height: 1.3rem;
 }
 
 .g-Chords__Chord:not(:last-child):after {
     display: inline-block;
     content: "/";
-    margin: 0 0.5rem;
+    margin-left: 0.5rem;
+    margin-right: 1rem;
 }
 
 .g-Lyrics__Paragraph {
@@ -94,5 +106,5 @@ body {
 }
 
 .g-Lyrics__Paragraph emph {
-    background-color: #e6e6d2;
+    background-color: #a7de9b;
 }
diff --git a/public/rhythms/0.5.png b/public/rhythms/0.5.png
new file mode 100644
index 0000000..08bf293
--- /dev/null
+++ b/public/rhythms/0.5.png
diff --git a/public/rhythms/1.5.png b/public/rhythms/1.5.png
new file mode 100644
index 0000000..aae73bd
--- /dev/null
+++ b/public/rhythms/1.5.png
diff --git a/public/rhythms/2.png b/public/rhythms/2.png
new file mode 100644
index 0000000..0bcc0ba
--- /dev/null
+++ b/public/rhythms/2.png