tsb95
/
console_puzzle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update styling. Remove black and white pattern from cells.

This commit is contained in:
taylor berukoff 2025-11-11 21:50:24 -10:00
parent 5d0d3d3d8f
commit cd9970d47c
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/style.css
View File

@ -5,11 +5,15 @@
} }
body { body {
display: flex; background: #141E30; /* fallback for old browsers */
justify-content: center; /* horizontal centering */ background: -webkit-linear-gradient(to right, black, #141E30); /* Chrome 10-25, Safari 5.1-6 */
align-items: center; /* vertical centering */ background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
height: 100vh; /* make body full height */
margin: 0; /* remove default margin */ display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh; /* make body full height */
margin: 0; /* remove default margin */
} }
#board { #board {
@ -17,10 +21,17 @@ body {
display: grid; display: grid;
grid-template-columns: repeat(5, var(--cell-size)); grid-template-columns: repeat(5, var(--cell-size));
grid-template-rows: repeat(5, var(--cell-size)); grid-template-rows: repeat(5, var(--cell-size));
gap: 0; /* we'll use borders instead */
background: #ad5389; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #3c1053, #ad5389); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border: .5px solid #bebcbc76; /* subtle outer border */
} }
.token { .token {
background-color: orange; background-color: #17A398;
width: 60%; width: 60%;
height: 60%; height: 60%;
border-radius: 50%; border-radius: 50%;
@ -30,13 +41,16 @@ body {
} }
#player-token { #player-token {
background-color: darkkhaki; background-color: #EE6C4D;
cursor: grab; cursor: grab;
} }
.cell { .cell {
width: var(--cell-size); width: var(--cell-size);
height: var(--cell-size); height: var(--cell-size);
border: .25px solid rgba(222, 219, 219, 0.281); /* light subtle grid lines */
box-sizing: border-box; /* ensures borders don't expand cells */
} }
.dark { .dark {

12
static/js/script.js
View File

@ -15,12 +15,12 @@ document.addEventListener('DOMContentLoaded', () => {
cell.id = `cell-${i}-${j}` cell.id = `cell-${i}-${j}`
cell.dataset.piece = "" cell.dataset.piece = ""
cell.classList.add('cell') cell.classList.add('cell')
if ((i + j) % 2 == 0) { // if ((i + j) % 2 == 0) {
cell.classList.add('dark') // cell.classList.add('dark')
} // }
else { // else {
cell.classList.add('light') // cell.classList.add('light')
} // }
const board = document.getElementById('board') const board = document.getElementById('board')
board.appendChild(cell) board.appendChild(cell)