WIP

src/ui/App.css

@@ -51,6 +51,7 @@ body {
 .light {
   background-color: #959ea1;
   background-image: url(/img/pattern-light.png);
+  background-size: 12rem;
   color: rgb(29, 31, 32);
   --logo-url: url(/img/logo-dark.svg);
 
@@ -158,7 +159,7 @@ a:hover {
 .double {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  column-gap: 10px;
+  column-gap: 1rem;
 }
 
 .layout {
@@ -168,12 +169,37 @@ a:hover {
 
   grid-template-areas:
     "setup board moves"
-    "setup board controls";
+    "setup board moves";
 
   height: 100vh;
 }
 
-@media screen and (max-width: 1024px) {
+@media (orientation: landscape) and (max-width: 1536px) {
+  html {
+    font-size: 9px;
+  }
+}
+
+@media (orientation: landscape) and (max-width: 1366px) {
+  html {
+    font-size: 8px;
+  }
+}
+
+@media (orientation: landscape) and (max-width: 1365px) {
+  .layout {
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      "board moves"
+      "board moves";
+  }
+}
+
+@media (orientation: portrait) {
+  html {
+    font-size: 10px;
+  }
+
   .layout {
     grid-template-columns: 1fr;
     grid-template-areas:
@@ -188,6 +214,7 @@ a:hover {
 
   .board-box {
     height: auto;
+    max-height: 100vh;
     padding: var(--header-height) 0 1rem 0;
     font-size: 0;
   }