From c0dc3f44eb84f4a44dc9d1714cea278bcb97090c Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Sat, 12 May 2018 18:35:03 -0400
Subject: [PATCH] Improve layout

---
 assets/css/_game_grid.scss | 20 ++++++++++++++++++--
 assets/css/_variables.scss |  9 +++++++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/assets/css/_game_grid.scss b/assets/css/_game_grid.scss
index 03fc68b..13e65ef 100644
--- a/assets/css/_game_grid.scss
+++ b/assets/css/_game_grid.scss
@@ -3,7 +3,7 @@
   grid-gap: $base-spacing;
 }
 
-@media (min-aspect-ratio: 10/11) {
+@media (min-aspect-ratio: 9/11) {
   .game-grid {
     grid-template-areas:
       "board game-info"
@@ -11,9 +11,13 @@
     grid-template-columns: min-content 1fr;
     grid-template-rows: min-content 1fr;
   }
+
+  .container {
+    max-width: 120vmin;
+  }
 }
 
-@media (max-aspect-ratio: 10/11) {
+@media (max-aspect-ratio: 9/11) {
   .game-grid {
     grid-template-areas:
       "game-info"
@@ -22,3 +26,15 @@
     grid-template-rows: min-content min-content min-content;
   }
 }
+
+@media (max-height: 960px), (max-width: 768px) {
+  html {
+    font-size: 0.9em;
+  }
+}
+
+@media (max-height: 480px), (max-width: 400px) {
+  html {
+    font-size: 0.8em;
+  }
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index f23c8a2..c368f28 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -30,12 +30,17 @@ $colours: "black" "white";
 $pieces: king queen bishop knight rook pawn;
 
 :root {
-  --board-size: 90vmin;
+  --board-size: 64vw;
 }
 
-@media (min-aspect-ratio: 10/11) {
+@media (min-aspect-ratio: 14/11) {
   :root {
     --board-size: 80vmin;
   }
 }
 
+@media (max-aspect-ratio: 9/11) {
+  :root {
+    --board-size: 90vmin;
+  }
+}