diff --git a/src/App.css b/src/App.css index 159c564..f4b0124 100644 --- 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;