fix small devices view

_media/js/game.js

@@ -35,7 +35,7 @@ function generateKeyboard(layout)
 
 	layout.split('').forEach(function(letter)
 	{
-		keyboardHtmlStr = keyboardHtmlStr + '<button class="button outline is-marginless" id="' + letter +
+		keyboardHtmlStr = keyboardHtmlStr + '<button class="button clear is-marginless" id="' + letter +
 			'" onclick="offChar(\'' + letter + '\')"> ' + letter + '</button>';
 	})
 
@@ -123,4 +123,11 @@ window.onload = function()
 
 	// fix load empty word
 	// if (gameWord === 0) { document.location.reload(true); }
+
+	if (window.screen.availWidth <= 599)
+	{
+		document.querySelector('#lives').classList.remove('error');
+		document.querySelector('#lives').classList.add('dark');
+		alert(599);
+	}
 }

index.html

@@ -25,11 +25,11 @@
   <div class="container">
     <header>
       <nav class="nav">
-        <div class="nav-left">
+        <div class="nav-left hide-xs">
           <a class="brand" href="#">WORDs</a>
         </div>
         <div class="nav-center">
-          <p id="lives" class="button error">loading...</p>
+          <p id="lives" class="button error is-full-width">loading...</p>
         </div>
         <div class="nav-right">
           <!-- <a class="button dropdown">Language</a> -->
@@ -41,7 +41,7 @@
     <nav class="tabs is-full">
       <a onclick="document.location.reload(true);" class="active" id="gameButton">Game</a>
       <a onclick="showPage(this, pageStatistics);" id="statsButton">Statistics</a>
-      <a onclick="showPage(this, pageCredits);" id="creditsButton">Credits</a>
+      <a onclick="showPage(this, pageCredits);" id="creditsButton" class="hide-xs">Credits</a>
     </nav>
 
     <br>
@@ -56,8 +56,8 @@
       </div>
     </section>
 
-    <hr>
-    <footer class="text-center">
+    <footer class="text-center hide-xs">
+      <hr>
       <p class="text-grey is-marginless is-small">
         by iiiypuk<br>
         ver: 2.0.0