diff --git a/src/backend/main/index.tsx b/src/backend/main/index.tsx index ad81592..273f241 100644 --- a/src/backend/main/index.tsx +++ b/src/backend/main/index.tsx @@ -22,6 +22,7 @@ export const mainPageHandler: RequestHandler = (req, res) => { res, + {/* 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, diff --git a/src/frontend/static/style.css b/src/frontend/static/style.css index 6fb56e2..e7fa0a3 100644 --- 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;