diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 8a478159f..adc0dca20 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -224,16 +224,25 @@ .card__closed { align-items: center; - aspect-ratio: 7/4; + aspect-ratio: 8/5; + background-color: var(--color-bg); border: var(--block-space-half) 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; + max-inline-size: 25ch; + min-inline-size: 18ch; mix-blend-mode: multiply; padding: var(--block-space-half) calc(var(--inline-space) * 1.5); position: absolute; transform: rotate(-10deg); + + @media (prefers-color-scheme: dark) { + mix-blend-mode: screen; + } } .card__closed-by { @@ -242,8 +251,10 @@ .card__closed-title { color: var(--color-ink-reversed); - font-size: var(--text-rel-large); + font-size: 1.5em; font-weight: 900; + line-height: 1.2; + text-align: center; text-shadow: -2px -2px 0 var(--card-color), 2px -2px 0 var(--card-color), diff --git a/app/views/cards/display/common/_background.html.erb b/app/views/cards/display/common/_background.html.erb index 08a3c557a..8852fb765 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? %>
<%= card.closure.reason %> - <%= card.closed_at.strftime("%b %d, %Y") %> - by <%= card.closed_by.name %> + <%= card.closed_at.strftime("%b %d, %Y") %> + by <%= familiar_name_for(card.closed_by) %>
<% end %>