sepia
/
gomoku
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix styling on small screens

This commit is contained in:
sepia 2025-07-23 20:53:27 -05:00
parent b8e880cd29
commit d70bb80c39
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/style.css
View File

@ -104,8 +104,8 @@ body {
#game-board { #game-board {
position: relative; position: relative;
width: calc(14 * 30px); width: 82svw;
height: calc(14 * 30px); height: 82svw;
background-color: var(--color-bg-tertiary); background-color: var(--color-bg-tertiary);
border: 2px solid var(--color-neutral-700); border: 2px solid var(--color-neutral-700);
} }
@ -120,17 +120,17 @@ body {
background-image: background-image:
linear-gradient(to right, var(--color-neutral-400) 1px, transparent 1px), linear-gradient(to right, var(--color-neutral-400) 1px, transparent 1px),
linear-gradient(to bottom, var(--color-neutral-400) 1px, transparent 1px); linear-gradient(to bottom, var(--color-neutral-400) 1px, transparent 1px);
background-size: 30px 30px; background-size: 7.142857142857142% 7.142857142857142%;
background-position: -1px -1px; background-position: -1px -1px;
pointer-events: none; pointer-events: none;
} }
.intersection { .intersection {
position: absolute; position: absolute;
width: 30px; width: 6.6666666666%;
height: 30px; height: 6.6666666666%;
margin-left: -15px; margin-left: -3.3333333333%;
margin-top: -15px; margin-top: -3.3333333333%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

6
src/view/board-renderer.ts
View File

@ -17,8 +17,8 @@ export function renderGameBoardHtml(
} }
// Calculate top and left for absolute positioning, offset by half the intersection div size // Calculate top and left for absolute positioning, offset by half the intersection div size
const top = row * 30; const top = row * 7.142857142857142;
const left = col * 30; const left = col * 7.142857142857142;
// HTMX attributes for making a move // HTMX attributes for making a move
const wsAttrs = isPlayerToPlay && !stone ? `ws-send="click"` : ''; const wsAttrs = isPlayerToPlay && !stone ? `ws-send="click"` : '';
@ -29,7 +29,7 @@ export function renderGameBoardHtml(
class="intersection" class="intersection"
data-row="${row}" data-row="${row}"
data-col="${col}" data-col="${col}"
style="top: ${top}px; left: ${left}px;" style="top: ${top}%; left: ${left}%;"
${wsAttrs} ${wsAttrs}
> >
${stoneHtml} ${stoneHtml}