From 472dc404209a80e07a5ca67e395cf56f9e6dbf94 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 18 Sep 2021 13:20:39 +0200
Subject: crusader: Rotate map to landscape on wide displays.

---
 play.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

(limited to 'play.html')

diff --git a/play.html b/play.html
index 255784b..bfa82df 100644
--- a/play.html
+++ b/play.html
@@ -78,19 +78,25 @@
 /* MAP */
 
 .mapwrap {
+	position: relative;
+	background-color: #224467;
 	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
 	width: 1275px;
 	height: 2475px;
 }
 
 .map {
-	position: relative;
+	position: absolute;
 	width: 1275px;
 	height: 2475px;
 	background-repeat: no-repeat;
 	background-color: #224467;
 }
 
+.map > * {
+	position: absolute;
+}
+
 .map.hide_blocks div.blocks {
 	visibility: hidden;
 }
@@ -228,6 +234,26 @@ body.shift .block.known:hover {
 	transition-timing-function: ease;
 }
 
+/* LANDSCAPE MAP */
+
+@media (min-width: 2000px) {
+	.mapwrap:not(.fit) {
+		box-shadow: 1px 0px 10px rgba(0,0,0,0.5);
+		height: 1275px;
+		width: 2475px;
+		margin-bottom: 40px;
+		margin-top: 30px;
+	}
+	.mapwrap:not(.fit) .map {
+		transform: translateY(1275px) rotate(-90deg);
+		transform-origin: 0 0;
+	}
+	.mapwrap:not(.fit) .map .block.r0 { transform: rotate(90deg); }
+	.mapwrap:not(.fit) .map .block.r1 { transform: rotate(0deg); }
+	.mapwrap:not(.fit) .map .block.r2 { transform: rotate(-90deg); }
+	.mapwrap:not(.fit) .map .block.r3 { transform: rotate(-180deg); }
+}
+
 /* BATTLE BOARD */
 
 .battle {
-- 
cgit v1.2.3