Fix: ensure board cells stay square so circles don't become ovals
This commit is contained in:
@@ -91,14 +91,14 @@ html, body {
|
|||||||
/* Board - fits within shell */
|
/* Board - fits within shell */
|
||||||
.board {
|
.board {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: auto;
|
||||||
height: 100%;
|
height: auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
aspect-ratio: var(--board-columns) / var(--board-rows);
|
aspect-ratio: var(--board-columns) / var(--board-rows);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(var(--board-columns), 1fr);
|
grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr));
|
||||||
grid-template-rows: repeat(var(--board-rows), 1fr);
|
grid-template-rows: repeat(var(--board-rows), minmax(0, 1fr));
|
||||||
gap: clamp(2px, 0.3cqmin, 4px);
|
gap: clamp(2px, 0.3cqmin, 4px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
@@ -174,6 +174,7 @@ html, body {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell__shade {
|
.cell__shade {
|
||||||
|
|||||||
Reference in New Issue
Block a user