Slight improvement in diagrams on rules pages

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 3eec290..40bf212 100644 (file)
--- 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 a5c6e65..8b271c2 100644 (file)
--- 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 baad36f..a86ebae 100644 (file)
--- 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