토큰 기반 CSS 체계 구축 + slide-base 스타일 분리
- 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>
This commit is contained in:
@@ -5,13 +5,7 @@
|
||||
용도: 16:9 슬라이드의 고정 배경. 상단 제목 + 구분선 + 본문 영역 + 하단 결론 pill.
|
||||
각 블록(new/, cards/, emphasis/ 등)은 본문 영역(.slide-body) 안에 들어간다.
|
||||
Figma 원본: Frame 1171281207 (node 107:22, 3848×2165, Page 2)
|
||||
수학적 계산:
|
||||
원본 3848×2165 → 16:9 (1280×720)
|
||||
scale = 1280 / 3848 = 0.33264
|
||||
상단 제목: top 125px × S ≈ 42px, left 155px × S ≈ 52px, font 65.8px × S ≈ 22px
|
||||
구분선: top 218px × S ≈ 72px
|
||||
하단 pill: top 1980px × S ≈ 659px, height 123px × S ≈ 41px
|
||||
본문 영역: top ~72px ~ bottom ~659px = 약 587px 가용
|
||||
CSS: styles/tokens/ + styles/base/slide-base.css 로 분리됨.
|
||||
슬롯:
|
||||
title — 슬라이드 제목 (gradient text)
|
||||
body — {% block body %}{% endblock %} 또는 include 대상
|
||||
@@ -20,10 +14,6 @@
|
||||
svg/bg_slide_texture.png — 배경 텍스처 (opacity 2%)
|
||||
svg/line_divider.svg — 구분선
|
||||
svg/pill_scroll.png — 하단 pill 배경 (두루마리, 이미지 유지)
|
||||
CSS 요소:
|
||||
배경 gradient: linear-gradient(180deg, #f0f0f0, #fff)
|
||||
제목 gradient text: linear-gradient(180deg, #296b55, #123328)
|
||||
하단 pill: 캡슐 border-radius 50px
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
@@ -33,136 +23,18 @@
|
||||
<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>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background: #e8ecf0;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
min-height: 100vh;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
/* ── 16:9 슬라이드 컨테이너 ── */
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/*
|
||||
배경: Figma gradient(#f0f0f0→#fff) + 텍스처(opacity 2%)
|
||||
MCP 확인: bg-gradient-to-b from-[#f0f0f0] to-white, opacity-2
|
||||
*/
|
||||
.slide-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
.slide-bg-texture {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.02;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
상단 제목: Figma 65.8px Bold, gradient(#296b55→#123328)
|
||||
top: 125/2165 × 720 ≈ 42px, left: 155/3848 × 1280 ≈ 52px
|
||||
text-shadow: 0 0 5px #322c1e (Figma 5.263px × S)
|
||||
*/
|
||||
.slide-title {
|
||||
position: absolute;
|
||||
left: 52px; top: 22px;
|
||||
width: calc(100% - 104px);
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 1.4;
|
||||
background-image: linear-gradient(180deg, #296b55 0%, #123328 100%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 2px #322c1e;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/*
|
||||
구분선: Figma top 218px → 72px, width 3553/3848 × 1280 ≈ 1181px
|
||||
SVG 이미지 또는 CSS border
|
||||
*/
|
||||
.slide-divider {
|
||||
position: absolute;
|
||||
left: 50px; top: 58px;
|
||||
width: calc(100% - 100px);
|
||||
height: 2px;
|
||||
z-index: 2;
|
||||
}
|
||||
.slide-divider img {
|
||||
width: 100%; height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
본문 영역: 구분선 아래 ~ 하단 pill 위
|
||||
top: ~65px, bottom: ~60px (pill 영역)
|
||||
→ 가용 높이 약 595px
|
||||
*/
|
||||
.slide-body {
|
||||
position: absolute;
|
||||
left: 40px; top: 65px;
|
||||
width: calc(100% - 80px);
|
||||
height: 590px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
하단 pill: Figma top 1980/2165 × 720 ≈ 659px, height 123 × S ≈ 41px
|
||||
캡슐 border-radius: 50px × S ≈ 17px → 999px (캡슐)
|
||||
pill 배경: 이미지 (두루마리, R16 crop) 또는 CSS gradient
|
||||
*/
|
||||
.slide-footer {
|
||||
position: absolute;
|
||||
left: 50px; bottom: 8px;
|
||||
width: calc(100% - 100px);
|
||||
height: 41px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.slide-footer-bg {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 999px;
|
||||
z-index: 0;
|
||||
}
|
||||
/* pill 배경이 이미지 없을 때 CSS gradient fallback */
|
||||
.slide-footer--css {
|
||||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||||
}
|
||||
|
||||
/*
|
||||
footer 텍스트: Figma 60px × S ≈ 20px, Bold white
|
||||
<em> = 노란색 #fe3
|
||||
*/
|
||||
.slide-footer-text {
|
||||
position: relative; z-index: 1;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.slide-footer-text em {
|
||||
color: #ffee33;
|
||||
font-style: normal;
|
||||
}
|
||||
{% include "styles/tokens/typography.css" %}
|
||||
{% include "styles/tokens/spacing.css" %}
|
||||
{% include "styles/tokens/colors.css" %}
|
||||
{% include "styles/base/slide-base.css" %}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user