diff --git a/base.css b/base.css
index e959228..d9c4529 100644
--- a/base.css
+++ b/base.css
@@ -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,
diff --git a/boards/room_01.html b/boards/room_01.html
index 66791b9..e137a4a 100644
--- a/boards/room_01.html
+++ b/boards/room_01.html
@@ -1,9 +1,10 @@
-
+
EXAMPLE GAME - ROOM 001
+