From 47a6fee06ef26fc6464895927118eab6c08fbc3d Mon Sep 17 00:00:00 2001
From: Duncan Stuart <dgmstuart@gmail.com>
Date: Wed, 24 Apr 2024 04:35:53 +0200
Subject: [PATCH] Better display on desktop

Set a max width of 800px, remove the side borders and add in a whole
card border instead. Max out the font-size at 20px.
---
 src/components/Cell.css    |  2 +-
 src/components/Grid.css    | 10 ++++++++++
 src/layouts/MainLayout.css |  8 ++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/Cell.css b/src/components/Cell.css
index b709522..cad171c 100644
--- a/src/components/Cell.css
+++ b/src/components/Cell.css
@@ -1,7 +1,7 @@
 .Cell {
   text-align: center;
   font-size: calc(2vw + 4px);
-  font-size: calc(1.97vw + 4px);
+  font-size: clamp(4px, calc(1.97vw + 4px), 20px);
   padding: calc(2vmin - 4px);
   border: 2px solid var(--dark);
   vertical-align: middle;
diff --git a/src/components/Grid.css b/src/components/Grid.css
index 3448728..aa0eaa0 100644
--- a/src/components/Grid.css
+++ b/src/components/Grid.css
@@ -13,6 +13,16 @@
   border-bottom: none;
 }
 
+@media (width >= 800px) {
+  .Grid td:first-child {
+    border-left: none;
+  }
+
+  .Grid td:last-child {
+    border-right: none;
+  }
+}
+
 .Row {
   height: 80px;
 }
diff --git a/src/layouts/MainLayout.css b/src/layouts/MainLayout.css
index 6727a10..20b11fe 100644
--- a/src/layouts/MainLayout.css
+++ b/src/layouts/MainLayout.css
@@ -4,6 +4,14 @@
   box-shadow: 0px 5px 23px -8px #000000;
   position: relative;
   overflow: hidden;
+  max-width: 800px;
+}
+
+@media (width > 800px) {
+  .Card {
+    padding: 0 15px 15px;
+    margin: auto;
+  }
 }
 
 .Main-header {