feat(insta-lab): default 템플릿 디자인 시스템 동기화(참조용)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -3,52 +3,84 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');
|
@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; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
html, body {
|
html, body { width: 1080px; height: 1350px; }
|
||||||
width: 1080px; height: 1350px;
|
body {
|
||||||
font-family: 'Noto Sans KR', sans-serif;
|
font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
|
||||||
background: #F7F7FA; color: #14171A;
|
background: #F7F7FA; color: #14171A;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
.card {
|
.card {
|
||||||
width: 1080px; height: 1350px;
|
position: relative; width: 1080px; height: 1350px; overflow: hidden;
|
||||||
padding: 80px 72px;
|
padding: 96px 84px 72px;
|
||||||
display: flex; flex-direction: column; justify-content: space-between;
|
display: flex; flex-direction: column;
|
||||||
background: linear-gradient(180deg, #FFFFFF 0%, #F7F7FA 100%);
|
background: #FFFFFF;
|
||||||
border-top: 16px solid {{ accent_color }};
|
|
||||||
}
|
}
|
||||||
|
.accent-bar { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: {{ accent_color }}; }
|
||||||
.badge {
|
.badge {
|
||||||
display: inline-block; padding: 8px 20px; border-radius: 999px;
|
align-self: flex-start; padding: 10px 24px; border-radius: 999px;
|
||||||
background: {{ accent_color }}; color: #fff;
|
background: {{ accent_color }}; color: #fff;
|
||||||
font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
|
font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
.idx { font-size: 120px; font-weight: 800; line-height: 1; color: {{ accent_color }}; letter-spacing: -0.04em; }
|
||||||
|
.content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
|
||||||
.headline {
|
.headline {
|
||||||
font-size: {{ 96 if page_type == 'cover' else 72 }}px;
|
font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; color: #14171A;
|
||||||
font-weight: 900; line-height: 1.15; letter-spacing: -0.04em;
|
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
|
||||||
margin-top: 32px;
|
|
||||||
}
|
}
|
||||||
.body {
|
.cover .headline { font-size: 104px; -webkit-line-clamp: 4; }
|
||||||
font-size: 40px; font-weight: 400; line-height: 1.55;
|
.body-page .headline { font-size: 76px; -webkit-line-clamp: 3; }
|
||||||
margin-top: 40px; color: #2A2F35;
|
.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;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
.footer {
|
.footer {
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
display: flex; justify-content: space-between; align-items: center;
|
||||||
font-size: 28px; color: #6B7280; font-weight: 500;
|
font-size: 28px; color: #8A9099; font-weight: 600; margin-top: 40px;
|
||||||
}
|
}
|
||||||
.cta { font-weight: 700; color: {{ accent_color }}; }
|
.cta-pill {
|
||||||
|
align-self: flex-start; margin-top: 8px; padding: 18px 40px; border-radius: 16px;
|
||||||
|
background: {{ accent_color }}; 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 }}; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="card">
|
<div class="card {{ 'cover' if page_type=='cover' else ('cta' if page_type=='cta' else 'body-page') }}">
|
||||||
<div>
|
<div class="accent-bar"></div>
|
||||||
<span class="badge">{{ page_type|upper }}</span>
|
|
||||||
|
{% if page_type == 'cover' %}
|
||||||
|
<span class="badge">{{ category_label|default('') or '오늘의 이슈' }}</span>
|
||||||
|
<div class="content">
|
||||||
<h1 class="headline">{{ headline }}</h1>
|
<h1 class="headline">{{ headline }}</h1>
|
||||||
<p class="body">{{ body }}</p>
|
<p class="sub">{{ body }}</p>
|
||||||
</div>
|
</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">
|
<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>
|
<span>{{ page_no }} / {{ total_pages }}</span>
|
||||||
{% if cta %}<span class="cta">{{ cta }}</span>{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user