From e5f25b8d39fb28e383165fb398eb94fce75cd955 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 20 May 2025 15:43:24 -0500
Subject: [PATCH] Introduce a list style for all but the first six completed
 cards

---
 app/assets/stylesheets/card-columns.css       | 44 +++++++++++++++++++
 .../cards/display/common/_background.html.erb |  2 +-
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 0fe0d6a0e..6a84f60ec 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -167,6 +167,50 @@
       @media (max-width: 960px) {
         inline-size: calc((100% - var(--cards-gap)) / 2);
       }
+
+      &:nth-of-type(7) {
+        margin-block-start: var(--cards-gap);
+      }
+
+      &:nth-of-type(n+7) {
+        background-color: var(--color-canvas);
+        border: none;
+        border-block-end: 1px solid var(--color-ink-lighter);
+        box-shadow: none;
+        inline-size: 100%;
+        margin-inline: auto;
+        max-inline-size: 110ch;
+        padding-block: 0 var(--cards-gap);
+
+        .card__background,
+        .card__meta {
+          display: none;
+        }
+
+        .card__body {
+          padding-block-end: 0;
+        }
+
+        .card__closed {
+          aspect-ratio: unset;
+          border-width: 0.5ch;
+          inset: auto 0 auto auto;
+          transform: none;
+        }
+
+        .card__closed-by-line,
+        .card__closed-date {
+          display: none;
+        }
+
+        .card__header {
+          margin: 0;
+        }
+
+        .card__title {
+          min-block-size: 0;
+        }
+      }
     }
   }
 }
diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb
index f9ba58886..ac78ffa0b 100644
--- a/app/views/cards/display/common/_background.html.erb
+++ b/app/views/cards/display/common/_background.html.erb
@@ -6,6 +6,6 @@
   <div class="card__closed">
     <span class="card__closed-title" data-text="<%= card.closure.reason %>"><%= card.closure.reason %></span>
     <strong class="card__closed-date"><%= card.closed_at.strftime("%b %d, %Y") %></strong>
-    <span>by <span class="card__closed-by"><%= card.closed_by.familiar_name %></span></span>
+    <span class="card__closed-by-line">by <span class="card__closed-by"><%= card.closed_by.familiar_name %></span></span>
   </div>
 <% end %>