diff options
| author | Joris | 2023-12-27 18:21:37 +0100 |
|---|---|---|
| committer | Joris | 2023-12-27 18:21:37 +0100 |
| commit | 98eca7d594960aa616786cbd491b937d50f55499 (patch) | |
| tree | db63132d159d09bed2b0a6454c822c2ed95091c6 /public | |
| parent | 57da196f828352b009ca86dca98e352cf09663f3 (diff) | |
First version with 2 songs
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 15 | ||||
| -rw-r--r-- | public/main.css | 85 |
2 files changed, 100 insertions, 0 deletions
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 @@ +<!doctype html> +<html lang="fr"> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width"> +<title>Music</title> +<link rel="stylesheet" href="/main.css"> +<link rel="icon" href="/icon.png"> + +<h1 class="g-Title">Music</h1> + +<ul class="g-Songs"> + <li> + <a href="songs/ben-e-king/stand-by-me.html">Ben E. King – Stand by Me</a> + <li> + <a href="songs/graeme-allwright/petit-garcon.html">Graeme Allwright – Petit Garçon</a> 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; +} |