Initial commit

style.css

@@ -0,0 +1,183 @@
+#game-container {
+    position: relative;
+    display: grid;
+    width: 800px;
+    height: 1220px;
+    grid-gap: 10px;
+    grid-template-areas: "dead-black" "field" "dead-white";
+    grid-template-rows: 1fr 4fr 1fr;
+    -webkit-transform-origin: center center;
+    -moz-transform-origin: center center;
+    -ms-transform-origin: center center;
+    -o-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transition: transform 1s 1s;
+    -moz-transition: transform 1s 1s;
+    -ms-transition: transform 1s 1s;
+    -o-transition: transform 1s 1s;
+    transition: transform 1s 1s;
+}
+
+#game-container.black-turn {
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+#game-container .board {
+    position: relative;
+    grid-area: field;
+}
+
+#game-container .board .col {
+    display: inline-block;
+    width: 12.5%;
+    height: 100%;
+}
+
+#game-container .board .col .field {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 12.5%;
+}
+
+#game-container .board .col .field.white {
+    background-color: #eee;
+}
+
+#game-container .board .col .field.black {
+    background-color: #000;
+}
+
+#game-container .board .col .field.possible-target {
+    border: 4px solid #f0f;
+}
+
+#game-container.focused .board .col .field:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .1);
+    content: "";
+    pointer-events: none;
+}
+
+#game-container.focused .board .col .field.possible-target:after {
+    background: transparent;
+}
+
+#game-container .figures {
+    position: relative;
+    z-index: 1;
+    pointer-events: none;
+    grid-area: field;
+}
+
+#game-container .figures .figure {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 12.5%;
+    height: 12.5%;
+    transition: transform .3s;
+}
+
+.figure:before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 75%;
+    height: 75%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    color: #f0f;
+    content: '';
+    -webkit-transition: transform 1s 1s;
+    -moz-transition: transform 1s 1s;
+    -ms-transition: transform 1s 1s;
+    -o-transition: transform 1s 1s;
+    transition: transform 1s 1s;
+}
+
+.black-turn .figure:before {
+    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
+    -moz-transform: translate(-50%, -50%) rotate(-180deg);
+    -ms-transform: translate(-50%, -50%) rotate(-180deg);
+    -o-transform: translate(-50%, -50%) rotate(-180deg);
+    transform: translate(-50%, -50%) rotate(-180deg);
+}
+
+.pawn.white:before {
+    background-image: url("assets/pawn_white.svg");
+}
+
+.rook.white:before {
+    background-image: url("assets/rook_white.svg");
+}
+
+.knight.white:before {
+    background-image: url("assets/knight_white.svg");
+}
+
+.bishop.white:before {
+    background-image: url("assets/bishop_white.svg");
+}
+
+.queen.white:before {
+    background-image: url("assets/queen_white.svg");
+}
+
+.king.white:before {
+    background-image: url("assets/king_white.svg");
+}
+
+.pawn.black:before {
+    background-image: url("assets/pawn_black.svg");
+}
+
+.rook.black:before {
+    background-image: url("assets/rook_black.svg");
+}
+
+.knight.black:before {
+    background-image: url("assets/knight_black.svg");
+}
+
+.bishop.black:before {
+    background-image: url("assets/bishop_black.svg");
+}
+
+.queen.black:before {
+    background-image: url("assets/queen_black.svg");
+}
+
+.king.black:before {
+    background-image: url("assets/king_black.svg");
+}
+
+.dead-figures {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+.dead-figures .figure {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.dead-figures.black {
+    grid-area: dead-white;
+}
+
+.dead-figures.white {
+    grid-area: dead-black;
+}