From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 14 Dec 2018 16:05:35 +0000 (+0100)
Subject: Slight improvement in diagrams on rules pages
X-Git-Url: https://git.auder.net/js/css/%7B%7B%20path%28%27mixstore_static_about%27%29%20%7D%7D?a=commitdiff_plain;h=18f9c763d17110b75489f721bf155bb88ac6c5c1;p=vchess.git

Slight improvement in diagrams on rules pages
---

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 3eec2900..40bf2123 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -24,15 +24,35 @@
 .seek, button.seek:hover
   background-color: #cc99ff
 
+figure.diagram-container
+  margin: 15px 0 15px 0
+  text-align: center
+  width: 100%
+  display: block
+
 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
 figure.diagram-container > .diagram
   display: block
-  width: 45%
+  width: 40%
   min-width: 300px
   max-width: 800px
   margin-left: auto
   margin-right: auto
 
+figure.diagram-container > .diagram2
+  display: block
+  float: left
+  width: 40%
+  min-width: 300px
+  max-width: 800px
+  margin-right: 40px
+  margin-bottom: 10px
+
+figure.diagram-container > figcaption
+  display: block
+  clear: both
+  padding-top: 5px
+
 .topindicator
   position: relative
   border: 1px solid brown
@@ -145,11 +165,6 @@ img.mark-square
   left: 12%
   opacity: .7
 
-figure.diagram-container > figcaption
-  display: block
-  clear: both
-  padding-top: 5px
-
 .highlight
   background-color: #00cc66 !important
 
@@ -188,12 +203,6 @@ figure.showPieces > img
 figure.showPieces > figcaption
   color: #6C6C6C
 
-figure.diagram-container
-  margin: 15px 0 15px 0
-  text-align: center
-  width: 100%
-  display: block
-
 .section-title
   padding: 0
 
diff --git a/views/rules/Chess960.pug b/views/rules/Chess960.pug
index a5c6e657..8b271c2f 100644
--- a/views/rules/Chess960.pug
+++ b/views/rules/Chess960.pug
@@ -140,14 +140,13 @@ ul
 		The capture is possible only right after the pawn jump: not later in the game.
 
 figure.diagram-container
-	.diagram
+	.diagram2
 		| fen:nr1kb1r1/ppp3pp/8/2Pp4/8/7P/PP3PP1/1R3KBR:
-	figcaption Black just played d5 (jump from d7).
-
-figure.diagram-container
-	.diagram
+	.diagram2
 		| fen:nr1kb1r1/ppp3pp/3P4/8/8/7P/PP3PP1/2KR2BR:
-	figcaption After cxd6 e.p. and 0-0-0.
+	figcaption.
+		Left: black just played d5 (jump from d7).
+		Right: after cxd6 e.p. and 0-0-0.
 
 h3 End of the game
 
diff --git a/views/rules/Magnetic.pug b/views/rules/Magnetic.pug
index baad36ff..a86ebaec 100644
--- a/views/rules/Magnetic.pug
+++ b/views/rules/Magnetic.pug
@@ -22,12 +22,11 @@ p
 	| So, after each move some pieces are attracted while others are repelled.
 
 figure.diagram-container
-	.diagram
+	.diagram2
 		| fen:3b4/8/3K4/q1R2rP1/3Q4/8/3b4/8:
-	figcaption Before white move Qd5
-	.diagram
+	.diagram2
 		| fen:3b4/8/3K4/qR1Qr1P1/3b4/8/8/8:
-	figcaption After white move Qd5
+	figcaption Left: before white move Qd5. Right: after this move.
 
 p.
 	Remember that since kings have a neutral charge, any of their movement does not