jonas/SimonSays
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more dynamic screen size support

Browse Source
This commit is contained in:
Jonas Weinz 2019-02-25 23:53:21 +01:00
parent 28ee51f715
commit 0460c0bcd9
1 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
style.css
View File

@ -2,7 +2,6 @@ canvas { background: #eee; width: 100%; height: 100%; }
body {
margin: 0;
background: rgb(49, 51, 54);
padding: 100;
outline: 0;
}
@ -29,8 +28,8 @@ body {
}
.control-button {
border-radius: 10px;
margin: 10px;
border-radius: 1vw;
margin: 1vw;
border: none;
display: list-item;
outline: 0;
@ -38,7 +37,7 @@ body {
background: rgba(0, 0, 0, var(--opacity));
color: rgb(255, 255, 255);
font-size: 3vw;
width: 20vw;
width: 15vw;
}
.control-button:hover {
@ -50,8 +49,8 @@ body {
}
.info-button {
border-radius: 10px;
margin: 10px;
border-radius: 1vw;
margin: 1vw;
border: none;
outline: 0;
transition-duration: 0.3s;
@ -60,12 +59,12 @@ body {
background: none;
color: rgb(255, 255, 255);
font-size: 3vw;
width: 20vw;
width: 15vw;
}
.status-button {
border-radius: 10px;
margin: 10px;
border-radius: 1vw;
margin: 1vw;
border: none;
outline: 0;
transition-duration: 0.3s;
@ -74,7 +73,7 @@ body {
background: none;
color: rgb(128, 128, 128);
font-size: 2vw;
width: 20vw;
width: 15vw;
}
.grid-tile {
@ -87,11 +86,12 @@ body {
.main-container {
text-align: center;
white-space: nowrap;
}
.grid-container {
border-radius: 10px;
padding: 10px;
border-radius: 1vw;
padding: 1vw;
margin: auto;
width: calc(var(--grid-width) * var(--tile-size));
height: calc(var(--grid-height) * var(--tile-size));
@ -101,8 +101,8 @@ body {
}
.sidebar-container {
border-radius: 10px;
padding: 10px;
border-radius: 1vw;
padding: 1vw;
vertical-align: top;
background: rgba(0, 0, 0, var(--opacity));
display: inline-flex;
@ -114,18 +114,19 @@ body {
}
.control-container {
border-radius: 10px;
padding: 10px;
border-radius: 1vw;
padding: 1vw;
top: 0;
background: none;
}
.info-container {
border-radius: 10px;
padding: 10px;
border-radius: 1vw;
padding: 1vw;
bottom: 0;
display: inline-block;
vertical-align: middle;
text-align: center;
background: none;
white-space: normal;
}