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

dynamic screen size support

Browse Source
This commit is contained in:
Jonas Weinz 2019-02-25 23:44:12 +01:00
parent 5d61ec735c
commit 28ee51f715
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
style.css
View File

@ -9,8 +9,8 @@ body {
:root{ :root{
--grid-width: 6; --grid-width: 6;
--grid-height: 6; --grid-height: 6;
--tile-size: 100px; --tile-size: 6vw;
--button-margin: 5px; --button-margin: 0.5vw;
--opacity: 0.164; --opacity: 0.164;
} }
@ -37,8 +37,8 @@ body {
transition-duration: 0.3s; transition-duration: 0.3s;
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: 30pt; font-size: 3vw;
width: 256px; width: 20vw;
} }
.control-button:hover { .control-button:hover {
@ -59,8 +59,8 @@ body {
flex-direction: column; flex-direction: column;
background: none; background: none;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 30pt; font-size: 3vw;
width: 256px; width: 20vw;
} }
.status-button { .status-button {
@ -73,8 +73,8 @@ body {
flex-direction: column; flex-direction: column;
background: none; background: none;
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
font-size: 20pt; font-size: 2vw;
width: 256px; width: 20vw;
} }
.grid-tile { .grid-tile {

2
tile.js
View File

@ -15,7 +15,7 @@ class Tile
this.locked = false; this.locked = false;
this.div.style.transform = "translate( " + (x * w) + "px, " + (y*h) + "px )"; this.div.style.transform = "translate( " + (x * w) + "vw, " + (y*h) + "vw )";
this.reset(); this.reset();
this.bind(); this.bind();