Improve layout

index.html

@@ -19,8 +19,10 @@
     <div id="lang-de" class="lang" data-lang="de">Deutsch</div>
 </div>
 <div id="background" class="blurred">
-    <div id="time">00:00</div>
-    <div id="score" data-prefix="Score: ">0</div>
+    <div id="game-stats">
+        <div id="time">00:00</div>
+        <div id="score" data-prefix="Score: ">0</div>
+    </div>
     <canvas id="tetris-background" width="240" height="400"></canvas>
     <canvas id="tetris" width="240" height="400"></canvas>
     <div id="controls">

language.js

@@ -9,6 +9,7 @@ const en = {
     "<br>" +
     "Space/Esc -> Pause the game",
     play: "Play!",
+    time: "Time: ",
     score: "Score: ",
     paused: "Paused",
     resume: "Resume",
@@ -27,6 +28,7 @@ const de = {
     "<br>" +
     "Leertaste/Esc -> Pausiere das Spiel",
     play: "Spielen!",
+    time: "Zeit: ",
     score: "Punkte: ",
     paused: "Pausiert",
     resume: "Weiterspielen",
@@ -58,6 +60,7 @@ function switchLang(lang) {
     currentLang = lang;
     const l = new Language(currentLang);
     document.getElementById("score").setAttribute("data-prefix", l.getStr("score"));
+    document.getElementById("time").setAttribute("data-prefix", l.getStr("time"));
     document.getElementById("control-text").innerHTML = l.getStr("controls");
     if(firstRun) {
         document.getElementById("game-title").innerHTML = l.getStr("title");

style.css

@@ -4,7 +4,7 @@ body {
     overflow: hidden;
     background: #202028;
     font-family: Roboto, Helvetica, Arial, sans-serif;
-    font-size: 40px;
+    font-size: 2.5em;
     color: #fff;
 }
 
@@ -100,24 +100,28 @@ body {
     z-index: 0;
 }
 
-#score, #controls {
+#game-stats {
     position: absolute;
-    font-weight: 900;
     top: 50%;
-    right: 75%;
-    transform: translate(-50%, -50%);
+    left: 50%;
+    transform: translate(-50%, -50%) translateX(-30vw);
+    text-align: right;
 }
 
-#score:before {
+#score {
+    font-weight: 900;
+}
+
+#time:before, #score:before {
     content: attr(data-prefix);
 }
 
 #controls {
-    left: 75%;
-    right: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) translateX(30vw);
     font-size: 20px;
-    font-weight: 300;
-    transform: translate(0, -50%);
 }
 
 #footer {
@@ -156,23 +160,25 @@ body {
     color: rgba(255, 255, 255, 1);
 }
 
-#time {
-    margin-top: 5px;
-    margin-left: 10px;
-}
-
 @media (max-width: 1400px) {
     #tetris, #tetris-background {
         height: 75%;
     }
 
-    #score {
+    #game-stats {
         top: 10px;
         left: 50%;
-        right: initial;
         transform: translateX(-50%);
     }
 
+    #game-stats > div {
+        display: inline;
+    }
+
+    #time {
+        margin-right: 50px;
+    }
+
     #controls {
         top: initial;
         bottom: 10px;