From d59d8af01db242de3ae643f1e76aa3a1e491fded Mon Sep 17 00:00:00 2001 From: spaciecat <5057054+spaciecat@users.noreply.github.com> Date: Thu, 12 Sep 2019 14:55:54 +1000 Subject: [PATCH] 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! --- index.html | 9 +++---- styles/game.css | 68 ++++++++++--------------------------------------- 2 files changed, 17 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index fecdad4..c6bf657 100644 --- a/index.html +++ b/index.html @@ -29,9 +29,10 @@ + - + @@ -206,10 +207,6 @@ - - -
-
diff --git a/styles/game.css b/styles/game.css index 6e8d661..b4abe53 100644 --- a/styles/game.css +++ b/styles/game.css @@ -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; - } -} \ No newline at end of file