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 {
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);
}
}