sass/chordpro.scss

@@ -19,13 +19,13 @@ table {
 }
 
 .song {
-	padding: 3em 0 1em 1em;
+	padding: 1em 0 0 1em;
 }
 
 .title {
 	font-size: 1.5em;
 	font-weight: bold;
-	margin-bottom: 2em;
+	margin-bottom: 1em;
 }
 
 .chords {

sass/style.scss

@@ -191,8 +191,7 @@ main.song {
 
 			&.font-size>.button:hover, &.font-size>.button.active { background-color: #bf616a }
 			&.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac }
-			&.autoscroll>.button:hover, &.autoscroll>.button.active { background-color: #d08770 }
-			&.autoscroll>#autoscroll.active { background-color: #bf616a }
+			&.autoscroll>.button.active { background-color: #d08770 }
 
 			.button{
 				display: grid;

static/js/song-controls.js

@@ -3,40 +3,18 @@ const song = document.querySelector("iframe.song").contentWindow;
 
 // Autoscroll
 var scroll;
-var scrollTimeout = 60;
-const minTimeout = 10;
-const maxTimeout = 120;
-const scrollIncrement = 20;
-
 function pageScroll() {
 	song.scrollBy(0, 1);
-	scroll = setTimeout(pageScroll, scrollTimeout);
+	scroll = setTimeout(pageScroll, 80);
 }
 
-function updateScrollSpeed() {
-	if (controls.querySelector("#autoscroll").classList.contains("active")) {
-		clearTimeout(scroll);
-		scroll = setTimeout(pageScroll, scrollTimeout);
-	}
-}
-
-controls.querySelector("#autoscroll-increase").addEventListener("click", () => {
-	scrollTimeout = Math.max(minTimeout, scrollTimeout - scrollIncrement);
-	updateScrollSpeed();
-});
-
-controls.querySelector("#autoscroll-decrease").addEventListener("click", () => {
-	scrollTimeout = Math.min(maxTimeout, scrollTimeout + scrollIncrement);
-	updateScrollSpeed();
-});
-
-controls.querySelector("#autoscroll").addEventListener("click", function() {
-	this.classList.toggle("active");
+document.querySelector("#autoscroll").addEventListener("click", function() {
 	if (this.classList.contains("active")) {
-		pageScroll();
-	} else {
 		clearTimeout(scroll);
+	} else {
+		pageScroll();
 	}
+	this.classList.toggle("active");
 });
 
 // Scaling
@@ -53,6 +31,5 @@ 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));
 
-
 // Display the controls on JS-enabled browsers
 window.addEventListener("load", () => controls.classList.remove = "hidden");

templates/song.html

@@ -1,5 +1,4 @@
 {% extends "index.html" %}
-
 {% block content %}
 	<main class="song">
 		{% for asset in page.assets %}
@@ -17,9 +16,7 @@
 						<div class="button icon-add" id="transpose-increase"></div>
 					</section>
 					<section class="autoscroll">
-						<div class="button icon-subtract" id="autoscroll-decrease"></div>
 						<div class="button icon-scroll" id="autoscroll"></div>
-						<div class="button icon-add" id="autoscroll-increase"></div>
 					</section>
 				</nav>
 			{% endif %}