Added sizing fallbacks for old browsers
Also removed an unused variable
This commit is contained in:
synth-ruiner
parent
dc971d34d8
commit
4717059dae
66
index.html
66
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,11 +44,14 @@
|
|||
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;
|
||||
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue