From eaf484a9f70f191411d33cd7b45e713d14809e16 Mon Sep 17 00:00:00 2001
From: Geraint <luffgd@gmail.com>
Date: Sun, 9 Feb 2025 12:24:43 +0000
Subject: [PATCH] UI tweaks for demo

---
 web/demo/index.html | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/demo/index.html b/web/demo/index.html
index 1328517..5ef0baa 100644
--- a/web/demo/index.html
+++ b/web/demo/index.html
@@ -20,6 +20,10 @@
 				flex-grow: 1;
 				font: inherit;
 			}
+			
+			:root {
+				font-size: calc(min(12pt, 5vh));
+			}
 		
 			body {
 				margin: 0;
@@ -31,11 +35,8 @@
 				max-width: 100vw;
 				display: grid;
 				grid-template-areas: "playstop playback upload" "controls controls controls" "scope scope scope";
-				grid-template-columns: 3rem 1fr max-content;
-				grid-template-rows: 2.5rem 1fr 8rem;
-
-				font-size: 12pt;
-				font-family: Arial, sans-serif;
+				grid-template-columns: 3.5rem 1fr 6rem;
+				grid-template-rows: max-content 2fr 6rem;
 			}
 			
 			#controls {
@@ -53,14 +54,18 @@
 			}
 			#controls input[type=range], #controls input[type=checkbox] {
 				grid-column: 2;
+				font: inherit;
 			}
-			#controls .input[type=number] {
+			#controls input[type=number] {
 				grid-column: 3;
+				font: inherit;
 			}
 
 			#scope {
 				grid-area: scope;
 				width: 100%;
+				height: 6rem;
+				max-height: 100%;
 				border: none;
 			}
 			#playstop {
@@ -84,7 +89,7 @@
 				height: 100%;
 				z-index: -1;
 			}
-			#upload {
+			#upload, #upload-file {
 				grid-area: upload;
 			}
 		</style>
@@ -101,7 +106,6 @@
 			<label>semitones</label>
 			<input type="range" min="-12" max="12" step="1" data-key="semitones" class="diagram-red">
 			<input type="number" min="-12" max="12" step="1" data-key="semitones" class="diagram-red">
-<!--
 			<label>tonality limit</label>
 			<input type="range" min="2000" max="20000" step="100" data-key="tonalityHz" class="diagram-red">
 			<input type="number" min="2000" max="20000" step="1" data-key="tonalityHz" class="diagram-red">
@@ -111,7 +115,6 @@
 			<label>shelf dB</label>
 			<input type="range" min="-24" max="12" step="0.1" data-key="shelfDb">
 			<input type="number" min="-24" max="12" step="0.1" data-key="shelfDb">
--->
 		</div>
 		<script type="module">
 			import SignalsmithStretch from "../release/SignalsmithStretch.mjs";