basic responsive design for small screens

2 weeks ago · 6ec1a46aca
parent 7880c693c5
commit 6ec1a46aca
2 changed files with 14 additions and 2 deletions
--- a/src/backend/main/index.tsx
+++ b/src/backend/main/index.tsx
@ -22,6 +22,7 @@ export const mainPageHandler: RequestHandler = (req, res) => {
    res,
    <html>
      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {/*
          We need to use ".js" here instead of ".ts" (and "incorrect" path)
          because we're loading the compiled file on frontend, from path relative to the root page,
--- a/src/frontend/static/style.css
+++ b/src/frontend/static/style.css
@ -9,6 +9,17 @@ body {
  grid-column-gap: 5vmin;
 }

+@media (width < 50em) {
+  body {
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content min-content min-content;
+    grid-template-areas:
+      "counters"
+      "game1"
+      "game2";
+  }
+}
+
 section.counters {
  grid-area: counters;
 }
@ -58,8 +69,8 @@ table.game-board-table tbody.game-board td {
 tbody.game-board button,
 tbody.game-board button:disabled,
 tbody.game-board button:hover {
-  width: 4em;
-  height: 4em;
+  width: min(4em, 15vmin);
+  height: min(4em, 15vmin);
  border: none;
  background-color: transparent;
  color: transparent;