.
This commit is contained in:
Ross
@@ -10,10 +10,10 @@
|
||||
|
||||
.card-canonical .toptrump-card {
|
||||
width: var(--card-width, 83mm);
|
||||
height: var(--card-height, 120mm);
|
||||
height: var(--card-height, 130mm);
|
||||
}
|
||||
|
||||
.toptrump-card .hero-image{height:calc(var(--card-height, 120mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
|
||||
.toptrump-card .hero-image{height:calc(var(--card-height, 130mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
|
||||
|
||||
/* For most designs center the dino image absolutely and allow an inline
|
||||
scale transform (the fragments provide `transform: translate(...) scale(...)`). */
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
{# 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; {% 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.95;"></div>
|
||||
|
||||
|
||||
|
||||
{% 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 }}); border-radius:8px; z-index:1;">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
|
||||
@@ -37,16 +37,16 @@
|
||||
</div>
|
||||
<div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div style="margin-top:0.5rem;">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
|
||||
<span style="background:#ffd54f;color:#222;padding:4px;border-radius:6px;font-weight:800;font-size:0.9rem;">✨</span>
|
||||
<strong style="font-size:0.95rem;">Fun facts</strong>
|
||||
<div style="margin-top:0.25rem;">
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
|
||||
<span style="background:#ffd54f;color:#222;padding:2px;border-radius:4px;font-weight:700;font-size:0.8rem;line-height:1;">✨</span>
|
||||
<strong style="font-size:0.9rem;line-height:1;">Fun facts</strong>
|
||||
</div>
|
||||
<div style="background:#fbfcfd;border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:8px;">
|
||||
<div style="background:#fbfcfd;border:1px solid rgba(0,0,0,0.04);padding:6px;border-radius:8px;">
|
||||
<ul style="margin:0;padding:0 0 0 0.85rem;list-style:none;display:flex;flex-direction:column;gap:6px;">
|
||||
{% for fact in card.facts_list %}
|
||||
<li style="display:flex;gap:8px;align-items:flex-start;">
|
||||
<span style="color:#ffb74d;font-size:1.05rem;line-height:1;margin-top:2px;">•</span>
|
||||
<span style="color:#ffb74d;font-size:0.95rem;line-height:1;margin-top:1px;">•</span>
|
||||
<span style="flex:1;color:#333;">{{ fact }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<title>Printable cards</title>
|
||||
<style>
|
||||
/* Canonical card size for printable view */
|
||||
:root{ --card-width: 83mm; --card-height: 120mm; }
|
||||
:root{ --card-width: 83mm; --card-height: 130mm; }
|
||||
/* A4 portrait: 210mm x 297mm. Use mm units to better match print sizing. */
|
||||
@page { size: A4 portrait; margin: 12mm; }
|
||||
html,body{height:100%; margin:0; padding:0;}
|
||||
@@ -44,8 +44,12 @@
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform-origin:center;
|
||||
min-width:110%;
|
||||
min-height:110%;
|
||||
/* Reduce the minimum size used for print so the image doesn't
|
||||
intrude into neighbouring cards when printing multiple cards
|
||||
per sheet. 100% keeps the image filling the hero area but
|
||||
avoids the slight overlap caused by 110%. */
|
||||
min-width:100%;
|
||||
min-height:100%;
|
||||
width:auto;
|
||||
height:auto;
|
||||
object-fit:cover;
|
||||
@@ -116,35 +120,37 @@
|
||||
<div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, var(--card-width)); gap:8mm;">
|
||||
{% for card in page_cards %}
|
||||
<div class="print-card">
|
||||
{% if design == 1 %}
|
||||
{% include 'cards/_card_inner_design1.html' %}
|
||||
{% elif design == 2 %}
|
||||
{% include 'cards/_card_inner_design2.html' %}
|
||||
{% elif design == 3 %}
|
||||
{% include 'cards/_card_inner_design3.html' %}
|
||||
{% elif design == 4 %}
|
||||
{% include 'cards/_card_inner_design4.html' %}
|
||||
{% elif design == 5 %}
|
||||
{% include 'cards/_card_inner_design5.html' %}
|
||||
{% else %}
|
||||
<div class="toptrump-card design-{{ design }}">
|
||||
<div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% elif background and background.image %}url('{{ background.image.url }}'){% endif %}; background-size:cover; background-position:center">
|
||||
{% 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;">
|
||||
{% endif %}
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
|
||||
{% endif %}
|
||||
<div class="card-canonical">
|
||||
{% if design == 1 %}
|
||||
{% include 'cards/_card_inner_design1.html' %}
|
||||
{% elif design == 2 %}
|
||||
{% include 'cards/_card_inner_design2.html' %}
|
||||
{% elif design == 3 %}
|
||||
{% include 'cards/_card_inner_design3.html' %}
|
||||
{% elif design == 4 %}
|
||||
{% include 'cards/_card_inner_design4.html' %}
|
||||
{% elif design == 5 %}
|
||||
{% include 'cards/_card_inner_design5.html' %}
|
||||
{% else %}
|
||||
<div class="toptrump-card design-{{ design }}">
|
||||
<div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% elif background and background.image %}url('{{ background.image.url }}'){% endif %}; background-size:cover; background-position:center">
|
||||
{% 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;">
|
||||
{% endif %}
|
||||
{% if card.image %}
|
||||
<img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="padding:6px">
|
||||
<div style="font-weight:800; font-size:14pt">{{ card.name }}</div>
|
||||
<div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div class="caption">{{ card.facts_list|join:', ' }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:6px">
|
||||
<div style="font-weight:800; font-size:14pt">{{ card.name }}</div>
|
||||
<div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
|
||||
{% if card.facts_list %}
|
||||
<div class="caption">{{ card.facts_list|join:', ' }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user