From: Martin Pitt <martin@piware.de>
Date: Sat, 1 Jul 2023 09:57:47 +0000 (+0200)
Subject: Initial PoC
X-Git-Url: https://piware.de/gitweb/?a=commitdiff_plain;h=0b30217e34aff4ce7646cec7edca7c62f423e294;p=chordpro-web.git
Initial PoC
---
0b30217e34aff4ce7646cec7edca7c62f423e294
diff --git a/chordpro.css b/chordpro.css
new file mode 100644
index 0000000..6d300aa
--- /dev/null
+++ b/chordpro.css
@@ -0,0 +1,29 @@
+h1 {
+ font-size: xx-large;
+}
+
+h2 {
+ font-size: large;
+ font-style: italic;
+}
+
+.verse {
+ white-space: pre-line;
+ margin-bottom: 0.3em;
+ font-family: sans-serif;
+}
+
+.verse.chords {
+ line-height: 2.3em;
+}
+
+.chord {
+ position: relative;
+ top: -1em;
+ display: inline-block;
+ width: 0;
+ overflow: visible;
+ text-shadow: #CCC 1px 1px;
+ color: #F33;
+ font-weight: bold;
+}
diff --git a/poc.html b/poc.html
new file mode 100644
index 0000000..ce6baab
--- /dev/null
+++ b/poc.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>ChordPro Proof of Concept</title>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="chordpro.css">
+</head>
+
+<body>
+ <h1>Nine Million Bicycles</h1>
+ <h2>Katie Melua</h2>
+
+ <p class="verse chords">There are <span class="chord">Am</span>nine million bicycles in Bei<span class="chord">Em</span>jing
+ That's a <span class="chord">Dm</span>fact, It's a <span class="chord">F</span>thing we can't deny
+ Like the <span class="chord">Dm</span>fact that I will <span class="chord">G</span>love you till I <span class="chord">C</span>die.</p>
+
+ <p class="verse">We are twelve billion light years from the edge,
+ That's a guess, No-one can ever say it's true
+ But I know that I will always be with you.</p>
+
+</body>
+</html>