Group some styles in variant.sass

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 17f3b18..587587f 100644 (file)
--- 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 3ae86f9..331e8f6 100644 (file)
--- 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 6cd3c1f..505e26f 100644 (file)
--- 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 331bc5a..0c57528 100644 (file)
--- 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 20b5fe0..9beca28 100644 (file)
--- 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.