89 lines
3.5 KiB
Django/Jinja
89 lines
3.5 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { width: 1080px; height: 1350px; }
|
|
body {
|
|
font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
|
|
background: #F7F7FA; color: #14171A;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.card {
|
|
position: relative; width: 1080px; height: 1350px; overflow: hidden;
|
|
padding: 96px 84px 72px;
|
|
display: flex; flex-direction: column;
|
|
background: #FFFFFF;
|
|
}
|
|
.accent-bar { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: {{ accent_color | safe }}; }
|
|
.badge {
|
|
align-self: flex-start; padding: 10px 24px; border-radius: 999px;
|
|
background: {{ accent_color | safe }}; color: #fff;
|
|
font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
|
|
}
|
|
.idx { font-size: 120px; font-weight: 800; line-height: 1; color: {{ accent_color | safe }}; letter-spacing: -0.04em; }
|
|
.content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
|
|
.headline {
|
|
font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; color: #14171A;
|
|
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
|
|
}
|
|
.cover .headline { font-size: 104px; -webkit-line-clamp: 4; }
|
|
.body-page .headline { font-size: 76px; -webkit-line-clamp: 3; }
|
|
.cta .headline { font-size: 88px; -webkit-line-clamp: 3; }
|
|
.sub {
|
|
font-size: 42px; font-weight: 400; line-height: 1.5; color: #3A4047;
|
|
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 8;
|
|
white-space: pre-wrap;
|
|
}
|
|
.cover .sub { -webkit-line-clamp: 5; }
|
|
.footer {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
font-size: 28px; color: #8A9099; font-weight: 600; margin-top: 40px;
|
|
}
|
|
.cta-pill {
|
|
align-self: flex-start; margin-top: 8px; padding: 18px 40px; border-radius: 16px;
|
|
background: {{ accent_color | safe }}; color: #fff; font-size: 40px; font-weight: 700;
|
|
}
|
|
.progress { display: flex; gap: 10px; }
|
|
.progress i { width: 14px; height: 14px; border-radius: 50%; background: #D8DCE0; display: inline-block; }
|
|
.progress i.on { background: {{ accent_color | safe }}; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card {{ 'cover' if page_type=='cover' else ('cta' if page_type=='cta' else 'body-page') }}">
|
|
<div class="accent-bar"></div>
|
|
|
|
{% if page_type == 'cover' %}
|
|
<span class="badge">{{ category_label|default('') or '오늘의 이슈' }}</span>
|
|
<div class="content">
|
|
<h1 class="headline">{{ headline }}</h1>
|
|
<p class="sub">{{ body }}</p>
|
|
</div>
|
|
{% elif page_type == 'cta' %}
|
|
<div class="content">
|
|
<h1 class="headline">{{ headline }}</h1>
|
|
<p class="sub">{{ body }}</p>
|
|
{% if cta %}<div class="cta-pill">{{ cta }}</div>{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<span class="idx">{{ '%02d'|format(page_no - 1) }}</span>
|
|
<div class="content">
|
|
<h1 class="headline">{{ headline }}</h1>
|
|
<p class="sub">{{ body }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="footer">
|
|
{% if page_type == 'cover' or page_type == 'cta' %}
|
|
<span>{{ brand_handle|default('') }}</span><span>{{ page_no }} / {{ total_pages }}</span>
|
|
{% else %}
|
|
<div class="progress">{% for n in range(2, total_pages) %}<i class="{{ 'on' if n <= page_no }}"></i>{% endfor %}</div>
|
|
<span>{{ page_no }} / {{ total_pages }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|