Mobile layout.

1 files changed, 34 insertions, 37 deletions

diff --git a/play.css b/play.css
index 2348984..12b1b9d 100644
--- a/play.css
+++ b/play.css
@@ -28,6 +28,12 @@ header.your_turn { background-color: orange; }
 	gap: 24px;
 }
 
+@media (max-width: 800px) {
+	.hand {
+		min-width: 1638px;
+	}
+}
+
 .card_back{background-image: url('cards/card_back.svg')}
 
 .card_truce{background-image:url('cards/card_truce.jpg')}
@@ -68,22 +74,30 @@ header.your_turn { background-color: orange; }
 }
 
 .role_info {
-	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
-	padding-top: 16px;
+	overflow: clip;
+	transition: height 100ms, padding 100ms;
+	height: 84px;
+	padding: 12px 0;
 }
 
 .role_info .card {
 	width: 168px;
 	height: 258px;
 	border-radius: 9px;
-	margin: 0 auto 16px auto;
+	margin: 0 auto;
 }
 
-.role_info .card:not(:hover) {
-	margin: 0 auto;
-	height: 96px;
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
+.role:hover .role_info {
+	height: 258px;
+}
+
+@media (max-height: 600px) {
+	.role:not(:hover) .role_info { display: none; }
+}
+
+@media (max-height: 800px) {
+	#turn_info { display: none; }
+	.role_info { height: 56px; padding: 8px 0; }
 }
 
 /* MAP */
@@ -233,40 +247,23 @@ div.block {
 /* HERALD DIALOG */
 
 #herald {
-	background-color: white;
-	border: 1px solid black;
-	position: fixed;
-	top: 80px;
-	left: 36px;
+	top: calc(44px + 12px);
+	left: 12px;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	z-index: 50;
-	user-select: none;
-	display: none;
-}
-#herald.show {
-	display: block;
-}
-#herald_header {
-	font-weight: bold;
-	cursor: move;
-	border-bottom: 1px solid black;
-	background-color: lightsteelblue;
-	padding: 3px 1em;
-}
-.herald_noble {
-	padding: 3px 1em;
-	display: none;
-}
-.herald_noble:hover {
-	color: white;
-	background-color: black;
-}
-.herald_noble.show {
-	display: block;
+	min-width: 120px;
+	max-height: calc(100% - 44px - 24px);
 }
+#herald li.title { font-weight: bold; }
+#herald li.title { background-color: hsl(43, 79%, 70%) }
+#herald li { background-color: hsl(43, 79%, 95%) }
+
+body.England #herald li.action:hover { background-color: hsl(204, 100%, 35%); }
+body.Scotland #herald li.action:hover { background-color: hsl(0, 59%, 35%); }
 
 /* BATTLE BOARD */
 
+#battle { top: 160px; left: 185px; }
+
 #battle { background-color: silver; }
 #battle_message { background-color: lightsteelblue; }
 #battle_header { background-color: steelblue; color: white; }