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