From d131324eaa451c70c1d13904b3f5cce7af473ecf Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Sat, 7 Apr 2018 22:24:23 -0400
Subject: [PATCH] Better styling for check indication

---
 assets/css/_board.scss | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index eb28a3e..9e216c7 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -98,24 +98,29 @@
 
 .board-game-state {
   align-items: center;
-  bottom: 0;
+  background-color: $game-state-background-color;
+  border-radius: calc(var(--board-size) / 75);
+  bottom: -2.5%;
+  box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color, inset 0 0 0 calc(var(--board-size) / 300) $white-square-color;
   color: $foreground-color;
-  display: flex;
-  font-size: calc(var(--board-size) / 30);
-  height: 5%;
+  display: none;
+  font-size: calc(var(--board-size) / 40);
+  height: 6%;
+  justify-content: center;
   position: absolute;
-  width: 90%;
+  right: 5%;
+  width: 15%;
+
+  &.check,
+  &.checkmate,
+  &.stalemate {
+    display: flex;
+  }
 
   &.checkmate,
   &.stalemate {
-    align-items: center;
-    background-color: $game-state-background-color;
-    border-radius: calc(var(--board-size) / 75);
-    box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color,
-    inset 0 0 0 calc(var(--board-size) / 300) $white-square-color;
-    display: flex;
+    font-size: calc(var(--board-size) / 30);
     height: 7.5%;
-    justify-content: center;
     left: calc(50% - 15%);
     top: calc(50% - 3.5%);
     width: 30%;
@@ -126,7 +131,6 @@
   align-items: center;
   display: flex;
   flex-grow: 1;
-  font-size: calc(var(--board-size) / 40);
   justify-content: center;
 }