Font size scaling controls

content/cesta-do-hlubin-punkacovi-duse/cesta-do-hlubin-punkacovi-duse.cho

@@ -2,6 +2,7 @@
 {artist: Vision Days}
 {columns: 2}
 
+{c: Capo 2/3?}
 {c: Bridge a sloka jsou off-beat}
 
 {soc}

content/jaro-na-aljasce/jaro-na-aljasce.cho

@@ -1,7 +1,10 @@
 {title: Jaro na Aljašce}
 {artist: K. T. O.}
+{transpose: 5}
 {columns: 2}
 
+{c: Původně od G, transpozice o 5}
+
 {sov}
 Až [G]jaro na Aljašku [C]zavítá k [G]nám,
 [G]hromadu zlata já [A]za zimu [D]mám,
@@ -29,6 +32,8 @@ když [G]jaro na Aljašku [C]zavítá k [G]nám?
 [G]šampaňský víno tu [A]sám budu [D]pít,
 s [G]partnery svými tu [C]zůstanu [G]sám,
 až [G]jaro na Aljašku [C]zavítá k [G]nám.
+{eov}
 
+{sov}
 Až [G]jaro na Aljašku [C]zavítá k [G]nám.
 {eov}

content/jezdim-bez-nehod/jezdim-bez-nehod.cho

@@ -2,6 +2,8 @@
 {artist: Milan Chladil}
 {columns: 2}
 
+{c: Capo 3?}
+
 {sob}
 [G] [Am] [D] [G]
 {eob}

sass/chordpro.scss

@@ -10,6 +10,7 @@ body {
 	color: $col-white;
 	font-family: "Noto Sans", Tahoma, Geneva, Verdana, sans-serif;
 	text-rendering: geometricPrecision;
+	transform-origin: 0 0;
 }
 
 table {

static/js/song-controls.js

@@ -1,6 +1,7 @@
 const controls = document.querySelector(".controls");
 const song = document.querySelector("iframe.song").contentWindow;
 
+// Autoscroll
 var scroll;
 function pageScroll() {
 	song.scrollBy(0, 1);
@@ -16,5 +17,19 @@ document.querySelector("#autoscroll").addEventListener("click", function() {
 	this.classList.toggle("active");
 });
 
+// Scaling
+function pageScale(value) {
+	if (value === 0) {
+		song.document.body.style.transform = "scale(1)";
+		return;
+	}
+	const currentScale = parseFloat(song.document.body.style.transform.split("scale(")[1]) || 1;
+	song.document.body.style.transform = "scale(" + (currentScale + value) + ")";
+}
+
+controls.querySelector("#font-size-increase").addEventListener("click", () => pageScale(0.1));
+controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
+controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
+
 // Display the controls on JS-enabled browsers
 window.addEventListener("load", () => controls.classList.remove = "hidden");