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 {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh; /* make body full height */
margin: 0; /* remove default margin */
background: #141E30; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, black, #141E30); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, black, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh; /* make body full height */
margin: 0; /* remove default margin */
}
#board {
@ -17,10 +21,17 @@ body {
display: grid;
grid-template-columns: 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 {
background-color: orange;
background-color: #17A398;
width: 60%;
height: 60%;
border-radius: 50%;
@ -30,13 +41,16 @@ body {
}
#player-token {
background-color: darkkhaki;
background-color: #EE6C4D;
cursor: grab;
}
.cell {
width: 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 {

12
static/js/script.js
View File

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