sage
/
QuickChess
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Work nicely in landscape or portrait mode

This commit is contained in:
Sage Vaillancourt 2020-12-28 17:41:48 -05:00
parent 7fb3d9902e
commit 0cd2615959
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/index.css
View File

@ -17,6 +17,20 @@ ol, ul {
margin-bottom: 10px; margin-bottom: 10px;
} }
@media (orientation:landscape) {
.square {
height: 11vh;
width: 11vh;
}
}
@media (orientation:portrait) {
.square {
height: 11vw;
width: 11vw;
}
}
.square { .square {
background: #fff; background: #fff;
border: 1px solid #999; border: 1px solid #999;
@ -24,12 +38,10 @@ ol, ul {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
line-height: 30px; line-height: 30px;
height: 11vw;
margin-right: -1px; margin-right: -1px;
margin-top: -1px; margin-top: -1px;
padding: 0; padding: 0;
text-align: center; text-align: center;
width: 11vw;
} }
.square:hover { .square:hover {

2
src/index.js
View File

@ -69,7 +69,7 @@ function isKing(piece) {
function Square(props) { function Square(props) {
let bg = { let bg = {
backgroundImage: `url(${Images[props.value]})`, backgroundImage: `url(${Images[props.value]})`,
backgroundSize: `11vw`, backgroundSize: `100%`,
backgroundColor: props.bg, backgroundColor: props.bg,
}; };
if (props.value != null) { if (props.value != null) {