Tweaked styles

ProLoser · May 16, 2024 · 402ce3d · 402ce3d
1 parent 06e33a9
commit 402ce3d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git 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
@@ -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%;
+        }
+    }
 }