From cd9970d47c43bbc0d9feb2e3f9393cb0d7a95df9 Mon Sep 17 00:00:00 2001
From: taylor berukoff <taylor.berukoff@proton.me>
Date: Tue, 11 Nov 2025 21:50:24 -1000
Subject: [PATCH] update styling. Remove black and white pattern from cells.

---
 static/css/style.css | 28 +++++++++++++++++++++-------
 static/js/script.js  | 12 ++++++------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 708733a..5baf26c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -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 {
diff --git a/static/js/script.js b/static/js/script.js
index a6adf37..619fd4c 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -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)