Files
C.E.L_Slide_test2/templates/blocks/cards/card-numbered--horizontal.html
kyeongmin 29f56187c0 Phase P~S 전체 작업물: 검증 스크립트, 블록 템플릿, 설계 문서, 코드 수정
포함 내용:
- Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md)
- 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py)
- 블록 템플릿 추가 (cards, emphasis 변형)
- 코드 수정: block_search, content_editor, design_director, slide_measurer
- catalog.yaml 블록 목록 업데이트
- CLAUDE.md, PROGRESS.md, README.md 업데이트

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 08:38:06 +09:00

61 lines
1.4 KiB
HTML

<!-- card-numbered variant: horizontal -->
<!--
📋 card-numbered--horizontal
─────────────────
용도: 같은 구조의 항목 2-3개를 가로로 나란히 비교
슬롯: items[] (기존과 동일 — title, description)
기존 card-numbered의 색상/스타일 유지, 배치만 가로
-->
<div class="block-card-num-h" style="--cn-count: {{ items|length }}">
{% for item in items %}
<div class="cn-item-h">
<div class="cn-number-h" style="background: {{ item.color | default('#2563eb') }}">{{ loop.index }}</div>
<div class="cn-body-h">
<div class="cn-title-h">{{ item.title }}</div>
<div class="cn-desc-h">{{ item.description }}</div>
</div>
</div>
{% endfor %}
</div>
<style>
.block-card-num-h {
display: grid;
grid-template-columns: repeat(var(--cn-count, 2), 1fr);
gap: 10px;
}
.cn-item-h {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 14px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.cn-number-h {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
}
.cn-title-h {
font-size: 13px;
font-weight: 700;
color: #1e293b;
margin-bottom: 2px;
}
.cn-desc-h {
font-size: 11px;
color: #475569;
line-height: 1.6;
white-space: pre-line;
}
</style>