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;
   }

src/ui/components/Boards.css

@@ -5,10 +5,10 @@
 }
 
 .boards__ico {
-  border: solid 5px black;
-  margin: 5px;
+  border: solid 0.5rem black;
+  margin: 0.5rem;
   cursor: pointer;
-  width: 72px;
+  width: 7.2rem;
 }
 
 .boards__ico--active {

src/ui/components/Controls.css

@@ -1,23 +1,23 @@
 .controls-box {
   grid-area: controls;
-  padding: 0 20px 20px 20px;
+  padding: 0 2rem 2rem 2rem;
 }
 
 .controls {
   background: var(--color-bg-block);
-  padding: 20px;
+  padding: 2rem;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
 .controls__button {
   margin: 0 3px;
-  padding: 5px;
+  padding: 0.5rem;
   font-size: 3rem;
   text-align: center;
   border-radius: 5px;
-  width: 44px;
-  height: 44px;
+  width: 4.4rem;
+  height: 4.4rem;
 }
 
 .controls__button:hover {

src/ui/components/GameTabs.css

@@ -1,12 +1,12 @@
 .game-box {
   grid-area: moves;
-  padding: 20px;
+  padding: 2rem;
   padding-top: var(--header-margin);
-  min-width: 375px;
+  min-width: 37.5rem;
   height: 100vh;
 }
 
-@media screen and (max-width: 1024px) {
+@media (orientation: portrait) {
   .game-box {
     padding: 0;
     height: 800px;
@@ -16,7 +16,7 @@
 .game {
   height: 100%;
   display: grid;
-  grid-template-rows: 38px 195px 1fr 84px;
+  grid-template-rows: 3.8rem 19.5rem 1fr 8.4rem;
 }
 
 .game-tabs {

src/ui/components/Header.css

@@ -10,7 +10,7 @@
 }
 
 .header__logo {
-  padding: 10px 20px;
+  padding: 1rem 2rem;
   text-align: left;
   color: var(--color-text-dimmed);
 }
@@ -24,7 +24,7 @@
 }
 
 .header__options {
-  padding: 0px 20px;
+  padding: 0 2rem;
   text-align: right;
 }
 

src/ui/components/Info.css

@@ -1,11 +1,11 @@
 .info-box {
   grid-area: controls;
-  padding: 0 20px 20px 20px;
+  padding: 0 2rem 2rem 2rem;
 }
 
 .info {
   background: var(--color-bg-block);
-  padding: 30px 20px;
+  padding: 3rem 2rem;
   font-size: 1.4rem;
   text-align: left;
 }

src/ui/components/Load.css

@@ -1,13 +1,13 @@
 .load {
   background: var(--color-bg-block);
-  padding: 20px;
+  padding: 2rem;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
 .load__pgn-input {
   height: 30vh;
-  margin-top: 20px;
+  margin-top: 2rem;
 }
 
 .load__pgn-input::-webkit-scrollbar {
@@ -30,7 +30,7 @@
 }
 
 .load__pgn-file {
-  margin-top: 20px;
+  margin-top: 2rem;
 }
 
 .load__pgn-file-info {
@@ -38,10 +38,10 @@
 }
 
 .load__pgn-file-info p {
-  margin-top: 10px;
+  margin-top: 1rem;
   color: var(--color-text-dimmed);
 }
 
 .load__link-input {
-  margin-top: 20px;
+  margin-top: 2rem;
 }

src/ui/components/Moves.css

@@ -15,15 +15,15 @@
 
 .move__id {
   display: inline-block;
-  width: 40px;
+  width: 4rem;
   text-align: right;
-  margin-right: 20px;
+  margin-right: 2rem;
   color: var(--color-text);
 }
 
 .move__ply {
   display: inline-block;
-  width: 70px;
+  width: 7rem;
   color: var(--color-btn);
 }
 
@@ -37,7 +37,7 @@
   cursor: pointer;
 }
 
-@media screen and (max-width: 1024px) {
+@media (orientation: portrait) {
   .moves {
     text-align: left;
   }

src/ui/components/Pieces.css

@@ -8,7 +8,7 @@
   border: solid 5px black;
   margin: 5px;
   cursor: pointer;
-  width: 82px;
+  width: 8.2rem;
   background-color: var(--color-highlight);
 }
 

src/ui/components/SetupTabs.css

@@ -1,16 +1,16 @@
 .setup-box {
   height: 100vh;
   grid-area: setup;
-  padding: 20px;
+  padding: 2rem;
   padding-top: var(--header-margin);
-  min-width: 375px;
+  min-width: 37.5rem;
 }
 
 .setup {
   font-size: 1.6rem;
   height: 100%;
   display: grid;
-  grid-template-rows: 38px 1fr;
+  grid-template-rows: 3.8rem 1fr;
 }
 
 .setup-tabs {

src/ui/components/Share.css

@@ -5,9 +5,9 @@
 
 .share__format,
 .share__size {
-  padding: 10px;
+  padding: 1rem;
   border-radius: 0;
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
   opacity: 0.5;
 }
 
@@ -42,22 +42,22 @@
 }
 
 .share__btn {
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
 }
 
 .header--first {
   margin-top: 0;
-  margin-bottom: 25px;
+  margin-bottom: 2.5rem;
 }
 
 .options__button {
   margin: 3px;
-  padding: 5px;
+  padding: 0.5rem;
   font-size: 3rem;
   text-align: center;
   border-radius: 5px;
-  width: 44px;
-  height: 44px;
+  width: 4.4rem;
+  height: 4.4rem;
   opacity: 0.5;
 }
 

src/ui/components/reusable/Scrollable.css

@@ -1,7 +1,7 @@
 .scrollable {
   background: var(--color-bg-block);
   height: auto;
-  padding: 20px 10px 20px 20px;
+  padding: 2rem 1rem 2rem 2rem;
   height: 100%;
   display: flex;
   overflow: auto;
@@ -11,7 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0;
-  padding-right: 10px;
+  padding-right: 1rem;
   width: 100%;
 }
 

src/ui/components/reusable/Tab.css

@@ -1,7 +1,7 @@
 .tab {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  height: 38px;
+  height: 3.8rem;
   background: var(--color-tab);
   min-width: 4rem;
 }