Font size scaling controls

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");