From 0cd261595918129a8f0f6ef0f1cbd31596086f27 Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Mon, 28 Dec 2020 17:41:48 -0500
Subject: [PATCH] Work nicely in landscape or portrait mode

---
 src/index.css | 16 ++++++++++++++--
 src/index.js  |  2 +-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/index.css b/src/index.css
index e27d64d..0e704d7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,6 +17,20 @@ ol, ul {
   margin-bottom: 10px;
 }
 
+@media (orientation:landscape) {
+  .square {
+    height: 11vh;
+    width: 11vh;
+  }
+}
+
+@media (orientation:portrait) {
+  .square {
+    height: 11vw;
+    width: 11vw;
+  }
+}
+
 .square {
   background: #fff;
   border: 1px solid #999;
@@ -24,12 +38,10 @@ ol, ul {
   font-size: 24px;
   font-weight: bold;
   line-height: 30px;
-  height: 11vw;
   margin-right: -1px;
   margin-top: -1px;
   padding: 0;
   text-align: center;
-  width: 11vw;
 }
 
 .square:hover {
diff --git a/src/index.js b/src/index.js
index 6a07f86..08a5fa5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -69,7 +69,7 @@ function isKing(piece) {
 function Square(props) {
   let bg = {
       backgroundImage: `url(${Images[props.value]})`,
-      backgroundSize: `11vw`,
+      backgroundSize: `100%`,
       backgroundColor: props.bg,
   };
   if (props.value != null) {