]> piware.de Git - chordpro-web.git/commitdiff
projects / chordpro-web.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (initial)
Initial PoC
authorMartin Pitt <martin@piware.de>
Sat, 1 Jul 2023 09:57:47 +0000 (11:57 +0200)
committerMartin Pitt <martin@piware.de>
Sat, 1 Jul 2023 10:05:17 +0000 (12:05 +0200)
chordpro.css [new file with mode: 0644] patch | blob
poc.html [new file with mode: 0644] patch | blob

diff --git a/chordpro.css b/chordpro.css
new file mode 100644 (file)
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 (file)
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>
https://www.chordpro.org web viewer