From 402ce3d1be86ec1703483773b4e567f6a33e5137 Mon Sep 17 00:00:00 2001
From: Dean Sofer <Dean.Sofer@sony.com>
Date: Thu, 16 May 2024 16:11:19 +0300
Subject: [PATCH] Tweaked styles

---
 src/Game/Game.css  | 21 ++++++++++-----------
 src/Game/Piece.css | 11 +++++++++++
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/Game/Game.css b/src/Game/Game.css
index e21c188..eb9ad58 100644
--- a/src/Game/Game.css
+++ b/src/Game/Game.css
@@ -9,6 +9,15 @@
 .bar {
     background: lightblue;
     flex-basis: 4%;
+    display: flex;
+    /* landscape layout (tablet / computer) */
+    @media (min-aspect-ratio: 1) {
+        flex-direction: column;
+    }
+    /* portrait layout (mobile) */
+    @media (max-aspect-ratio: 1) {
+        flex-direction: row;
+    }
 }
 
 .home {
@@ -34,37 +43,27 @@
 
 :nth-child(1 of .bar) {
     order: 3;
-    display: flex;
-    flex-direction: column;
     justify-content: flex-end;
-    @media (max-aspect-ratio: 1) {
-        flex-direction: row;
-    }
 }
 :nth-child(2 of .bar) {
     order: 7;
 }
-
 :nth-child(1 of .home) {
     order: 5;
 }
-
 :nth-child(2 of .home) {
     order: 9;
+    justify-content: flex-end;
 }
-
 :nth-child(-n+12 of .point) {
     order: 4;
 }
-
 :nth-child(-n+6 of .point) {
     order: 2;
 }
-
 :nth-child(n+13 of .point) {
     order: 6;
 }
-
 :nth-child(n+19 of .point) {
     order: 8;
 }
diff --git a/src/Game/Piece.css b/src/Game/Piece.css
index fb2f848..9d6282f 100644
--- a/src/Game/Piece.css
+++ b/src/Game/Piece.css
@@ -16,4 +16,15 @@
         width: 100%;
         height: 100%;
     }
+    .bar & {
+        /* Portrait layout (mobile) */
+        @media (max-aspect-ratio: 1) {
+            height: 100%;
+        }
+    
+        /* Landscape layout (laptop / tablet ) */
+        @media (min-aspect-ratio: 1) {
+            width: 100%;
+        }
+    }
 }
\ No newline at end of file