rjt
/
obshagce
1
0
Fork 0
Code Issues 3 Pull Requests Releases Activity

Changes to make it look right on phones / vertical

This commit is contained in:
Rylie James Thomas 2018-11-30 16:53:08 +11:00
parent a7731bfeda
commit 656d33d20c
3 changed files with 77 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
base.css
View File

@ -31,12 +31,28 @@ img {
main#board {
display:grid;
grid-gap:2px;
grid-template-columns:32em 32em;
grid-template-rows:auto;
grid-template-areas:
"perp view"
"msg view";
}
@media screen and (orientation:landscape) {
main#board {
grid-template-columns:32em 32em;
grid-template-areas:
"perp view"
"msg view";
}
}
@media screen and (orientation:portrait) {
main#board {
grid-template-columns:100%;
grid-template-areas:
"perp"
"msg"
"view";
}
}
main#board section.window {
background-color:lightgray;
border:2px outset lightgrey;
@ -53,9 +69,11 @@ main#board h2 {
padding:0 1em;
text-transform:uppercase;
}
main#board h1 {
text-align:center;
}
main#board h2 {}
/* - - - - - - - - - - - - - -
@ -65,18 +83,25 @@ main#board section#view {
grid-area:view;
text-align:center;
}
main#board section#view section#map {
display:grid;
grid-gap:2px;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:1fr 1fr 1fr 1fr 1fr;
}
main#board section#view section#map section.cell {
background-size:6em 6em;
border:1px inset lightgray;
height:6em;
padding:0;
width:6em;
}
@media screen and (orientation:landscape) {
main#board section#view section#map section.cell {
background-size:6em 6em;
height:6em;
width:6em;
}
}
/* - - - - - - - - - - - - - -
@ -85,11 +110,12 @@ main#board section#view section#map section.cell {
main#board section#perception {
grid-area:perp;
}
main#board section#perception section#senses {
display:grid;
grid-gap:2px;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:1fr 1fr;
grid-template-columns:repeat(5, 19.5%);
grid-template-rows:1repeat(2, 1fr);
}
main#board section#perception section#senses section.icon {
@ -99,6 +125,13 @@ main#board section#perception section#senses section.icon {
main#board section#perception section#senses section.description {
border:1px inset lightgray;
color:black;
word-wrap:break-word;
}
@media screen and (orientation:portrait) {
main#board section#perception section#senses section.discription {
}
}
/* - - - - - - - - - - - - - -
@ -107,22 +140,48 @@ main#board section#perception section#senses section.description {
main#board section#message {
grid-area:msg;
}
main#board iframe {
border:1px inset lightgray;
height:15em;
margin:0;
padding:0;
width:31.4em;
}
@media screen and (orientation:landscape) {
main#board iframe {
height:15em;
width:31.4em;
}
}
@media screen and (orientation:portrait) {
main#board iframe {
width:100%;
}
}
/* - - - - - - - - - - - - - -
Title screen styling
*/
main#titlescreen {
margin:0;
padding:0;
width:32em;
@media screen and (orientation:landscape) {
main#titlescreen {
margin:0;
padding:0;
width:32em;
}
}
@media screen and (orientation:portrait) {
main#titlescreen {
width:100%;
}
}
@media screen and (orientation:portrait) {
main#titlescreen section#splash img.no_scale {
max-width:100%;
}
}
main#titlescreen h1,

3
boards/room_01.html
View File

@ -1,9 +1,10 @@
<!DOCTYPE html>
<html lang="en-au">
<html lang="en-AU">
<head>
<title>EXAMPLE GAME - ROOM 001</title>
<meta charset="UTF-8">
<meta name="author" content="Blueberry Soft">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="message_frame">
<link rel="stylesheet" type="text/css" href="../base.css">
<style>

1
index.html
View File

@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="author" content="Blueberry Soft">
<meta name="description" content="Example game for OBSHAGCE">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base target="_self">
<link type="text/css" rel="stylesheet" href="base.css">
<style>