From 0febac8b3c841f1a301cfb957a61501cdf6c7db5 Mon Sep 17 00:00:00 2001
From: Jesse McDonald <nybble41@gmail.com>
Date: Sun, 21 Jun 2020 23:01:34 -0500
Subject: [PATCH] use CSS grid for game selection list

---
 css/chess.css | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/css/chess.css b/css/chess.css
index df14c84..482d487 100644
--- a/css/chess.css
+++ b/css/chess.css
@@ -605,10 +605,14 @@ div.hbox {
 }
 
 .game-tiles {
-   max-width: 80vw;
-   max-height: 80vh;
+   width: 90vw;
+   max-width: 90vw;
+   max-height: 85vh;
    overflow-y: auto;
-   text-align: center;
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(15em, auto));
+   align-items: center;
+   justify-items: center;
 }
 
 .game-tiles > * {
@@ -617,14 +621,14 @@ div.hbox {
 
 .game-tile {
    position: relative;
-   display: inline-flex;
+   display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    width: 14em;
    height: 14em;
    box-shadow: 0 0 0 1px black, 5px 5px 3px #00000080;
-   margin: 1em;
+   margin: 0.5em;
    padding: 0.5em;
    border-radius: 6pt;
    background-color: #FFFFF0;
@@ -779,19 +783,19 @@ div.hbox {
    margin-top: 0.5em;
 }
 
-.game-tile {
-   font-size: calc(12in * 0.015);
+.game-tiles {
+   font-size: calc(12in * 0.014);
 }
 
 @media only screen and (min-width: 6in) and (max-width: 12in) {
-   .game-tile {
-      font-size: 1.5vw;
+   .game-tiles {
+      font-size: 1.4vw;
    }
 }
 
 @media only screen and (max-width: 6in) {
-   .game-tile {
-      font-size: calc(6in * 0.015);
+   .game-tiles {
+      font-size: calc(6in * 0.014);
    }
 }