From a266b0586bccaf5e71ae58f4a48b31833e0b2ec0 Mon Sep 17 00:00:00 2001
From: cjgammon <cj.gammon@gmail.com>
Date: Sun, 1 Sep 2024 19:10:15 -0500
Subject: [PATCH] update colors

---
 style.css | 99 +++++++++----------------------------------------------
 1 file changed, 15 insertions(+), 84 deletions(-)

diff --git a/style.css b/style.css
index a0357dc..39af849 100644
--- a/style.css
+++ b/style.css
@@ -11,11 +11,12 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --primary-color: #646cff;
 }
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--primary-color);
   text-decoration: inherit;
 }
 a:hover {
@@ -50,27 +51,6 @@ h1 {
   align-items: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #f7df1eaa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
 button {
   border-radius: 8px;
   border: 1px solid transparent;
@@ -83,30 +63,19 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: var(--primary-color);
 }
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
 /* Add these new styles for the game grid */
 #game-grid-container {
-  padding: 5px;
-  border-radius: 4px;
+  padding: 10px;
+  border-radius: 10px;
+  background: linear-gradient(to bottom, #1a1a1a, #000000);
+  border: 2px solid #2a2a2a;
 }
 
 #game-grid {
@@ -125,28 +94,12 @@ button:focus-visible {
   font-size: 24px;
   cursor: pointer;
   border-radius: 4px;
-  transition: background-color 0.3s;
+  outline: 2px solid transparent;
+  transition: background-color 0.3s, outline 0.2s;
   /* Add this line to ensure the cell can receive dropped items */
   min-height: 40px;
 }
 
-.grid-cell:hover {
-  background-color: #2a2a2a;
-}
-
-/* Add this media query at the end of the file */
-@media (prefers-color-scheme: light) {
-  /* ... existing light mode styles ... */
-
-  .grid-cell {
-    background-color: #f0f0f0;
-  }
-
-  .grid-cell:hover {
-    background-color: #d0d0d0;
-  }
-}
-
 /* Add styles for the Tetris piece bank */
 #game-container {
   display: flex;
@@ -163,7 +116,7 @@ button:focus-visible {
 }
 
 .tetris-piece {
-  border: 2px solid #646cff;
+  border: 2px solid var(--primary-color);
   border-radius: 4px;
   cursor: grab;
   padding: 5px;
@@ -211,25 +164,16 @@ button:focus-visible {
   background-color: transparent;
 }
 
-/* Update this media query */
-@media (prefers-color-scheme: light) {
-  /* ... existing light mode styles ... */
-
-  .tetris-piece {
-    border-color: #535bf2;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-}
-
 /* Add styles for the hover preview */
 .grid-cell.preview {
-  outline: 2px solid #00f;
+  outline: 2px solid var(--primary-color);
+  background-color: rgba(255, 255, 255, 0.1);
   z-index: 1;
   position: relative;
 }
 
 .tetris-piece.selected {
-  box-shadow: 0 0 10px #646cff;
+  box-shadow: 0 0 10px var(--primary-color);
 }
 
 /* Add styles for the score display */
@@ -244,7 +188,7 @@ button:focus-visible {
   margin-top: 20px;
   padding: 10px 20px;
   font-size: 16px;
-  background-color: #646cff;
+  background-color: var(--primary-color);
   color: white;
   border: none;
   border-radius: 5px;
@@ -253,18 +197,5 @@ button:focus-visible {
 }
 
 #reset-button:hover {
-  background-color: #535bf2;
-}
-
-/* Update this media query */
-@media (prefers-color-scheme: light) {
-  /* ... existing light mode styles ... */
-
-  #reset-button {
-    background-color: #535bf2;
-  }
-
-  #reset-button:hover {
-    background-color: #4449d0;
-  }
+  background-color: color-mix(in srgb, var(--primary-color) 80%, white);
 }