From 5ad23c12d718e5b4b6f9076ef2d29de5addd40fc Mon Sep 17 00:00:00 2001
From: Kjetil Orbekk <kj@orbekk.com>
Date: Thu, 8 Sep 2022 06:47:37 -0400
Subject: Improve layout

---
 webapp/src/default.css | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/webapp/src/default.css b/webapp/src/default.css
index 2bfc862..be10692 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -15,37 +15,41 @@ body {
     grid-template-areas: ".    north  ."
                          "west center east"
                          ".    south  .";
-    grid-template-rows: 80px 1fr 80px;
-    grid-template-columns: 80px 1fr 80px;
-    width: 100%;
-    height: 100%;
+    grid-template-rows: 100px 1fr 100px;
+    grid-template-columns: 100px 1fr 100px;
+    width: 100vw;
+    height: 100vh;
 }
 
 .west {
     grid-area: west;
-    transform: rotate(90deg);
+    /* transform: rotate(90deg); */
+    flex-direction: column;
 }
 .north {
     grid-area: north;
-    transform: rotate(180deg);
+    /* transform: rotate(180deg); */
+    flex-direction: row;
 }
 .east {
     grid-area: east;
-    transform: rotate(270deg);
+    /* transform: rotate(270deg); */
+    flex-direction: column;
 }
 .south {
     grid-area: south;
+    flex-direction: row;
 }
 .center {
     grid-area: center;
     display: grid;
     justify-content: center;
+    align-content: center;
 }
 
 .hand {
-    display: grid;
+    display: flex;
     justify-content: center;
-    grid-auto-flow: column;
 }
 
 .hand .card {
@@ -57,13 +61,13 @@ body {
 }
 
 .card {
-    min-width: 30px;
+    min-width: 50px;
     min-height: 50px;
     border-radius: 5px;
     border: 2px solid #444;
     transition: 0.1s;
     font-family: Arial, sans-serif;
-    font-size: 25px;
+    font-size: 3.5vw;
     padding: 4px;
     background-color: #fcfcf0;
     color: #000;
-- 
cgit v1.2.3