Add Type B slide pipeline and recipe rendering updates
This commit is contained in:
193
templates/blocks/new/prerequisites-3col.html
Normal file
193
templates/blocks/new/prerequisites-3col.html
Normal file
@@ -0,0 +1,193 @@
|
||||
<!-- 필수요건 3열 비교: 3개 카테고리 세로 색상바 + 한자 + 제목/설명 2단 -->
|
||||
<!--
|
||||
📋 prerequisites-3col
|
||||
─────────────────
|
||||
용도: 3개 필수요건/카테고리를 나란히 비교. 각 카테고리에 색상 바 + 한자 + 세로 라벨 + 2개 하위 항목(제목+설명).
|
||||
슬롯:
|
||||
columns[3]:
|
||||
name — 세로 라벨 (예: "기술")
|
||||
sub — 세로 부제 (예: "디지털")
|
||||
kanji_top, kanji_bottom — 한자 2글자 (예: 技, 術)
|
||||
bar_gradient — 색상 바 CSS gradient
|
||||
heading_gradient_top, heading_gradient_bottom — 제목 gradient text
|
||||
items[2]: (heading, desc)
|
||||
Figma 원본: Frame 1171281190 (node 45:15, 2123×724)
|
||||
수학적 계산:
|
||||
scale = 1280 / 2123.13 = 0.60290
|
||||
col width: 690→416px, bar width: 152.5→92px
|
||||
title font: 45px × S = 27px, desc font: 35px × S = 21px
|
||||
kanji font: 50px × S = 30px
|
||||
CSS 요소: gradient bar, gradient text, border/dashed lines (전부 CSS)
|
||||
이미지 의존: 없음 (순수 CSS)
|
||||
-->
|
||||
<div class="block-p3c">
|
||||
{% for col in columns %}
|
||||
<div class="p3c-col">
|
||||
<!-- gradient 색상 바 -->
|
||||
<div class="p3c-bar"></div>
|
||||
|
||||
<!-- 세로 라벨 영역 -->
|
||||
<div class="p3c-vlabel-area">
|
||||
<div class="p3c-vlabel">{{ col.name }}</div>
|
||||
<div class="p3c-vlabel-sub">{{ col.sub }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 한자 -->
|
||||
{% if col.kanji_top %}
|
||||
<div class="p3c-kanji p3c-kanji--top">{{ col.kanji_top }}</div>
|
||||
{% endif %}
|
||||
{% if col.kanji_bottom %}
|
||||
<div class="p3c-kanji p3c-kanji--bottom">{{ col.kanji_bottom }}</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 상단 항목 -->
|
||||
<div class="p3c-section p3c-section--top">
|
||||
<div class="p3c-heading">
|
||||
{{ col.entries[0].heading|safe }}
|
||||
</div>
|
||||
<div class="p3c-desc">
|
||||
{% if col.entries[0].bullets is defined and col.entries[0].bullets %}
|
||||
{% for b in col.entries[0].bullets %}<div class="bul">• {{ b }}</div>{% endfor %}
|
||||
{% else %}
|
||||
{{ col.entries[0].desc|safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 중간 구분선 -->
|
||||
<div class="p3c-mid-line"></div>
|
||||
|
||||
<!-- 하단 항목 -->
|
||||
<div class="p3c-section p3c-section--bottom">
|
||||
<div class="p3c-heading">
|
||||
{{ col.entries[1].heading|safe }}
|
||||
</div>
|
||||
<div class="p3c-desc">
|
||||
{% if col.entries[1].bullets is defined and col.entries[1].bullets %}
|
||||
{% for b in col.entries[1].bullets %}<div class="bul">• {{ b }}</div>{% endfor %}
|
||||
{% else %}
|
||||
{{ col.entries[1].desc|safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 테두리 -->
|
||||
<div class="p3c-border-top"></div>
|
||||
<div class="p3c-border-bottom"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-p3c {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.p3c-col {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
border-top: 1.2px solid #000;
|
||||
border-bottom: 1.2px solid #000;
|
||||
}
|
||||
|
||||
/*
|
||||
gradient 색상 바: Figma 152.5×595
|
||||
→ 비율 7.2% of col width → flex none 72px (or %)
|
||||
3가지 색상: 파랑(#0D78D0→#023056), 주황(#FF9A23→#CC5200), 초록(#39BE49→#23742C)
|
||||
*/
|
||||
.p3c-bar {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 56px; height: 100%; /* 슬라이드 적용: 72→56px */
|
||||
}
|
||||
/* Figma 원본 열별 색상 */
|
||||
.p3c-col:nth-child(1) .p3c-bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
|
||||
.p3c-col:nth-child(2) .p3c-bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||||
.p3c-col:nth-child(3) .p3c-bar { background: linear-gradient(180deg, #39BE49 0%, #23742C 100%); }
|
||||
|
||||
/* 세로 라벨: 바 좌측 절반에 세로 글자 */
|
||||
.p3c-vlabel-area {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 56px; height: 100%; /* 슬라이드 적용: 36→56px (bar와 동일) */
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 3;
|
||||
}
|
||||
.p3c-vlabel, .p3c-vlabel-sub {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
font-weight: 700; font-size: 14px; /* 슬라이드 적용 */
|
||||
color: #fff;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.p3c-vlabel-sub { font-size: 12px; }
|
||||
|
||||
/* 한자: 바 우측 절반 */
|
||||
.p3c-kanji {
|
||||
position: absolute;
|
||||
left: 36px; width: 36px;
|
||||
font-weight: 700; font-size: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
.p3c-kanji--top { top: 15%; height: 30%; }
|
||||
.p3c-kanji--bottom { top: 55%; height: 30%; }
|
||||
|
||||
/* 제목+설명 영역: 슬라이드 적용 */
|
||||
.p3c-section {
|
||||
position: absolute;
|
||||
left: 60px; right: 6px; /* 슬라이드 적용: 80→60px */
|
||||
}
|
||||
.p3c-section--top { top: 3%; height: 47%; }
|
||||
.p3c-section--bottom { top: 53%; height: 47%; }
|
||||
|
||||
/*
|
||||
제목: gradient text
|
||||
Figma 45px × S = 27px → block 18px
|
||||
*/
|
||||
.p3c-heading {
|
||||
font-weight: 700; font-size: 12px; /* 슬라이드 적용: 18→12px */
|
||||
line-height: 1.5;
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
/* Figma 원본 열별 heading 색상 */
|
||||
.p3c-col:nth-child(1) .p3c-heading { background-image: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); }
|
||||
.p3c-col:nth-child(2) .p3c-heading { background-image: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||||
.p3c-col:nth-child(3) .p3c-heading { background-image: linear-gradient(180deg, #39BE49 0%, #23742C 100%); }
|
||||
|
||||
/*
|
||||
설명: Figma 35px × S = 21px → block 14px
|
||||
#3E3523
|
||||
*/
|
||||
.p3c-desc {
|
||||
font-weight: 500; font-size: 11px; /* 슬라이드 적용: 14→11px */
|
||||
line-height: 1.6;
|
||||
color: #3E3523;
|
||||
}
|
||||
.p3c-desc .bul {
|
||||
padding-left: 12px;
|
||||
text-indent: -12px;
|
||||
}
|
||||
|
||||
/* 중간 구분선: dashed */
|
||||
.p3c-mid-line {
|
||||
position: absolute;
|
||||
left: 56px; right: 0; /* bar width와 동일 */
|
||||
top: 50%;
|
||||
border-top: 1.2px dashed #000;
|
||||
}
|
||||
|
||||
/* 테두리 (상하 실선은 col border로 처리) */
|
||||
</style>
|
||||
Reference in New Issue
Block a user