From 9ae0458e5f3f5ff9f3c585dccb269b8421f42cd1 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 7 May 2025 10:24:12 -0500
Subject: [PATCH 1/4] Text stroke outlines

---
 app/assets/stylesheets/cards.css              | 23 +++++++++----------
 .../cards/display/common/_background.html.erb |  2 +-
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 0e3e4a1ff..5d3eb0ecc 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -246,17 +246,17 @@
   .card__closed {
     align-items: center;
     aspect-ratio: 8/5;
-    border: var(--block-space-half) solid var(--card-color);
+    border: 0.75ch solid var(--card-color);
     border-radius: 0.2em;
     color: var(--card-color);
     display: flex;
     flex-direction: column;
     inset: auto var(--block-space) var(--block-space-double) auto;
-    justify-content: space-between;
+    justify-content: center;
     max-inline-size: 25ch;
     min-inline-size: 18ch;
     mix-blend-mode: multiply;
-    padding: var(--block-space-half) calc(var(--inline-space) * 1.5);
+    padding: 1ch;
     position: absolute;
     transform: rotate(-10deg);
 
@@ -270,20 +270,19 @@
     }
   }
 
-  .card__closed-by {
-    border-block-end: 1px dashed currentcolor;
-  }
-
   .card__closed-title {
+    -webkit-text-stroke: 0.12ch var(--card-color);
     color: var(--color-ink-inverted);
     font-size: 1.5em;
     font-weight: 900;
+    letter-spacing: 0.05ch;
     line-height: 1.2;
+    position: relative;
     text-align: center;
-    text-shadow:
-     -2px -2px 0 var(--card-color),
-      2px -2px 0 var(--card-color),
-     -2px 2px 0 var(--card-color),
-      2px 2px 0 var(--card-color);
+    text-transform: uppercase;
+  }
+
+  .card__closed-by {
+    border-block-end: 1px dashed currentcolor;
   }
 }
diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb
index 4db6a088a..aad9bc13f 100644
--- a/app/views/cards/display/common/_background.html.erb
+++ b/app/views/cards/display/common/_background.html.erb
@@ -4,7 +4,7 @@
 
 <% if card.closed? %>
   <div class="card__closed">
-    <span class="card__closed-title txt-uppercase"><%= card.closure.reason %></span>
+    <span class="card__closed-title"><%= card.closure.reason %></span>
     <strong class="txt-uppercase"><%= card.closed_at.strftime("%b %d, %Y") %></strong>
     <span>by <span class="card__closed-by"><%= card.closed_by.familiar_name %></span></span>
   </div>

From ae21bf262255c087c4e922fa270e0c4a30c0a418 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 7 May 2025 10:44:19 -0500
Subject: [PATCH 2/4] Try monospace font

---
 app/assets/stylesheets/cards.css              | 20 +++++++++++++++----
 .../cards/display/common/_background.html.erb |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 5d3eb0ecc..cb3bd6637 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -251,6 +251,8 @@
     color: var(--card-color);
     display: flex;
     flex-direction: column;
+    font-family: var(--font-mono);
+    font-weight: bold;
     inset: auto var(--block-space) var(--block-space-double) auto;
     justify-content: center;
     max-inline-size: 25ch;
@@ -258,6 +260,7 @@
     mix-blend-mode: multiply;
     padding: 1ch;
     position: absolute;
