X-Git-Url: https://git.auder.net/?p=xogo.git;a=blobdiff_plain;f=common.css;h=cdfbc7a809b77aa76568be564f84757072399dcb;hp=5ad94282a7a1291528217fb3c591594d65d7d70e;hb=HEAD;hpb=549ca151c2c1a5d0c76cc1ab249d1687c5a18f62

diff --git a/common.css b/common.css
index 5ad9428..eabf641 100644
--- a/common.css
+++ b/common.css
@@ -178,6 +178,18 @@ main > div {
   max-width: 800px;
   margin: 20px auto;
   padding: 0 10px;
+  overflow: auto;
+}
+.full-rules figure.show-pieces {
+  max-width: 90%;
+  text-align: center;
+  margin: 0 auto;
+}
+.full-rules figure.show-pieces > img {
+  max-width: 100px;
+}
+.full-rules > div {
+  margin-bottom: 20px;
 }
 .full-rules h1, .full-rules h2, .full-rules h3, .full-rules h4 {
   font-weight: bold;
@@ -203,12 +215,18 @@ main > div {
   margin: 5px 0;
   text-align: center;
 }
+piece.mark {
+  background-image: url('/pieces/mark.svg');
+}
+piece.mark.transparent {
+  opacity: 0.65;
+}
 .full-rules figure {
   display: block;
   overflow: visible;
   margin-top: 20px;
 }
-.full-rules figure:after {
+.full-rules figure::after {
   content: '';
   display: block;
   clear: both;
@@ -224,6 +242,16 @@ main > div {
 .full-rules .right {
   float: right;
 }
+@media screen and (max-width: 550px) {
+  .full-rules .left {
+    float: none;
+    margin-bottom: 10px;
+  }
+  .full-rules .right {
+    float: none;
+    margin-top: 10px;
+  }
+}
 .full-rules figcaption {
   display: block;
   text-align: center;
@@ -232,6 +260,10 @@ main > div {
   color: #0D1C46;
   font-weight: bold;
 }
+.full-rules .img-center {
+  display: block;
+  margin: 0 auto;
+}
 /* TODO: use same CSS for rules and full-rules? */
 .full-rules p, .full-rules ul, .full-rules ol {
   margin: 10px 0;
@@ -340,8 +372,6 @@ main > div {
 .chessboard {
   position: absolute;
   cursor: pointer;
-  min-width: 200px;
-  min-height: 200px;
 }
 piece {
   position: absolute;