diff --git a/index.html b/index.html
index 4ef9e6b..bb7e336 100644
--- a/index.html
+++ b/index.html
@@ -15,19 +15,28 @@
font-style: normal;
}
+ * {
+ font-family: Helsinki;
+ }
+
html {
background-color: #272822;
margin: 0;
+ height: 10em; /* fallback */
height: 100vh;
+ width: 10em; /* fallback */
width: 100vw;
overflow: hidden;
- font-family: Helsinki;
+ -moz-user-select: none;
-webkit-user-select: none;
+ user-select: none;
}
body {
+ height: 10em; /* fallback */
height: 100vh;
margin: 0 auto;
+ width: 10em; /* fallback */
width: 100vmin;
}
@@ -35,17 +44,20 @@
background-color: #1b1c17;
float: left;
margin: 0 auto;
+ height: 9em; /* fallback */
height: 100vh - 10vmin;
}
#stats {
+ height: 1em; /* fallback */
height: 10vmin;
+ width: 10em; /* fallback */
width: 100vmin;
float: left;
background: #768087;
background: -moz-linear-gradient(top, #768087 0%, #53595e 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#768087), color-stop(100%,#53595e));
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #768087), color-stop(100%, #53595e));
background: -webkit-linear-gradient(top, #768087 0%,#53595e 100%);
background: -o-linear-gradient(top, #768087 0%,#53595e 100%);
background: -ms-linear-gradient(top, #768087 0%,#53595e 100%);
@@ -54,12 +66,16 @@
}
#stats button {
+ margin: 0.1em; /* fallback */
margin: 1vmin;
float: right;
- font-family: Helsinki;
+ font-size: 0.3em; /* fallback */
font-size: 3vmin;
+ border-radius: 0.2em; /* fallback */
border-radius: 2vmin;
+ padding: 0.175em; /* fallback */
padding: 1.75vmin;
+ box-shadow: 0.05em 0.05em 0 #000; /* fallback */
box-shadow: 0.5vmin 0.5vmin 0 #000;
border: 0.4vmin solid #454e52;
position: relative;
@@ -69,14 +85,18 @@
#stats div {
float: left;
+ font-size: 0.54em; /* fallback */
font-size: 5.4vmin;
+ margin: 0.2em; /* fallback */
margin: 2vmin;
width: auto;
}
#gameOver, #setup {
position: absolute;
+ width: 10em; /* fallback */
width: 100vmin;
+ height: 10em; /* fallback */
height: 100vh;
background-color: rgba(0,0,0,0.3);
}
@@ -87,14 +107,18 @@
#setup h2,
#setup label {
+ margin: 0.4em 0.35em; /* fallback */
margin: 4vmin 3.5vmin;
+ font-size: 0.6em; /* fallback */
font-size: 6vmin;
color: #fe7ac6;
+ text-shadow: 0.05em 0.05em 0 #a4f4b4; /* fallback */
text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
}
#setup div.centre {
position: absolute;
+ left: 1em; /* fallback */
left: 10vmin;
}
@@ -104,22 +128,30 @@
/* after checked input */
input:checked + label {
+ border: 0.1em dotted #a4f4b4; /* fallback */
border: 1vmin dotted #a4f4b4;
+ border-radius: 0.2em; /* fallback */
border-radius: 2vmin;
+ padding: 0.1em 0.2em; /* fallback */
padding: 1vmin 2vmin;
}
button {
- font-family: Helsinki;
+ font-size: 0.6em; /* fallback */
font-size: 6vmin;
+ border-radius: 0.2em; /* fallback */
border-radius: 2vmin;
+ padding: 0.2em; /* fallback */
padding: 2vmin;
margin: 0 auto;
+ box-shadow: 0.1em 0.1em 0 #000; /* fallback */
box-shadow: 1vmin 1vmin 0 #000;
border: none;
position: absolute;
+ left: 3.8em; /* fallback */
left: 38vmin;
+ top: 7.5em; /* fallback */
top: 75vmin;
background: #768087;
@@ -133,6 +165,7 @@
}
button.cancel {
+ right: 2em;
right: 20vmin;
left: auto;
}
@@ -143,9 +176,13 @@
h1 {
color: #a4f4b4;
+ font-size: 1.2em; /* fallback */
font-size: 12vmin;
+ margin-top: 0.6em; /* fallback */
margin-top: 6vmin;
+ margin-bottom: 0.6em; /* fallback */
margin-bottom: 6vmin;
+ text-shadow: 0.1em 0..1em 0 #fe7ac6; /* fallback */
text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
}
@@ -159,16 +196,23 @@
li {
color: white;
+ font-size: 0.8em; /* fallback */
font-size: 8vmin;
+ padding: 0.1em; /* fallback */
padding: 1vmin;
+ padding-top: 0.05em; /* fallback */
padding-top: 0.5vmin;
+ padding-bottom: 0.15em; /* fallback */
padding-bottom: 1.5vmin;
text-align: center;
vertical-align: middle;
float: left;
+ height: 0.8em; /* fallback */
height: 8vmin;
+ width: 0.8em; /* fallback */
width: 8vmin;
background-color: #454e52;
+ border-radius: 0.2em; /* fallback */
border-radius: 2vmin;
cursor: default;
}
@@ -228,7 +272,9 @@
p {
color: #fff;
+ font-size: 0.43em; /* fallback */
font-size: 4.3vmin;
+ padding: 0 1em; /* fallback */
padding: 0 10vmin;
}
@@ -247,6 +293,7 @@
var clickholdMs = 200;
var timeout; //hold timer
var mouseHeld = false;
+ var viewportSizingAvailable = ($('#game').height == $(window).height()); // only run once
$(document).ready(function() {
function drawGameBoard() {
@@ -409,6 +456,12 @@
return $(window).width() / $(window).height();
}
+ function resizeToWindow() {
+ if (!viewportSizingAvailable) {
+ $('html').css('font-size', Math.min($(window).width(), $(window).height()) / 10);
+ }
+ }
+
function isPortrait() {
return getAspectRatio() > 1;
}
@@ -534,7 +587,6 @@
firstClick = true;
score = 0;
- mines = 0;
updateScore();
updateMinesLeft();
@@ -661,6 +713,12 @@
updateMinesLeft();
});
+ $(window).resize(function() {
+ resizeToWindow();
+ });
+
+ resizeToWindow();
+
//instantiate the game
drawGameBoard();