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.
dgmstuart · Apr 24, 2024 · 47a6fee · 47a6fee
1 parent 03b92fa
commit 47a6fee
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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 {