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>
134 lines
3.3 KiB
CSS
134 lines
3.3 KiB
CSS
/* ══════════════════════════════════════
|
|
slide-base.css
|
|
══════════════════════════════════════
|
|
슬라이드 공통 프레임 스타일.
|
|
slide-base.html에서 분리.
|
|
직접값 대신 토큰 변수 참조.
|
|
══════════════════════════════════════ */
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
background: var(--color-bg-page);
|
|
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: var(--color-bg);
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* ── 배경 ── */
|
|
.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;
|
|
}
|
|
|
|
/* ── 대목차 제목 ── */
|
|
.slide-title {
|
|
position: absolute;
|
|
left: var(--slide-title-left);
|
|
top: var(--slide-title-top);
|
|
width: calc(100% - 104px);
|
|
font-weight: var(--weight-slide-title);
|
|
font-size: var(--font-slide-title);
|
|
line-height: var(--lh-slide-title);
|
|
background-image: linear-gradient(180deg, var(--color-slide-title-from) 0%, var(--color-slide-title-to) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 2px #322c1e;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ── 구분선 ── */
|
|
.slide-divider {
|
|
position: absolute;
|
|
left: 50px;
|
|
top: var(--slide-divider-top);
|
|
width: calc(100% - 100px);
|
|
height: 2px;
|
|
z-index: 2;
|
|
}
|
|
.slide-divider img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* ── 본문 영역 ── */
|
|
.slide-body {
|
|
position: absolute;
|
|
left: var(--slide-padding-x);
|
|
top: var(--slide-body-top);
|
|
width: calc(100% - var(--slide-padding-x) * 2);
|
|
height: var(--slide-body-height);
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── 하단 footer pill ── */
|
|
.slide-footer {
|
|
position: absolute;
|
|
left: 50px;
|
|
bottom: var(--slide-footer-bottom);
|
|
width: calc(100% - 100px);
|
|
height: var(--slide-footer-height);
|
|
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;
|
|
}
|
|
.slide-footer--css {
|
|
background: linear-gradient(90deg, var(--color-footer-bg-from) 5%, var(--color-footer-bg-mid) 50%, var(--color-footer-bg-to) 95%);
|
|
}
|
|
|
|
/* ── footer 텍스트 ── */
|
|
.slide-footer-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: var(--font-footer);
|
|
font-weight: var(--weight-footer);
|
|
line-height: var(--lh-footer);
|
|
color: var(--color-footer-text);
|
|
text-align: center;
|
|
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.slide-footer-text em {
|
|
color: var(--color-footer-accent);
|
|
font-style: normal;
|
|
}
|