From c738c261c09d44cc60cc96a6384512aef3512ea8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Oct 2021 11:24:03 -0500
Subject: [PATCH] Placeholder: use a better gradient fade on mobile

---
 app/styles/placeholder.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss
index d3a8eb49c..3b5a3a4aa 100644
--- a/app/styles/placeholder.scss
+++ b/app/styles/placeholder.scss
@@ -74,9 +74,11 @@
       width: 100%;
       height: 100%;
       z-index: 1;
+      // On mobile, extend the gradient up to the ThumbNavigation height
       background-image: linear-gradient(
         0deg,
         var(--background-color) 0%,
+        var(--background-color) var(--thumb-navigation-height),
         hsla(var(--foreground-color_hsl), 0) 50%,
         hsla(var(--foreground-color_hsl), 0) 100%
       );
@@ -84,6 +86,16 @@
       left: 0;
       right: 0;
       bottom: 0;
+
+      @media (min-width: 895px) {
+        // On desktop, fade into the bottom of the page
+        background-image: linear-gradient(
+          0deg,
+          var(--background-color) 0%,
+          hsla(var(--foreground-color_hsl), 0) 50%,
+          hsla(var(--foreground-color_hsl), 0) 100%
+        );
+      }
     }
   }
 }