Merge pull request #467 from basecamp/completed-text-outline

Completed text outline

app/assets/stylesheets/cards.css

@@ -247,17 +247,18 @@
   .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;
+    font-weight: bold;
     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);
 
@@ -271,21 +272,22 @@
     }
   }
 
-  .card__closed-by {
-    border-block-end: 1px dashed currentcolor;
-  }
-
   .card__closed-title {
-    color: var(--color-ink-inverted);
     font-size: 1.5em;
     font-weight: 900;
     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-date {
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+  }
+
+  .card__closed-by {
+    border-block-end: 1px dashed currentcolor;
   }
 
   .card__bubble {

app/views/cards/display/common/_background.html.erb

@@ -4,8 +4,8 @@
 
 <% if card.closed? %>
   <div class="card__closed">
-    <span class="card__closed-title txt-uppercase"><%= card.closure.reason %></span>
-    <strong class="txt-uppercase"><%= card.closed_at.strftime("%b %d, %Y") %></strong>
+    <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>
   </div>
 <% end %>