wbrawner/hextris
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed the instruction screen to an extent

Browse source 
Text inside instructions still needs to be resized for mobile
This commit is contained in:
Garrett Finucane 2015-05-24 11:37:37 -04:00
parent 7d85fe4dcc
commit a0b6f625be
2 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -76,9 +76,9 @@
<a href = 'https://itunes.apple.com/us/app/id903769553?mt=8'><b>iOS</b></a> <a href ='https://play.google.com/store/apps/details?id=com.hextris.hextris'><b>Android</b></a><br>
By <a href="http://loganengstrom.com/" target="_blank">Logan Engstrom</a> & <a href='garrettdreyfus.github.io' target="_blank">Garrett Finucane</a>
</div>
<div id='startBtn' style='position:absolute;left:40%;top:38%;height:25%;width:25%;z-index:99999999;cursor:pointer;'></div>
<div id='startBtn' ></div>
<div id="helpScreen" class = 'unselectable'>
<h1 class = 'instructions_body'>Instructions</h1>
<h1 class = 'instructions_body' id = "instructions_head">Instructions</h1>
<p class = 'instructions_body' id = 'inst_main_body'></p>
</div>
<img id="openSideBar" class = 'helpText' src="./images/btn_help.svg" />

39
style/style.css
View file

@ -7,6 +7,7 @@
user-select: none;
padding:0;
margin:0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#HIGHSCORE {
@ -93,15 +94,15 @@ button:focus {
width:72px;
height:72px;
margin-left: 11px;
z-index: 3000;
z-index: 3003;
color:#232323;
cursor:pointer;
top:0;
left:0;
z-index:99;
}
#pauseBtn {
display:none;
position: fixed;
@ -130,19 +131,28 @@ button:focus {
bottom:0;
z-index:99;
}
#startBtn {
position:absolute;
left:40%;
top:38%;
height:25%;
width:25%;
z-index:99999999;
cursor:pointer;
}
#helpScreen {
height:480px;
width:320px;
height:100%;
width:100%;
z-index:3001;
position:fixed;
top:18px;
top:0;
margin:0;
font-size:15px;
text-align:center;
display:none;
color:#232323;
background-color:rgba(236,240,241,.7);
background-color:rgba(236,240,241,1);
}
#colorBlindBtn {
@ -157,9 +167,16 @@ button:focus {
color:#232323;
cursor:pointer;
}
.instructions_body {
margin-left:3px;
width:calc(100% - 12px) ! important;
margin-top:2%;
}
#instructions_head {
margin-top:15%;
}
@media only screen and (min-device-width : 320px)
@ -173,14 +190,12 @@ and (max-device-width : 480px) {
height:100%;
font-size:13px;
text-align:center;
background-color:rgba(255,255,255,0.9);
background-color:rgba(255,255,255,1);
}
#inst_main_body{
width:50%;
}
.instructions_body {
/*margin-top:20px;*/
margin-left:3px;
width:calc(100% - 12px) ! important;
}
}
.overlay {