X-Git-Url: https://git.auder.net/images/pieces/current/gitweb.js?a=blobdiff_plain;f=public%2Fstylesheets%2Fvariant.sass;h=40bf2123a80c66f00ba808531a54fdf48fe9bbbc;hb=18f9c763d17110b75489f721bf155bb88ac6c5c1;hp=8839c34271438845a6af510d02ebae91553384ac;hpb=32cfcea44bf00b0c6c4d172cca715823076ff490;p=vchess.git

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 8839c342..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
@@ -81,10 +101,6 @@ div.board
   display: inline-block
   position: relative
 
-div.board4
-  width: 25%
-  padding-bottom: 25%
-
 div.board8
   width: 12.5%
   padding-bottom: 12.5%
@@ -149,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
 
@@ -192,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