From 8e0154addcd3ad024ae3ed681115ff2bd10f8fae Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 2 May 2025 15:51:50 -0500
Subject: [PATCH] Subtle fading and overlapping grid lines

---
 app/assets/stylesheets/card-columns.css | 38 ++++++++++++++++++++++---
 app/assets/stylesheets/card-filters.css |  2 ++
 app/views/filters/_settings.html.erb    |  2 +-
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 4311f1007..9664e1abc 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -10,15 +10,35 @@
   }
 
   .card-columns {
-    border-block-start: 1px solid var(--color-ink-lighter);
     display: grid;
     grid-template-columns: repeat(2, 50%);
     margin: auto;
     max-inline-size: 1080px;
+    position: relative;
+
+    &:before {
+      background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
+      block-size: 1px;
+      content: "";
+      display: block;
+      inline-size: calc(100% + 1.2em);
+      inset: 0 -0.6em 100% -0.6em;
+      position: absolute;
+    }
 
     .cards:first-child {
-      border-inline-end: var(--border);
       padding-inline-end: var(--cards-gap);
+      position: relative;
+
+      &:after {
+        background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas));
+        block-size: calc(100% + 1.2em);
+        content: "";
+        display: block;
+        inline-size: 1px;
+        inset: -0.6em 0 -0.6em 100%;
+        position: absolute;
+      }
     }
 
     .cards:last-child {
@@ -37,7 +57,7 @@
     flex-direction: column;
     gap: var(--cards-gap);
     justify-content: start;
-    padding-block: var(--cards-gap);
+    padding-block: calc(var(--cards-gap) * 0.75);
 
     .card {
       --block-space: 1em;
@@ -121,12 +141,22 @@
   /* -------------------------------------------------------------------------- */
 
   .cards--closed {
-    border-block-start: 1px solid var(--color-ink-lighter);
     justify-content: center;
     flex-direction: row;
     flex-wrap: wrap;
     inline-size: 100%;
     margin: 0 auto;
+    position: relative;
+
+    &:before {
+      background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas));
+      block-size: 1px;
+      content: "";
+      display: block;
+      inline-size: calc(100% + 1.2em);
+      inset: 0 -0.6em 100% -0.6em;
+      position: absolute;
+    }
 
     .card {
       inline-size: calc((100% - var(--cards-gap) * 2) / 3);
diff --git a/app/assets/stylesheets/card-filters.css b/app/assets/stylesheets/card-filters.css
index b142c055a..9f3f0338c 100644
--- a/app/assets/stylesheets/card-filters.css
+++ b/app/assets/stylesheets/card-filters.css
@@ -2,8 +2,10 @@
   .card-filter--collection {
     > button {
       --hover-size: 0;
+      --input-padding: 0.25em 1em 0.25em 0.8em;
 
       inline-size: auto;
+      background-position: center right 0.3em;
     }
   }
 
diff --git a/app/views/filters/_settings.html.erb b/app/views/filters/_settings.html.erb
index 591c7c47d..76dd3f1f8 100644
--- a/app/views/filters/_settings.html.erb
+++ b/app/views/filters/_settings.html.erb
@@ -1,4 +1,4 @@
-<div class="filters flex align-center gap-half margin-block-end-half margin-none-block-start justify-center center">
+<div class="filters flex align-center gap-half margin-none-block justify-center center">
   <div class="flex-inline center align-center gap-half">
     <%= render "filters/tags", filter: filter %>
     <%= render "filters/assignees", filter: filter %>