From 4717059daec7e69f749c8b83fd6b475b3bb706c4 Mon Sep 17 00:00:00 2001
From: synth-ruiner <max@tx87.net>
Date: Sat, 14 Mar 2015 14:52:30 +0000
Subject: [PATCH] Added sizing fallbacks for old browsers

Also removed an unused variable
---
 index.html | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 5 deletions(-)

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();