From 28ee51f715e3d35d3b82b9e4f1d64e83c9d64860 Mon Sep 17 00:00:00 2001 From: Jonas Weinz Date: Mon, 25 Feb 2019 23:44:12 +0100 Subject: [PATCH] dynamic screen size support --- style.css | 16 ++++++++-------- tile.js | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/style.css b/style.css index 9f1af71..43077a6 100644 --- a/style.css +++ b/style.css @@ -9,8 +9,8 @@ body { :root{ --grid-width: 6; --grid-height: 6; - --tile-size: 100px; - --button-margin: 5px; + --tile-size: 6vw; + --button-margin: 0.5vw; --opacity: 0.164; } @@ -37,8 +37,8 @@ body { transition-duration: 0.3s; background: rgba(0, 0, 0, var(--opacity)); color: rgb(255, 255, 255); - font-size: 30pt; - width: 256px; + font-size: 3vw; + width: 20vw; } .control-button:hover { @@ -59,8 +59,8 @@ body { flex-direction: column; background: none; color: rgb(255, 255, 255); - font-size: 30pt; - width: 256px; + font-size: 3vw; + width: 20vw; } .status-button { @@ -73,8 +73,8 @@ body { flex-direction: column; background: none; color: rgb(128, 128, 128); - font-size: 20pt; - width: 256px; + font-size: 2vw; + width: 20vw; } .grid-tile { diff --git a/tile.js b/tile.js index 54f7dcf..42d1b39 100644 --- a/tile.js +++ b/tile.js @@ -15,7 +15,7 @@ class Tile 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.bind();