Clean up common play.css file.

author: Tor Andersson <tor@ccxvii.net> 2022-05-15 01:58:49 +0200
committer: Tor Andersson <tor@ccxvii.net> 2022-11-16 19:08:56 +0100
commit: 28cf5ed6773a7c2736d995711bbc8a0720d9a514 (patch)
tree: e6dbce7c19c8644ebecc7b6f322fa2fc2934b6a6
parent: 5fbb5f01d8a36d45be06db7a82f2c2eefc38824c (diff)
download: julius-caesar-28cf5ed6773a7c2736d995711bbc8a0720d9a514.tar.gz
4 files changed, 76 insertions, 43 deletions
diff --git a/blocks_columbia.css b/blocks_columbia.css
index 164b19f..30935ad 100644
--- a/blocks_columbia.css
+++ b/blocks_columbia.css
@@ -1,5 +1,5 @@
 .columbia-labels .known.block {
-	background-image: url('blocks_columbia.webp');
+	background-image: url('blocks_columbia.jpg');
 	background-repeat: no-repeat;
 	background-size: 496px 496px;
 }
diff --git a/blocks_simple.css b/blocks_simple.css
index 8856cb6..c3d4523 100644
--- a/blocks_simple.css
+++ b/blocks_simple.css
@@ -1,5 +1,5 @@
 .simple-labels .block.known {
-	background-image: url('blocks_simple.webp');
+	background-image: url('blocks_simple.opt.png');
 	background-repeat: no-repeat;
 	background-size: 600% 3100%;
 }
diff --git a/info/cards.html b/info/cards.html
index c433480..8a7ce6a 100644
--- a/info/cards.html
+++ b/info/cards.html
@@ -8,30 +8,30 @@ img { margin: 12px; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); width: 224px; heig
 <body>
 <h1>Julius Caesar - Cards</h1>
 <div class="list">
-<img src="../cards/card_apollo.webp">
-<img src="../cards/card_jupiter.webp">
-<img src="../cards/card_mars.webp">
-<img src="../cards/card_mercury.webp">
-<img src="../cards/card_neptune.webp">
-<img src="../cards/card_pluto.webp">
-<img src="../cards/card_vulcan.webp">
-<img src="../cards/card_41.webp">
-<img src="../cards/card_32.webp">
-<img src="../cards/card_32.webp">
-<img src="../cards/card_31.webp">
-<img src="../cards/card_31.webp">
-<img src="../cards/card_31.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_23.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_22.webp">
-<img src="../cards/card_21.webp">
-<img src="../cards/card_21.webp">
-<img src="../cards/card_21.webp">
-<img src="../cards/card_13.webp">
-<img src="../cards/card_12.webp">
-<img src="../cards/card_12.webp">
+<img src="../cards/card_apollo.jpg">
+<img src="../cards/card_jupiter.jpg">
+<img src="../cards/card_mars.jpg">
+<img src="../cards/card_mercury.jpg">
+<img src="../cards/card_neptune.jpg">
+<img src="../cards/card_pluto.jpg">
+<img src="../cards/card_vulcan.jpg">
+<img src="../cards/card_41.jpg">
+<img src="../cards/card_32.jpg">
+<img src="../cards/card_32.jpg">
+<img src="../cards/card_31.jpg">
+<img src="../cards/card_31.jpg">
+<img src="../cards/card_31.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_23.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_22.jpg">
+<img src="../cards/card_21.jpg">
+<img src="../cards/card_21.jpg">
+<img src="../cards/card_21.jpg">
+<img src="../cards/card_13.jpg">
+<img src="../cards/card_12.jpg">
+<img src="../cards/card_12.jpg">
diff --git a/play.css b/play.css
index a81f79b..c060369 100644
--- a/play.css
+++ b/play.css
@@ -1,5 +1,9 @@
 /* MAIN */
 
