visuals

1 files changed, 144 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100755
index 0000000..5d1d6d5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,144 @@
+#board {
+  background-image: url("assets/board.jpg");
+  background-size: 100%;
+  opacity: 0.9;
+  margin: 0 auto;
+  padding: 5vh;
+  height: 60vh;
+  aspect-ratio: 1; }
+
+@media screen and (max-width: 600px) {
+  #board {
+    height: 80vw;
+    padding: 5vw; } }
+
+table {
+  height: 100%;
+  width: 100%; }
+
+table, tr, td {
+  border: 1px solid black;
+  padding: 0;
+  margin: 0;
+  border-collapse: collapse; }
+
+.stone {
+  position: absolute;
+  display: block; }
+
+.stone img {
+  width: 100%; }
+
+#head {
+  display: block;
+  height: 14vh;
+  margin: 0;
+  padding: 0;
+  overflow: scroll; }
+
+@media screen and (max-width: 600px) {
+  #head {
+    height: 30vw;
+    margin-top: calc(20vh - 20vw); } }
+
+img.player-image-left {
+  left: calc(50% - 35vh);
+  position: absolute;
+  display: inline-block;
+  z-index: 1;
+  height: 8.4vh;
+  margin: 2.8vh;
+  top: 0; }
+
+img.player-image-right {
+  left: calc(50% + 21vh);
+  position: absolute;
+  display: inline-block;
+  z-index: 1;
+  height: 8.4vh;
+  margin: 2.8vh;
+  top: 0; }
+
+@media screen and (max-width: 600px) {
+  img.player-image-left {
+    left: calc(50% - 52.8vw);
+    height: 12vw;
+    margin: 9vw;
+    top: calc(20vh - 20vw); }
+  img.player-image-right {
+    left: calc(50% + 22.8vw);
+    height: 12vw;
+    margin: 9vw;
+    top: calc(20vh - 20vw); } }
+
+.turn {
+  width: 20vh;
+  height: 4vh;
+  margin: 0 auto;
+  margin-top: calc(7vh - 4vh);
+  background-color: black;
+  clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); }
+
+.turn h2 {
+  font-size: 3vh; }
+
+.turn .border {
+  height: 4vh;
+  margin: 0 auto;
+  margin-top: 4vh;
+  background-color: black;
+  clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); }
+
+.turn .inner {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  background-color: #efd;
+  clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%); }
+
+div.player-label-left {
+  clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%);
+  left: calc(50% - 25.4vh);
+  width: 16vh;
+  height: 4vh;
+  font-size: 3vh;
+  text-align: center;
+  background-color: #000b;
+  color: white;
+  position: absolute;
+  top: calc(5vh); }
+
+div.player-label-right {
+  clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%);
+  left: calc(50% + 9.4vh);
+  width: 16vh;
+  height: 4vh;
+  font-size: 3vh;
+  text-align: center;
+  background-color: #000b;
+  color: white;
+  position: absolute;
+  top: calc(5vh); }
+
+@media screen and (max-width: 600px) {
+  div.player-label-left {
+    left: calc(50% - 37.2vw);
+    width: 26vw;
+    height: 6vw;
+    font-size: 5vw;
+    top: calc(20vh - 20vw + 15vw - 3vw); }
+  div.player-label-right {
+    left: calc(50% + 45vw - 33.8vw);
+    width: 26vw;
+    height: 6vw;
+    font-size: 5vw;
+    top: calc(20vh - 20vw + 15vw - 3vw); } }
+
+body {
+  background-image: url("assets/dismal.jpg");
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  background-position: center top;
+  background-attachment: fixed;
+  background-color: #efd;
+  margin: 0; }