nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use CSS grid for game selection list

This commit is contained in:
Jesse D. McDonald 2020-06-21 23:01:34 -05:00
parent 2c1892303e
commit 0febac8b3c
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/chess.css
View File

@ -605,10 +605,14 @@ div.hbox {
} }
.game-tiles { .game-tiles {
max-width: 80vw; width: 90vw;
max-height: 80vh; max-width: 90vw;
max-height: 85vh;
overflow-y: auto; 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 > * { .game-tiles > * {
@ -617,14 +621,14 @@ div.hbox {
.game-tile { .game-tile {
position: relative; position: relative;
display: inline-flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 14em; width: 14em;
height: 14em; height: 14em;
box-shadow: 0 0 0 1px black, 5px 5px 3px #00000080; box-shadow: 0 0 0 1px black, 5px 5px 3px #00000080;
margin: 1em; margin: 0.5em;
padding: 0.5em; padding: 0.5em;
border-radius: 6pt; border-radius: 6pt;
background-color: #FFFFF0; background-color: #FFFFF0;
@ -779,19 +783,19 @@ div.hbox {
margin-top: 0.5em; margin-top: 0.5em;
} }
.game-tile { .game-tiles {
font-size: calc(12in * 0.015); font-size: calc(12in * 0.014);
} }
@media only screen and (min-width: 6in) and (max-width: 12in) { @media only screen and (min-width: 6in) and (max-width: 12in) {
.game-tile { .game-tiles {
font-size: 1.5vw; font-size: 1.4vw;
} }
} }
@media only screen and (max-width: 6in) { @media only screen and (max-width: 6in) {
.game-tile { .game-tiles {
font-size: calc(6in * 0.015); font-size: calc(6in * 0.014);
} }
} }