Fixed home page entry backgrounds when small

Hoffee-Toffee · Dec 8, 2024 · 3525c81 · 3525c81
1 parent f956578
commit 3525c81
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git 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
@@ -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
@@ -1,7 +1,7 @@
 {
   "name": "series-mingle",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "server/index.js",
   "license": "MIT",
   "keywords": [