arnekeller/qwörtle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimize for small screens

Browse Source
This commit is contained in:
Arne Keller 2022-02-23 14:51:32 +01:00
parent ac7e01c469
commit 1c8f5453f6
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
index.css
View File

@ -43,15 +43,17 @@ body.wide {
} }
.cell { .cell {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.5em; padding: 0.5em;
display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
font-family: monospace; font-family: monospace;
font-size: xx-large; font-size: xx-large;
border: 1px solid #bbb; border: 1px solid #bbb;
vertical-align: top; vertical-align: top;
text-align: center;
} }
#keyboard { #keyboard {
@ -94,3 +96,27 @@ body.wide {
background-color: #1f2937; background-color: #1f2937;
color: #fff; color: #fff;
} }
@media (max-width: 600px) {
#main {
gap: 10px;
}
.cell {
box-sizing: border-box;
padding: 0.5em;
width: 9vw;
height: 9vw;
}
.key {
box-sizing: border-box;
width: 7.6vw;
height: 7.6vw;
font-size: x-large;
}
#backspace, #enter {
width: 15.2vw;
height: 7.6vw;
}
}