From 0a286380138ddaf84907bec05376c43b19cea18f Mon Sep 17 00:00:00 2001
From: John Cardarelli <jcardarelli@users.noreply.github.com>
Date: Wed, 18 Sep 2024 22:22:56 -0700
Subject: [PATCH] Simplify hover on grid-items

---
 style.css     | 23 ++++++++---------------
 style.css.map |  2 +-
 style.sass    | 13 +++++--------
 3 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/style.css b/style.css
index 4d0a0d5..ce5efb1 100644
--- a/style.css
+++ b/style.css
@@ -32,32 +32,25 @@ body {
     width: 100%;
   }
 }
+
 @media (prefers-color-scheme: light) {
-  .grid-sizer, .grid-item {
+  .grid-item {
+    background: #f9f9f9;
+    border-color: #ccc;
     border: 1px dashed #ccc;
   }
 }
 @media (prefers-color-scheme: dark) {
-  .grid-sizer, .grid-item {
+  .grid-item {
+    background-color: #2e3c64;
+    border-color: #ccc;
     background-color: transparent;
     border: 1px dashed #696969;
   }
 }
-.grid-sizer:hover, .grid-item:hover {
+.grid-item:hover {
   border: 1px dashed;
 }
-@media (prefers-color-scheme: light) {
-  .grid-sizer:hover, .grid-item:hover {
-    background: #f9f9f9;
-    border-color: #ccc;
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .grid-sizer:hover, .grid-item:hover {
-    background: #24283b;
-    border-color: #ccc;
-  }
-}
 
 .grid-item--width2 {
   width: 80%;
diff --git a/style.css.map b/style.css.map
index 823e0a5..53a7196 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;AAwBA;AACA;EACE;;;AAEF;EACE,WAPe;;;AASjB;AACA;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;;;AAEF;EAVF;IAWI;;;AAEF;EAbF;IAcI;IACA;;;AAEF;EACE;;AAEA;EAHF;IAII,YAhDa;IAiDb,cA5Ce;;;AA8CjB;EAPF;IAQI;IACA,cAhDe;;;;AAkDrB;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA,aA7De;EA8Df;EACA;EACA,OAzEqB;;AA2ErB;EARF;IASI,kBA1Ee;;;;AA4EnB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;AAEA;EAJF;IAKI,YAtFmB;;;AAwFrB;EAPF;IAQI,kBAxFc;;;;AA0FlB;EACE;EACA;;;AAEF;EACE;IACE;;;AAEJ;EACE;IACE;;;AAEJ;AACA;EACE,kBAvHkB;EAwHlB,aApGe;EAqGf;EACA;;AAEA;EACE,YA5HiB;;AA8HnB;EACE,YA/HiB;EAgIjB,OA/Hc;;;AAiIlB;EACE;EACA;EACA,OAnIc;;;AAqIhB;EACE;EACA;EACA;EACA,OAlIe;;;AAoIjB;EACE;EACA;EACA,OAzIiB;;;AA2InB;EACE,kBA7Ic;;;AA+IhB;EACE,kBA9Ic;;;AAgJhB;EACE;EACA,OAvJa;EAwJb;EACA;EACA;EACA;;;AAEF;EACE,OA7JmB;;;AA+JrB;EACE,OA/JkB;;;AAiKpB;EACE,aApJe;EAqJf;EACA;;;AAGA;EADF;IAEI,kBAjKe;;;AAmKjB;EAJF;IAKI,kBAlKc;;;;AAoKlB;EACE;;;AAEF;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;AAwBA;AACA;EACE;;;AAEF;EACE,WAPe;;;AASjB;AACA;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;;;;AAGF;EADF;IAEI,YAvCe;IAwCf,cAnCiB;IAoCjB;;;AAEF;EANF;IAOI,kBAxDiB;IAyDjB,cAxCiB;IAyCjB;IACA;;;AAEF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA,aA1De;EA2Df;EACA;EACA,OAtEqB;;AAwErB;EARF;IASI,kBAvEe;;;;AAyEnB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;AAEA;EAJF;IAKI,YAnFmB;;;AAqFrB;EAPF;IAQI,kBArFc;;;;AAuFlB;EACE;EACA;;;AAEF;EACE;IACE;;;AAEJ;EACE;IACE;;;AAEJ;AACA;EACE,kBApHkB;EAqHlB,aAjGe;EAkGf;EACA;;AAEA;EACE,YAzHiB;;AA2HnB;EACE,YA5HiB;EA6HjB,OA5Hc;;;AA8HlB;EACE;EACA;EACA,OAhIc;;;AAkIhB;EACE;EACA;EACA;EACA,OA/He;;;AAiIjB;EACE;EACA;EACA,OAtIiB;;;AAwInB;EACE,kBA1Ic;;;AA4IhB;EACE,kBA3Ic;;;AA6IhB;EACE;EACA,OApJa;EAqJb;EACA;EACA;EACA;;;AAEF;EACE,OA1JmB;;;AA4JrB;EACE,OA5JkB;;;AA8JpB;EACE,aAjJe;EAkJf;EACA;;;AAGA;EADF;IAEI,kBA9Je;;;AAgKjB;EAJF;IAKI,kBA/Jc;;;;AAiKlB;EACE;;;AAEF;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/style.sass b/style.sass
index 032d549..687ff85 100644
--- a/style.sass
+++ b/style.sass
@@ -49,24 +49,21 @@ body
   @media (max-width: 520px)
     width: 100%
 
+.grid-item
   @media (prefers-color-scheme: light)
+    background: $light-background
+    border-color: $border-hover-color
     border: 1px dashed $border-color-light
 
   @media (prefers-color-scheme: dark)
+    background-color: $selection-bg-color
+    border-color: $border-hover-color
     background-color: transparent
     border: 1px dashed $border-color-dark
 
   &:hover
     border: 1px dashed
 
-    @media (prefers-color-scheme: light)
-      background: $light-background
-      border-color: $border-hover-color
-
-    @media (prefers-color-scheme: dark)
-      background: #24283b
-      border-color: $border-hover-color
-
 .grid-item--width2
   width: 80%