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 {