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 @@
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 {