+    text-transform: uppercase;
     transform: rotate(-10deg);
 
     @media (prefers-color-scheme: dark) {
@@ -271,15 +274,24 @@
   }
 
   .card__closed-title {
-    -webkit-text-stroke: 0.12ch var(--card-color);
+    -webkit-text-stroke: 0.25ch var(--card-color);
     color: var(--color-ink-inverted);
+    font-family: var(--font-sans);
     font-size: 1.5em;
-    font-weight: 900;
-    letter-spacing: 0.05ch;
+    font-weight: 600;
+    letter-spacing: 0.1ch;
     line-height: 1.2;
     position: relative;
     text-align: center;
-    text-transform: uppercase;
+
+    /* Lay a copy of the text on top to make up for the center-aligned stroke */
+    &:after {
+      -webkit-text-stroke: 0;
+      color: var(--color-canvas);
+      content: attr(data-text);
+      inset: 0;
+      position: absolute;
+    }
   }
 
   .card__closed-by {
diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb
index aad9bc13f..1679e7b19 100644
--- a/app/views/cards/display/common/_background.html.erb
+++ b/app/views/cards/display/common/_background.html.erb
@@ -4,7 +4,7 @@
 
 <% if card.closed? %>
   <div class="card__closed">
-    <span class="card__closed-title"><%= card.closure.reason %></span>
+    <span class="card__closed-title" data-text="<%= card.closure.reason %>"><%= card.closure.reason %></span>
     <strong class="txt-uppercase"><%= card.closed_at.strftime("%b %d, %Y") %></strong>
     <span>by <span class="card__closed-by"><%= card.closed_by.familiar_name %></span></span>
   </div>

From 211adf9529d56997efe6aa84e5dac1267794cda8 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 7 May 2025 10:58:01 -0500
Subject: [PATCH 3/4] Tweak stroke values for legibility

---
 app/assets/stylesheets/cards.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index cb3bd6637..dd012496e 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -274,12 +274,12 @@
   }
 
   .card__closed-title {
-    -webkit-text-stroke: 0.25ch var(--card-color);
+    -webkit-text-stroke: 0.3ch var(--card-color);
     color: var(--color-ink-inverted);
     font-family: var(--font-sans);
     font-size: 1.5em;
     font-weight: 600;
-    letter-spacing: 0.1ch;
+    letter-spacing: 0.05ch;
     line-height: 1.2;
     position: relative;
     text-align: center;

From 9eceeb2a2ec5ec243aa3dc74855588e519895b4f Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 7 May 2025 16:44:02 -0500
Subject: [PATCH 4/4] Remove outlined letters, only use mono for date

---
 app/assets/stylesheets/cards.css              | 21 ++++++-------------
 .../cards/display/common/_background.html.erb |  2 +-
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index dd012496e..dee524b53 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -251,7 +251,6 @@
     color: var(--card-color);
     display: flex;
     flex-direction: column;
-    font-family: var(--font-mono);
     font-weight: bold;
     inset: auto var(--block-space) var(--block-space-double) auto;
     justify-content: center;
@@ -260,7 +259,6 @@
     mix-blend-mode: multiply;
     padding: 1ch;
     position: absolute;
-    text-transform: uppercase;
     transform: rotate(-10deg);
 
     @media (prefers-color-scheme: dark) {
@@ -274,24 +272,17 @@
   }
 
   .card__closed-title {
-    -webkit-text-stroke: 0.3ch var(--card-color);
-    color: var(--color-ink-inverted);
-    font-family: var(--font-sans);
     font-size: 1.5em;
-    font-weight: 600;
-    letter-spacing: 0.05ch;
+    font-weight: 900;
     line-height: 1.2;
     position: relative;
     text-align: center;
+    text-transform: uppercase;
+  }
 
-    /* Lay a copy of the text on top to make up for the center-aligned stroke */
-    &:after {
-      -webkit-text-stroke: 0;
-      color: var(--color-canvas);
-      content: attr(data-text);
-      inset: 0;
-      position: absolute;
-    }
+  .card__closed-date {
+    font-family: var(--font-mono);
+    text-transform: uppercase;
   }
 
   .card__closed-by {
diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb
index 1679e7b19..f9ba58886 100644
--- a/app/views/cards/display/common/_background.html.erb
+++ b/app/views/cards/display/common/_background.html.erb
@@ -5,7 +5,7 @@
 <% if card.closed? %>
   <div class="card__closed">
     <span class="card__closed-title" data-text="<%= card.closure.reason %>"><%= card.closure.reason %></span>
-    <strong class="txt-uppercase"><%= card.closed_at.strftime("%b %d, %Y") %></strong>
+    <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>
   </div>
 <% end %>