From 98eca7d594960aa616786cbd491b937d50f55499 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 27 Dec 2023 18:21:37 +0100
Subject: First version with 2 songs
---
public/index.html | 15 ++++++++++
public/main.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 100 insertions(+)
create mode 100644 public/index.html
create mode 100644 public/main.css
(limited to 'public')
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..1aba3bd
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+Music
+
+
+
+Music
+
+
+ -
+ Ben E. King – Stand by Me
+
-
+ Graeme Allwright – Petit Garçon
diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..5f6d450
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,85 @@
+body {
+ width: fit-content;
+ font-family: sans-serif;
+ margin: 2rem auto;
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+/* Index */
+
+.g-Songs {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin: 0;
+}
+
+/* Song */
+
+.g-Back {
+ margin-bottom: 0;
+}
+
+.g-Title {
+ margin-top: 0;
+ margin-bottom: 0.5rem;
+ font-size: 150%;
+}
+
+.g-Subtitle {
+ margin-top: 0;
+ margin-bottom: 1.5rem;
+ font-size: 130%;
+}
+
+.g-Author {
+ font-style: italic;
+}
+
+.g-Parts {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.g-Part {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.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;
+ width: fit-content;
+}
+
+.g-Chords {
+ border-collapse: collapse;
+}
+
+.g-Chords td {
+ width: 4rem;
+ text-align: center;
+ border-left: 1px solid black;
+ border-right: 1px solid black;
+ padding: 0.5rem 0;
+}
+
+.g-Lyrics__Paragraph {
+ display: flex;
+ flex-direction: column;
+ gap: 0.125rem;
+}
+
+.g-Lyrics__Paragraph emph {
+ background-color: #e6e6d2;
+}
--
cgit v1.2.3