From 3525c8178bd47f66b479b390a21b86a2167cd7f7 Mon Sep 17 00:00:00 2001
From: Hoffee Toffee <tb59391@gmail.com>
Date: Sun, 8 Dec 2024 17:10:35 +1300
Subject: [PATCH] Fixed home page entry backgrounds when small

---
 client/styles/home.scss    | 21 ++++++++++++++-------
 client/styles/project.scss | 10 +++-------
 package.json               |  2 +-
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/client/styles/home.scss b/client/styles/home.scss
index a7f5bf5..b762c9f 100644
--- a/client/styles/home.scss
+++ b/client/styles/home.scss
@@ -147,28 +147,34 @@
   }
 
   main > div:nth-of-type(1) .bg { // Blue
-    background: rgba(0, 191, 255, var(--bg-alpha));
+    --custom-col: rgba(0, 191, 255, var(--bg-alpha));
+    background: var(--custom-col);
   }
 
   main > div:nth-of-type(2) .bg { // Purple
-    background: rgba(159, 0, 191, var(--bg-alpha));
+    --custom-col: rgba(159, 0, 191, var(--bg-alpha));
+    background: var(--custom-col);
   }
 
   main > div:nth-of-type(3) .bg { // Red
-    background: rgba(191, 0, 45, var(--bg-alpha));
+    --custom-col: rgba(191, 0, 45, var(--bg-alpha));
+    background: var(--custom-col);
   }
 
   main > div:nth-of-type(4) .bg { // Orange
-    background: rgba(191, 134, 0, var(--bg-alpha));
+    --custom-col: rgba(191, 134, 0, var(--bg-alpha));
+    background: var(--custom-col);
   }
 
   main > div:nth-of-type(5) .bg { // Green
-    background: rgba(70, 191, 0, var(--bg-alpha));
+    --custom-col: rgba(70, 191, 0, var(--bg-alpha));
+    background: var(--custom-col);
   }
 
   main > div:nth-of-type(6) { // Teal
     .bg {
-      background: rgba(0, 191, 108, var(--bg-alpha));
+      --custom-col: rgba(0, 191, 108, var(--bg-alpha));
+      background: var(--custom-col);
     }
     
     ~ div {
@@ -188,7 +194,8 @@
   }
 
   main > div:nth-of-type(8) { // Blue
-    background: linear-gradient(to left, transparent 0%, rgba(0, 191, 255, calc(var(--bg-alpha) / 2)) 0%) var(--dark-bg-col);
+    --custom-col: rgba(0, 191, 255, calc(var(--bg-alpha) / 2));
+    background: linear-gradient(var(--custom-col), var(--custom-col)), var(--dark-bg-col);
   }
 
   .bg {
diff --git a/client/styles/project.scss b/client/styles/project.scss
index a343726..f9ab1ab 100644
--- a/client/styles/project.scss
+++ b/client/styles/project.scss
@@ -863,7 +863,6 @@
     }
 
     .episode-marker {
-      // display: inline-grid;
       background: linear-gradient(var(--bg-col), var(--bg-col));
       border-color: transparent;
       outline: none;
@@ -891,14 +890,11 @@
       margin-top: -15px;
     }
   }
+  @media screen and (max-width: 500px) {
 
   #home div .episode-marker {
-    background: linear-gradient(var(--bg-col), var(--bg-col));
-  }
-
-  #home div:nth-of-type(2n) div .episode-marker {
-    background: linear-gradient(var(--bg-col), var(--bg-col));
-  }
+    background: linear-gradient(var(--custom-col), var(--custom-col)), linear-gradient(var(--dark-bg-col), var(--dark-bg-col));
+  }}
 }
 
 .loading,
diff --git a/package.json b/package.json
index 96472e0..45c7dbd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "series-mingle",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "server/index.js",
   "license": "MIT",
   "keywords": [