inga-lovinde
/
sample-tictactoe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

basic responsive design for small screens

Browse Source
main
Inga 🏳‍🌈 2 weeks ago
parent 7880c693c5
commit 6ec1a46aca
2 changed files with 14 additions and 2 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      src/backend/main/index.tsx
  2. 15
      src/frontend/static/style.css

1
src/backend/main/index.tsx
Unescape View File

@ -22,6 +22,7 @@ export const mainPageHandler: RequestHandler = (req, res) => {
res, res,
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
{/* {/*
We need to use ".js" here instead of ".ts" (and "incorrect" path) 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, because we're loading the compiled file on frontend, from path relative to the root page,

15
src/frontend/static/style.css
Unescape View File

@ -9,6 +9,17 @@ body {
grid-column-gap: 5vmin; 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 { section.counters {
grid-area: counters; grid-area: counters;
} }
@ -58,8 +69,8 @@ table.game-board-table tbody.game-board td {
tbody.game-board button, tbody.game-board button,
tbody.game-board button:disabled, tbody.game-board button:disabled,
tbody.game-board button:hover { tbody.game-board button:hover {
width: 4em; width: min(4em, 15vmin);
height: 4em; height: min(4em, 15vmin);
border: none; border: none;
background-color: transparent; background-color: transparent;
color: transparent; color: transparent;

Write Preview
Loading…
Cancel
Save