aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorJoris2024-01-05 10:39:24 +0100
committerJoris2024-01-05 10:39:24 +0100
commit0d97631eb0c8b1459a23e8e003705502754969d1 (patch)
tree79ff0fafe2f82d8342ffb6a3d1c325d76f5ee4b5 /public
parent8b5a1f5b754d51147236c7a50e573d4b041497ee (diff)
Allow to specify chord multiplier
Diffstat (limited to 'public')
-rw-r--r--public/main.css48
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;
}