cards/template/cards.html.j2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<style>
h2, strong {
font-family: 'Noto Sans CJK JP Bold', sans-serif;
}
body, table {
padding: 0;
margin: 0;
font-family: 'Noto Sans CJK JP Regular', sans-serif;
}
h2, strong {
font-weight: normal;
font-family: 'Noto Sans CJK JP Medium', sans-serif;
}
.container {
padding: 10px 10px 30px 30px;
width: 45.9%;
display: inline-block;
height: 63mm;
border-style: none;
border-width: 1px;
}
.container:nth-child(even) {
border-left-style: dashed;
border-top-style: dashed;
}
.container:nth-child(odd) {
border-top-style: dashed;
}
img {
width: 97%;
}
.image {
float: left;
width: 43%;
margin: 3px 7px 0px -10px;
}
.header {
margin-top: 10px;
margin-bottom: 0px;
}
.description {
float: left;
width: 55%;
margin-top: -20px;
}
.header {
font-size: 2rem;
}
.explanation {
font-size: 1.0rem;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.public-id {
font-size: 1.6rem;
margin-top: 0.6em;
}
.outer-container {
width: 100%;
font-size: 0;
}
.row:nth-child(5n+1) > .container {
page-break-before: always;
border-top-style: none;
}
.row:nth-child(5n) > .container {
border-bottom-style: none;
}
</style>
</head>
<body>
<div class="outer-container">
{% for row in range(cards|length // horizontal) %}
<div class="row">
{% for column in range(1,horizontal +1) %}
{% set card_index = (row * horizontal) + column %}
{% set card = cards[card_index -1]|default(empty_card) %}
<div class="container">
<h2 class="header">抽選カード</h2>
<div class="image">
<img src="{{ card.qr_path }}">
</div>
<div class="description">
<div class="explanation">
<p>左のQRコード、または3Fアリーナの友人受付から劇にご応募いただけます。</p>
<p>詳細は『立志』の28ページまたは『小立志』の4ページをご覧ください。</p>
</div>
<div class="public-id">
確認用ID: <strong>{{ card.public_id }}</strong>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</body>
</html>