Add basic column view

sass/chordpro.scss

@@ -3,6 +3,9 @@
 $col-white: #fff;
 $col-black: #2e3440;
 
+* {
+	box-sizing: border-box;
+}
 
 body {
 	margin: 0;
@@ -22,6 +25,18 @@ table {
 	padding: 3em 0 1em 1em;
 }
 
+html.column-view .song {
+	column-width: 15em;
+  column-gap: 6em;
+	column-fill: auto;
+	max-height: 100vh;
+	overflow: visible;
+
+	table, .verse, .chorus, .tab, .comment {
+		break-inside: avoid;
+	}
+}
+
 .title {
 	font-size: 1.5em;
 	font-weight: bold;

sass/style.scss

@@ -179,8 +179,6 @@ main.song {
 	height: 100dvh;
 	display: flex;
 	flex-direction: column;
-	max-width: 50em;
-	margin: 0 auto;
 
 	iframe {
 		flex-grow: 1;
@@ -203,6 +201,7 @@ main.song {
 			&.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac }
 			&.autoscroll>.button:hover, &.autoscroll>.button.active { background-color: #d08770 }
 			&.autoscroll>#autoscroll.active { background-color: #bf616a }
+			&.column-view>.button:hover, &.column-view>.button.active { background-color: #a3be8c }
 
 			.button{
 				display: grid;
@@ -231,6 +230,9 @@ main.song {
 				&.icon-scroll {
 					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M12 10.0858L7.20712 5.29291L5.79291 6.70712L12 12.9142L18.2071 6.70712L16.7929 5.29291L12 10.0858ZM18 17L6.00001 17L6.00001 15L18 15V17Z'%3E%3C/path%3E%3C/svg%3E");
 				}
+				&.icon-column-view {
+					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,1)'%3E%3Cpath d='M5 19H19V5H5V19ZM3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4ZM15 7V17H17V7H15ZM11 7L11 17H13V7H11ZM7 17L7 7L9 7L9 17H7Z'%3E%3C/path%3E%3C/svg%3E");
+				}
 			}
 		}
 

static/js/song-controls.js

@@ -53,6 +53,23 @@ controls.querySelector("#font-size-increase").addEventListener("click", () => pa
 controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
 controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
 
+// Column view
+const iframe = document.querySelector("iframe.song");
+
+iframe.addEventListener("load", () => {
+	const root = iframe.contentDocument.documentElement;
+
+	if (localStorage.getItem("column-view") === "on") {
+		root.classList.add("column-view");
+	}
+
+	controls
+		.querySelector("#column-view-toggle")
+		.addEventListener("click", () => {
+			const enabled = root.classList.toggle("column-view");
+			localStorage.setItem("column-view", enabled ? "on" : "off");
+		});
+});
 
 // Display the controls on JS-enabled browsers
 window.addEventListener("load", () => controls.classList.remove = "hidden");

templates/song.html

@@ -21,6 +21,9 @@
 						<div class="button icon-scroll" id="autoscroll"></div>
 						<div class="button icon-add" id="autoscroll-increase"></div>
 					</section>
+					<section class="column-view">
+						<div class="button icon-column-view" id="column-view-toggle"></div>
+					</section>
 				</nav>
 			{% endif %}
 		{% endfor %}