diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 1a8325e45..61beab9b2 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -97,12 +97,12 @@
}
}
- .card--golden {
+ .card--golden.card--doing {
--border-color: var(--color-bg) !important;
background-color: var(--color-bg);
background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
- box-shadow:
+ box-shadow:
0 0 0.5em 0.2em var(--color-golden),
0 0 1em 0.4em var(--color-golden) !important;
outline: 1px solid var(--color-golden);
@@ -154,7 +154,7 @@
&.card__actions-container--top {
margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
min-inline-size: 30ch;
-
+
#header:has(&) {
position: relative;
z-index: 1;
diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index ba75a6d4a..1546efd8e 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -26,4 +26,19 @@ module CardsHelper
class: "btn txt-small",
**options
end
+
+ def card_article_tag(card, id: dom_id(card, :ticket), **options, &block)
+ classes = [
+ options.delete(:class),
+ ("card--golden" if card.golden?),
+ ("card--doing" if card.doing?)
+ ].compact.join(" ")
+
+ tag.article \
+ id: id,
+ style: "--card-color: #{card.color}; view-transition-name: #{id}",
+ class: classes,
+ **options,
+ &block
+ end
end
diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb
index bdc1a3c4d..c4c89046c 100644
--- a/app/views/cards/display/_perma.html.erb
+++ b/app/views/cards/display/_perma.html.erb
@@ -1,7 +1,5 @@
<% cache card do %>
-
+ <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start border-radius" do %>
+ <% end %>
<% end %>
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index c8fcbe8c5..ceffc0867 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,7 +1,5 @@
<% cache [ card ] do %>
-
+ <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start full-width border-radius" do %>
+ <% end %>
<% end %>