From aa9fb1cdb16cd34477094f288079f074b1932504 Mon Sep 17 00:00:00 2001
From: "matth@ultra" <matthias.quintern@posteo.de>
Date: Wed, 4 Sep 2024 11:39:27 +0200
Subject: [PATCH] use flex for buttons

---
 src/index.html     |  8 +++++---
 src/sass/main.sass | 11 ++++++++---
 src/style.css      | 13 ++++++++++---
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/index.html b/src/index.html
index 910160b..85198e3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,9 +24,11 @@
         <div class="second-box">
             <div class="buttons" id="buttons">
                 <input id="filename" placeholder="filename" type="text" class="filename-input"></input>
-                <button onclick="undo()" class="move-button" id="undo-button">Undo</button>
-                <button onclick="skip()" class="move-button" id="skip-button">Skip</button>
-                <span class="move-buttons" id="move-buttons"></span>
+                <div class="move-button-container">
+                    <button onclick="undo()" class="move-button" id="undo-button"><span class="key">u</span> Undo</button>
+                    <button onclick="skip()" class="move-button" id="skip-button"><span class="key">s</span> Skip</button>
+                    <span class="move-buttons" id="move-buttons"></span>
+                </div>
                 <br>
                 <button onclick="window.location.href='config.html';" id="configure-button">Configure</button>
             </div>
diff --git a/src/sass/main.sass b/src/sass/main.sass
index 8d57065..a7ba918 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -152,12 +152,17 @@ button, input
   filter: drop-shadow(0.1rem 0.1rem 0 $accent)
   font-family: $monofont
   margin: 0.2rem
+.move-button-container
+  margin-top: 0.2rem
+  display: flex
+  flex-wrap: wrap
 .move-buttons
-  margin: 0
+  display: contents
 
 .move-button
   font-size: $move-button-font-size
   padding: $move-button-padding
+  flex-grow: 1
 
 button:hover
   color: $button-fg-hl
@@ -168,9 +173,9 @@ button:hover
 #configure-button
   filter: drop-shadow(0.1rem 0.1rem 0 $light-blue)
 #undo-button
-  filter: drop-shadow(0.1rem 0.1rem 0 $light-gray)
+  filter: drop-shadow(0.1rem 0.1rem 0 $light-aqua)
 #skip-button
-  filter: drop-shadow(0.1rem 0.1rem 0 $light-gray)
+  filter: drop-shadow(0.1rem 0.1rem 0 $light-aqua)
 #key
   width: 20px
   text-align: center
diff --git a/src/style.css b/src/style.css
index 829728a..8ceed97 100644
--- a/src/style.css
+++ b/src/style.css
@@ -137,13 +137,20 @@ button, input {
   margin: 0.2rem;
 }
 
+.move-button-container {
+  margin-top: 0.2rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .move-buttons {
-  margin: 0;
+  display: contents;
 }
 
 .move-button {
   font-size: 14px;
   padding: 6px;
+  flex-grow: 1;
 }
 
 button:hover {
@@ -160,11 +167,11 @@ button:hover {
 }
 
 #undo-button {
-  filter: drop-shadow(0.1rem 0.1rem 0 #7c6f64);
+  filter: drop-shadow(0.1rem 0.1rem 0 #427b58);
 }
 
 #skip-button {
-  filter: drop-shadow(0.1rem 0.1rem 0 #7c6f64);
+  filter: drop-shadow(0.1rem 0.1rem 0 #427b58);
 }
 
 #key {