NotDotTeam/anxiety
NotDotTeam
/
anxiety
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

markup and styling updates 

removed dynamic viewport meta tag based scaling, it caused issues where a mobile browser's header wasnt able to be hidden

removed #topleft and #bottomright (corner text) elements because they aren't being used anywhere for anything and made mobile scaling weird

modified the css the new grid standards to vertically and horizontally center the game in a larger window, css can do that now and we dont need weird position absolute and `margin: auto` hacks!
This commit is contained in:
spaciecat 2019-09-12 14:55:54 +10:00
parent bed2b0b22f
commit d59d8af01d
2 changed files with 17 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -29,9 +29,10 @@
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/game.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Mobile -->
<meta name="viewport" content="width=360, user-scalable=no" id="my_viewport">
<!-- <meta name="viewport" content="width=360, user-scalable=no" id="my_viewport">
<script>
window.addEventListener("load", function(){
var resizeViewport = function(){
@ -46,7 +47,7 @@
setInterval(resizeViewport,2000);
resizeViewport();
});
</script>
</script> -->
</head>
<body>
@ -206,10 +207,6 @@
</div>
</div>
<!-- Corner Text -->
<div id="topleft"></div>
<div id="bottomright"></div>
</body>
</html>

68
styles/game.css
View File

@ -1,9 +1,16 @@
html,body{
width: 100%;
height: 100%;
overflow: hidden;
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body{
body {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
margin:0;
background: #111;
}
@ -14,19 +21,9 @@ MAIN GAME
******************************************************************************************************/
div{ /*, #game_words, #game_choices, #paused, #options, #loading, #gear, #about, #click_to_advance{*/
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
#game_container{
position: absolute;
top:0; left:0; bottom:0; right:0;
margin: auto;
position: relative;
display: inline-block;
width: 360px;
height: 600px;
background: #000;
@ -1046,40 +1043,3 @@ canvas{
left:0;
transition: top 0.5s ease-in-out;
}
/******************************************************************************************************
CORNER TEXT
******************************************************************************************************/
#topleft, #bottomright{
width: 200px;
color: #555;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.3em;
position: absolute;
}
#topleft a, #bottomright a{
color: #666;
}
#topleft a:hover, #bottomright a:hover{
color: #888;
}
#topleft{
top:10px;
left:10px;
text-align: left;
}
#bottomright{
bottom:10px;
right:10px;
text-align: right;
}
@media screen and (max-width: 800px) {
#topleft, #bottomright {
display: none;
}
}