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>
48 lines
2.1 KiB
CSS
48 lines
2.1 KiB
CSS
/* ══════════════════════════════════════
|
|
Spacing Tokens v1
|
|
══════════════════════════════════════
|
|
여백/간격/들여쓰기 공통 기준.
|
|
══════════════════════════════════════ */
|
|
|
|
:root {
|
|
/* ── 기본 스케일 ── */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 12px;
|
|
--space-lg: 16px;
|
|
--space-xl: 24px;
|
|
|
|
/* ── slide-base 레이아웃 ── */
|
|
--slide-padding-x: 40px; /* 본문 좌우 여백 */
|
|
--slide-title-left: 52px; /* 대목차 시작 */
|
|
--slide-title-top: 22px; /* 대목차 위치 */
|
|
--slide-divider-top: 58px; /* 구분선 위치 */
|
|
--slide-body-top: 65px; /* 본문 시작 */
|
|
--slide-body-height: 575px; /* 본문 높이 */
|
|
--slide-footer-bottom: 18px; /* footer 하단 여백 */
|
|
--slide-footer-height: 41px; /* footer 높이 */
|
|
|
|
/* ── zone ── */
|
|
--zone-gap: 8px; /* zone 간 간격 */
|
|
--zone-padding-left: 12px; /* zone 안쪽 좌측 여백 */
|
|
--zone-padding-right: 8px; /* zone 안쪽 우측 여백 */
|
|
--zone-title-mb: 8px; /* zone 제목 아래 여백 */
|
|
|
|
/* ── 블록 공통 ── */
|
|
--card-padding: 16px; /* 카드 내부 여백 */
|
|
--card-padding-sm: 8px; /* 작은 카드 내부 여백 */
|
|
--card-gap: 12px; /* 카드 간 간격 */
|
|
--card-radius: 6px; /* 카드 모서리 */
|
|
|
|
/* ── 블릿/텍스트 ── */
|
|
--bullet-indent: 14px; /* 불릿 hanging indent */
|
|
--bullet-gap: 2px; /* 불릿 항목 간 간격 */
|
|
--heading-gap: 4px; /* 소제목 아래 간격 */
|
|
--section-gap: 10px; /* 섹션 간 간격 */
|
|
|
|
/* ── flex/grid 기본 ── */
|
|
--flex-gap: 12px; /* 기본 flex gap */
|
|
--flex-gap-sm: 6px; /* 좁은 flex gap */
|
|
--grid-gap: 16px; /* 기본 grid gap */
|
|
}
|