ross/toptrumps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Ross
2025-12-06 22:19:01 +00:00
parent d9c64f34b1
commit 7661ad8f00
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cards/templates/cards/_card_inner_design3.html
+3 -1
View File
@@ -1,9 +1,11 @@
{# Shared inner fragment for Design 3 - core card markup only #} {# Shared inner fragment for Design 3 - core card markup only #}
<div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);"> <div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
<div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; filter:brightness(0.9); position:relative; overflow:hidden;"> <div class="hero-image" style="background-image: linear-gradient(120deg, rgba(255,122,24,0.18), rgba(175,0,45,0.18)), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; filter:brightness(0.9); position:relative; overflow:hidden;">
{% if card.background and card.background.image or background and background.image %} {% if card.background and card.background.image or background and background.image %}
<img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;"> <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
{% endif %} {% endif %}
{# diet tint overlay so background colour is visible beneath the gradient and image #}
<div class="hero-tint" style="position:absolute; inset:0; z-index:0.5; {% if card.diet == 'herbivore' %}background-color:#e8f6ea;{% elif card.diet == 'carnivore' %}background-color:#fff0f0;{% elif card.diet == 'omnivore' %}background-color:#fff8e6;{% else %}background-color:#f5f5f5;{% endif %} opacity:0.85;"></div>
{% if card.image %} {% if card.image %}
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;"> <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;">
{% endif %} {% endif %}