Polish up columns

app/assets/stylesheets/card-columns.css

@@ -8,15 +8,14 @@
     grid-template-columns: repeat(2, 50%);
     margin: auto;
     max-inline-size: 100ch;
-    padding-block: var(--block-space-half);
 
     .cards:first-child {
       border-inline-end: var(--border);
-      padding-inline-end: var(--cards-padding);
+      padding-inline-end: var(--cards-gap);
     }
 
     .cards:last-child {
-      padding-inline-start: var(--cards-padding);
+      padding-inline-start: var(--cards-gap);
     }
   }
 
@@ -25,7 +24,7 @@
 
   .cards {
     --cards-padding: 2cqi;
-    --cards-gap: var(--block-space);
+    --cards-gap: 2ch;
 
     align-items: center;
     container-type: inline-size;
@@ -33,14 +32,14 @@
     flex-direction: column;
     gap: var(--cards-gap);
     justify-content: start;
-    padding-block: var(--cards-padding);
+    padding-block: var(--cards-gap);
 
-    .card {
+    :where(.card) {
       --block-space: 1em;
       --block-space-half: 0.5em;
       --text-xx-large: 2em;
 
-      font-size: 1.8cqi;
+      font-size: 2.25cqi;
     }
 
     .card__title {
@@ -52,12 +51,19 @@
     }
   }
 
+  .cards__heading {
+    display: inline-flex;
+    font-size: var(--text-medium);
+    inline-size: 100%;
+    justify-content: center;
+    text-transform: uppercase;
+  }
+
   /* Considering
   /* ------------------------------------------------------------------------ */
 
   .cards--considering {
     .card {
-      --card-color: var(--color-ink) !important;
       --text-xx-large: 1.6em;
       --text-small: 1.1em;
 
@@ -75,19 +81,10 @@
       }
     }
 
-    .card__collection,
     .card__background {
       display: none;
     }
 
-    .card__header {
-      margin: 0;
-    }
-
-    .card__body {
-      padding-block-start: 0;
-    }
-
     .card__title {
       margin-block-start: 0.1em;
       min-block-size: 0;
@@ -118,10 +115,7 @@
     max-inline-size: 120ch;
 
     .card {
-      --block-space: 1em;
-      --block-space-half: 0.5em;
       --card-size: calc(100% - (var(--container-padding) * 2) / 2);
-      --text-xx-large: 1.8em;
 
       block-size: 50%;
       font-size: 3cqi;
@@ -129,7 +123,6 @@
       inline-size: var(--card-size);
     }
 
-    .card__meta,
     .card__stages {
       display: none;
     }

app/assets/stylesheets/cards.css

@@ -73,7 +73,7 @@
     background-color: var(--card-color);
     border-radius: var(--border-radius) 0 var(--border-radius) 0;
     font-weight: 800;
-    letter-spacing: 0.5ch;
+    letter-spacing: 0.4ch;
     padding: var(--block-space-half) var(--inline-space-double);
   }
 
@@ -132,7 +132,11 @@
     --border-size: 1px;
     --row-gap: 0.25em;
 
-    margin-inline-start: var(--inline-space-double);
+    align-items: center;
+    display: flex;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    text-transform: uppercase;
 
     strong {
       font-weight: 900;

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

@@ -1,4 +1,4 @@
-<div class="card__meta flex align-center txt-tight-lines txt-uppercase max-width min-width" id="<%= dom_id(card, :meta) %>">
+<div class="card__meta" id="<%= dom_id(card, :meta) %>">
   <%= avatar_image_tag card.creator, class: "avatar margin-inline-end" %>
 
   <div class="flex flex-column gap txt-align-start">
@@ -9,12 +9,12 @@
     <hr class="full-width separator--horizontal unpad margin-none">
 
     <span class="pad-inline overflow-ellipsis">
-      Reported by <strong><%= familiar_name_for(card.creator) %></strong>  
+      Reported by <strong><%= familiar_name_for(card.creator) %></strong>
     </span>
   </div>
 
   <hr class="separator margin-none unpad">
-  
+
   <div class="flex flex-column gap txt-align-start overflow-ellipsis">
     <span class="pad-inline overflow-ellipsis"><%= card.creating? ? "Created" : "Updated" %>
       <%= local_datetime_tag(card.updated_at, style: :daysago) %>

app/views/cards/index/_workflow_filter.html.erb

@@ -1,5 +1,5 @@
 <div class="card-filter--column flex-inline center position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
-  <button class="txt-align-center input input--select borderless center txt-uppercase txt-medium margin-none-block" data-action="click->dialog#open:stop">
+  <button class="cards__heading input input--select borderless" data-action="click->dialog#open:stop">
     <strong class="overflow-ellipsis">
       <% if filter.stages.any? %>
         <%= filter.stages.map(&:name).to_sentence %>

app/views/cards/index/engagement/_closed.html.erb

@@ -1,17 +1,15 @@
-<div class="margin-block">
-  <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none">
+<section id="closed-cards" class="cards cards--closed">
+  <h2 class="cards__heading">
     Recently closed
   </h2>
 
-  <section id="closed-cards" class="cards cards--closed">
-    <% if page.used? %>
-      <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
+  <% if page.used? %>
+    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
 
-      <% unless page.last? %>
-        <%= cards_next_page_link "closed-cards", page: page, filter: filter, fetch_on_visible: true %>
-      <% end %>
-    <% else %>
-      <p class="txt-medium translucent">Nothing here</p>
+    <% unless page.last? %>
+      <%= cards_next_page_link "closed-cards", page: page, filter: filter, fetch_on_visible: true %>
     <% end %>
-  </section>
-</div>
+  <% else %>
+    <p class="txt-medium translucent">Nothing here</p>
+  <% end %>
+</section>

app/views/cards/index/engagement/_considering.html.erb

@@ -1,5 +1,5 @@
 <section id="considering-cards" class="cards cards--considering">
-  <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block">
+  <h2 class="cards__heading">
     Considering
   </h2>
 
@@ -12,5 +12,4 @@
   <% else %>
     <p class="txt-medium translucent">Nothing here</p>
   <% end %>
-
 </section>

app/views/cards/index/engagement/_doing.html.erb

@@ -2,7 +2,7 @@
   <% if workflow = filter.single_workflow %>
     <%= render "cards/index/workflow_filter", workflow: workflow, filter: filter %>
   <% else %>
-    <h2 class="txt-align-center flex-inline center txt-uppercase txt-medium margin-none-block">
+    <h2 class="cards__heading">
       Doing
     </h2>
   <% end %>