kyeongmin
8e577b3163
- tokens: typography(35변수), spacing(28변수), colors(41변수) 정의 - slide-base.html: 인라인 style 제거, Jinja include로 토큰/CSS 조립 - slide-base.css: 모든 직접값을 토큰 변수 참조로 전환 (직접값 0) - block_assembler.py: Template → Environment.from_string (include 지원) - TOKENS-v1.md: 위계 기준표 초안 + component token 후보 - BLOCK-RULES.md: 블록 작성 규칙 (spacing 문구 실제 토큰과 일치) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
76 lines
2.5 KiB
HTML
76 lines
2.5 KiB
HTML
<!-- 슬라이드 배경 (고정) — 모든 블록의 공통 래퍼 -->
|
||
<!--
|
||
📋 slide-base
|
||
─────────────────
|
||
용도: 16:9 슬라이드의 고정 배경. 상단 제목 + 구분선 + 본문 영역 + 하단 결론 pill.
|
||
각 블록(new/, cards/, emphasis/ 등)은 본문 영역(.slide-body) 안에 들어간다.
|
||
Figma 원본: Frame 1171281207 (node 107:22, 3848×2165, Page 2)
|
||
CSS: styles/tokens/ + styles/base/slide-base.css 로 분리됨.
|
||
슬롯:
|
||
title — 슬라이드 제목 (gradient text)
|
||
body — {% block body %}{% endblock %} 또는 include 대상
|
||
footer_text — 하단 pill 결론 메시지 (HTML, <em> 노란 하이라이트) (선택)
|
||
이미지:
|
||
svg/bg_slide_texture.png — 배경 텍스처 (opacity 2%)
|
||
svg/line_divider.svg — 구분선
|
||
svg/pill_scroll.png — 하단 pill 배경 (두루마리, 이미지 유지)
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>{{ title|default("슬라이드") }}</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
|
||
<!--
|
||
CSS 로딩 순서:
|
||
1. tokens (typography, spacing, colors) — 변수 정의
|
||
2. base (slide-base.css) — 프레임 스타일
|
||
3. blocks (블록별 CSS) — 블록 스타일
|
||
4. themes (선택) — 톤 변형
|
||
-->
|
||
<style>
|
||
{% include "styles/tokens/typography.css" %}
|
||
{% include "styles/tokens/spacing.css" %}
|
||
{% include "styles/tokens/colors.css" %}
|
||
{% include "styles/base/slide-base.css" %}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<!-- 배경 -->
|
||
<div class="slide-bg">
|
||
<img src="svg/bg_slide_texture.png" class="slide-bg-texture" alt="">
|
||
</div>
|
||
|
||
<!-- 상단 제목 -->
|
||
<div class="slide-title">{{ title|default("슬라이드 제목") }}</div>
|
||
|
||
<!-- 구분선 -->
|
||
<div class="slide-divider">
|
||
<img src="svg/line_divider.svg" alt="">
|
||
</div>
|
||
|
||
<!-- 본문 영역 — 블록들이 여기에 들어감 -->
|
||
<div class="slide-body">
|
||
{% block body %}{% endblock %}
|
||
</div>
|
||
|
||
<!-- 하단 결론 pill -->
|
||
{% if footer_text %}
|
||
<div class="slide-footer">
|
||
{% if footer_pill_bg %}
|
||
<img src="{{ footer_pill_bg }}" class="slide-footer-bg" alt="">
|
||
{% else %}
|
||
<div class="slide-footer-bg slide-footer--css"></div>
|
||
{% endif %}
|
||
<div class="slide-footer-text">{{ footer_text|safe }}</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|