From f55c569193ff6b21aa19257530f5d0dd1e6ec0c9 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Tue, 17 Oct 2023 18:59:25 +0200
Subject: [PATCH] slightly better CSS

---
 index.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 1076c74..e3ccc1d 100644
--- a/index.html
+++ b/index.html
@@ -211,7 +211,7 @@
             <div class="flex lg:flex-row flex-col mr-4 ml-4">
             <!-- Font Size Selection -->
               <div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2">
-                <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Font Settings</p>
+                <p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
                 <div class="mb-6 mx-4 font-semibold">
                   <label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
                   <input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 
@@ -219,7 +219,7 @@
                   dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                 </div>
                 <label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label>
-                  <select id="font-family" class="bg-gray-50 w-2/3 ml-4 border border-gray-300 w-full
+                  <select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2
                   text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
                     <option selected>Choose a font</option>
                     <option value="US">IBM Plex Mono</option>
@@ -256,17 +256,17 @@
             </div>
 
             <div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-3/4 pt-2 pb-1 mb-2">
-              <p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">File Management</p>
-              <div class="flex flex-col space-y-2">
-                <button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
+              <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
+              <div class="flex flex-col space-y-2 pb-2">
+                <button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
                   <svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
                   <span>Download universes</span>
                 </button>
-                <button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-4 px-2 rounded-lg inline-flex items-center mx-4">
+                <button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
                   <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
                   <span>Upload universes</span>
                 </button>
-                <button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold py-2 px-2 rounded-lg inline-flex items-center mx-4">
+                <button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                   </svg>
@@ -277,9 +277,9 @@
           </div>
 
             <!-- Midi settings -->
-            <div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-row mx-4 my-4 pt-4">
+            <div id="midi-settings-container" class="bg-gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
             <div class="lg:flex lg:flex-row w-fit">
-            <p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
+            <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
               <div class="flex items-center mb-4 ml-6">
                 <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock:&nbsp;</label>
                 <select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
@@ -294,7 +294,7 @@
                 </select>
               </div>
               <div class="lg:flex block items-center mb-4 ml-6">
-                  <input id="send-midi-clock" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                  <input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                   <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label>
               </div>
             </div>
@@ -306,7 +306,7 @@
                 </select>
               </div>
               <div class="lg:flex block items-center mb-4 ml-6">
-                <input id="midi-channels-scripts" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                <input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                 <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Route channels to scripts</label>
               </div>
             </div>
@@ -314,7 +314,7 @@
 
           <!-- Audio nudge slider -->
           <div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
-            <p class="font-bold text-xl ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
+            <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
             <div class="flex flex-column pb-2">
               <p class="pt-0.5 ml-4">Clock:</p>
               <input