+html {
+	image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */
+}
+
 main { background-color: #461145; }
 #roles { background-color: tan; }
 header { background-color: tan; }
@@ -7,8 +11,10 @@ header.your_turn { background-color: orange; }
 #role_Caesar .role_name { background-color: salmon; }
 #role_Pompeius .role_name { background-color: #eb5; }
 #turn_info { background-color: burlywood; }
+.role_vp { float: right; }
 
 #log { background-color: wheat; }
+#log div { padding-left: 20px; text-indent: -12px; }
 #log .st { background-color: brown; color: gold; font-weight: bold; }
 #log .C { background-color: salmon; }
 #log .P { background-color: #eb5; }
@@ -17,6 +23,15 @@ header.your_turn { background-color: orange; }
 
 /* CARDS */
 
+.hand {
+	margin: 25px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	min-height: 348px;
+	gap: 16px;
+}
+
 .card_back { background-image: url('cards/card_back.jpg'); }
 .card_apollo { background-image: url('cards/card_apollo.jpg'); }
 .card_jupiter { background-image: url('cards/card_jupiter.jpg'); }
@@ -35,9 +50,11 @@ header.your_turn { background-color: orange; }
 .card_41 { background-image: url('cards/card_41.jpg'); }
 
 .card {
+	background-size: cover;
+	background-repeat: no-repeat;
 	background-color: white;
-	width: 225px;
-	height: 350px;
+	width: 224px;
+	height: 348px;
 	border-radius: 12px;
 	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 	transition: 100ms;
@@ -49,7 +66,15 @@ header.your_turn { background-color: orange; }
 }
 
 .card.enabled:hover {
-	transform: scale(1.1);
+	transform: translateY(-8px);
+}
+
+.card.enabled {
+	cursor: pointer;
+}
+
+.card.disabled {
+	filter: grayscale(100%);
 }
 
 .card.prior {
@@ -60,19 +85,23 @@ header.your_turn { background-color: orange; }
 	background-color: #822c1f;
 }
 
-.role_info { padding: 15px; }
-.role_info .card { margin: 0 auto; }
-.role_info .card { width: 90px; height: 140px; border-radius: 5px; }
-.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; }
+.role_info {
+	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
+	padding-top: 16px;
+}
 
-@media (max-height: 800px) {
-	.role_info { padding: 15px 0 0 0; }
-	.role_info .card { width: 135px; height: 80px; border-radius: 8px 8px 0 0; }
-	.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
+.role_info .card {
+	width: 168px;
+	height: 261px;
+	border-radius: 9px;
+	margin: 0 auto 16px auto;
 }
 
-@media (min-height: 1200px) {
-	.role_info .card { width: 180px; height: 280px; border-radius: 10px; }
+.role_info .card:not(:hover) {
+	margin: 0 auto;
+	height: 96px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
 }
 
 /* BATTLE BOARD */
@@ -100,10 +129,14 @@ body:not(.replay) .battle_line.enemy .battle_menu_list { min-height: 0; }
 #map {
 	width: 2475px;
 	height: 1275px;
-	background-image: url("map.jpg");
 	background-size: cover;
 }
 
+#map { background-image: url("map75.jpg") }
+@media (min-resolution: 97dpi) {
+	#map { background-image: url("map150.jpg") }
+}
+
 #turn {
 	position: absolute;
 	width: 75px;
author	Tor Andersson <tor@ccxvii.net>	2022-05-15 01:58:49 +0200
committer	Tor Andersson <tor@ccxvii.net>	2022-11-16 19:08:56 +0100
commit	28cf5ed6773a7c2736d995711bbc8a0720d9a514 (patch)
tree	e6dbce7c19c8644ebecc7b6f322fa2fc2934b6a6
parent	5fbb5f01d8a36d45be06db7a82f2c2eefc38824c (diff)
download	julius-caesar-28cf5ed6773a7c2736d995711bbc8a0720d9a514.tar.gz