From 80b15df120c7444afc091b29332a27df36416126 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 20 Dec 2018 21:20:55 +0100
Subject: [PATCH] Group some styles in variant.sass

---
 public/javascripts/components/game.js |   4 +-
 public/stylesheets/index.sass         |   2 +
 public/stylesheets/variant.sass       | 130 +++++++++++++-------------
 views/rules/Chess960.pug              |   4 +-
 views/rules/Magnetic.pug              |   4 +-
 5 files changed, 71 insertions(+), 73 deletions(-)

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 17f3b18d..587587fb 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -371,7 +371,7 @@ Vue.component('my-game', {
 							attrs: { "aria-label": 'Undo' },
 							"class": {
 								"small": smallScreen,
-								"marginleft": true,
+								"spaceleft": true,
 							},
 						},
 						[h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
@@ -395,7 +395,7 @@ Vue.component('my-game', {
 							attrs: { "aria-label": 'Undo' },
 							"class": {
 								"small": smallScreen,
-								"marginleft": true,
+								"spaceleft": true,
 							},
 						},
 						[h('i', { 'class': { "material-icons": true } }, "undo")]
diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
index 3ae86f9e..331e8f68 100644
--- a/public/stylesheets/index.sass
+++ b/public/stylesheets/index.sass
@@ -10,6 +10,8 @@
     padding-left: 10px
     padding-right: 15px
 
+// TODO: box-shadow or box-sizeing ?
+//https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge
 .variant
   box-sizing: border-box
   border: 1px solid brown
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 6cd3c1f4..505e26fa 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -11,50 +11,53 @@
     margin-right: 0
     padding: 0 3px
 
-
 //TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...)
 
-
 .warn
   padding: 3px
   color: red
   background-color: lightgrey
   font-weight: bold
 
-.playing, button.playing:hover
+button.playing
   background-color: #ffcc99
+  :hover
+    background-color: #ffcc99
 
-.seek, button.seek:hover
+button.seek
   background-color: #cc99ff
+  :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: 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
+  .diagram
+    display: block
+    width: 40%
+    //min-width: 300px
+    max-width: 800px
+    margin-left: auto
+    margin-right: auto
+  .diag12
+    float: left
+    margin-left: calc(10% - 20px)
+    margin-right: 40px
+    @media screen and (max-width: 500px)
+      float: none
+      margin: 0 auto 10px auto
+  .diag22
+    float: left
+    margin-right: calc(10% - 20px)
+    @media screen and (max-width: 500px)
+      float: none
+      margin: 0 auto
+  figcaption
+    display: block
+    clear: both
+    padding-top: 5px
 
 .topindicator
   position: relative
@@ -68,7 +71,7 @@ figure.diagram-container > figcaption
   float: right
   margin: 0 20px 10px 0
 
-.marginleft
+.spaceleft
   margin-left: 30px
 
 .reserve-count
@@ -118,45 +121,38 @@ div.board11
 
 .game
   clear: both
-
-.game .board
-  cursor: pointer
+  .board
+    cursor: pointer
 
 #choices
-	margin-bottom: 10px
-
-#choices
-	margin: 0 auto 0 auto
-	position: relative
-	z-index: 300
-	overflow-y: inherit
-	background-color: rgba(0,0,0,0) //transparent
-
-#choices img
-	cursor: pointer
-	background-color: #e6ee9c
-
-#choices img:hover
-	background-color: skyblue
-
-img.choice-piece
-	height: 0
-	width: 90%
-	padding: 5%
-	height: 90%
-
-img.piece, img.mark-square, img.choice-piece
-	max-width: 100%
-	height: auto
-	display: block
+  margin: 0 auto 0 auto
+  position: relative
+  z-index: 300
+  overflow-y: inherit
+  background-color: rgba(0,0,0,0) //transparent
+  img
+    cursor: pointer
+    background-color: #e6ee9c
+    :hover
+      background-color: skyblue
+    .choice-piece
+      width: 90%
+      max-width: 100%
+      height: auto
+      display: block
+
+img.piece, img.mark-square
+  max-width: 100%
+  height: auto
+  display: block
 
 img.mark-square
-	opacity: 0.6
+  opacity: 0.6
 
 img.ghost
-	position: absolute
-	opacity: 0.4
-	top: 0
+  position: absolute
+  opacity: 0.4
+  top: 0
 
 img.piece
   width: 100%
@@ -175,17 +171,17 @@ img.mark-square
   background-color: #cc3300 !important
 
 .light-square.lichess
-	background-color: #f0d9b5;
+  background-color: #f0d9b5;
 .dark-square.lichess
-	background-color: #b58863;
+  background-color: #b58863;
 .light-square.chesscom
-	background-color: #e5e5ca;
+  background-color: #e5e5ca;
 .dark-square.chesscom
-	background-color: #6f8f57;
+  background-color: #6f8f57;
 .light-square.chesstempo
-	background-color: #fdfdfd;
+  background-color: #fdfdfd;
 .dark-square.chesstempo
-	background-color: #88a0a8;
+  background-color: #88a0a8;
 
 .light-square-diag
   background-color: #e5e5ca
diff --git a/views/rules/Chess960.pug b/views/rules/Chess960.pug
index 331bc5ab..0c575289 100644
--- a/views/rules/Chess960.pug
+++ b/views/rules/Chess960.pug
@@ -140,9 +140,9 @@ ul
 		The capture is possible only right after the pawn jump: not later in the game.
 
 figure.diagram-container
-	.diagram2
+	.diagram.diag12
 		| fen:nr1kb1r1/ppp3pp/8/2Pp4/8/7P/PP3PP1/1R3KBR:
-	.diagram2
+	.diagram.diag22
 		| fen:nr1kb1r1/ppp3pp/3P4/8/8/7P/PP3PP1/2KR2BR:
 	figcaption.
 		Left: black just played d5 (jump from d7).
diff --git a/views/rules/Magnetic.pug b/views/rules/Magnetic.pug
index 20b5fe08..9beca28a 100644
--- a/views/rules/Magnetic.pug
+++ b/views/rules/Magnetic.pug
@@ -22,9 +22,9 @@ p
 	| So, after each move some pieces are attracted while others are repelled.
 
 figure.diagram-container
-	.diagram2
+	.diagram.diag12
 		| fen:3b4/8/3K4/q1R2rP1/3Q4/8/3b4/8:
-	.diagram2
+	.diagram.diag22
 		| fen:3b4/8/3K4/qR1Qr1P1/3b4/8/8/8:
 	figcaption Left: before white move Qd5. Right: after this move.
 
-- 
2.44.0