adjust styling for large screens

skedwards88 · May 31, 2024 · 403d304 · 403d304
1 parent a27afc1
commit 403d304
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/src/App.css b/src/App.css
@@ -104,7 +104,7 @@ button {
   overflow: scroll;
   justify-content: space-evenly;
   align-items: center;
-  font-size: calc(var(--default-font-size) * 0.8);
+  font-size: calc(var(--default-font-size) * 0.7);
 }
 
 #settings {
@@ -143,7 +143,7 @@ button {
 }
 
 select {
-  font-size: calc(var(--default-font-size) * 0.8);
+  font-size: calc(var(--default-font-size) * 0.7);
   font-family: sans-serif;
   background-color: var(--light-color);
   border: 1px solid var(--light-color);
@@ -160,8 +160,8 @@ input[type="checkbox" i] {
   text-decoration: none;
   text-align: center;
   appearance: none;
-  min-width: calc(var(--default-font-size) * 0.8);
-  min-height: calc(var(--default-font-size) * 0.8);
+  min-width: calc(var(--default-font-size) * 0.7);
+  min-height: calc(var(--default-font-size) * 0.7);
   border-radius: 2px;
   background-color: var(--light-color);
   border: 3px solid var(--light-color);
@@ -188,7 +188,7 @@ input[type="checkbox" i]:checked {
   justify-items: center;
   justify-content: space-evenly;
   align-items: center;
-  font-size: calc(var(--default-font-size) * 0.75);
+  font-size: calc(var(--default-font-size) * 0.7);
 }
 
 .infoText {
@@ -314,7 +314,7 @@ input[type="checkbox" i]:checked {
 }
 
 /* Landscape */
-@media (orientation: landscape) {
+@media (orientation: landscape) and (height < 600px) and (width < 600px) {
   #gribbles {
     grid-template:
       "stats currentWord controls" auto "foundWords board controls" 1fr / 1fr auto auto;
@@ -337,6 +337,12 @@ input[type="checkbox" i]:checked {
 
 /* Large screen */
 @media (height >= 600px) and (width >= 600px) {
+  .App {
+    width: 50vmin;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   #board {
     align-items: center;
     align-self: center;
@@ -353,10 +359,6 @@ input[type="checkbox" i]:checked {
     grid-template-rows: repeat(4, 10vmin);
   }
 
-  #controls {
-    justify-content: center;
-  }
-
   #settings,
   #setting-buttons {
     width: fit-content;