feat: 한국어 우선 쇼케이스 정리
All checks were successful
ci / build (push) Successful in 51s
release / release (push) Successful in 2m34s

This commit is contained in:
Yun Chan 2026-08-26 18:14:41 +09:00
parent e4087c29f5
commit 2b7fa32b5b
109 changed files with 437 additions and 279 deletions

View file

@ -50,7 +50,7 @@
<main id="main">
<!--
스페시멘 히어로 — 파운드리의 첫 화면은 설명이 아니라 글자다.
'한' 한 글자를 페이지에서 가장 크게, 인주각과 함께.
'한' 한 글자를 페이지에서 가장 크게, 글자 자체의 비례로 보여준다.
-->
<section class="hero" aria-labelledby="hero-h">
<div class="wrap">
@ -107,7 +107,7 @@
<p class="muted">제목·표제용 · 웨이트 600 · 큰 짝에서 벌어짐 0</p>
</header>
<p class="specimen specimen-display" style="font-family: 'MaruBuri', serif">
활자는 붓의 속도를 기억한다
활자는 읽는 리듬을 설계한다
</p>
</article>
</div>
@ -160,7 +160,7 @@
</section>
<!--
활자 케이스 — 연구소의 물성. 금속 활자와 인주.
활자 케이스 — 연구소의 재료. 금속 활자와 편집 도구.
-->
<section id="case" class="section" aria-labelledby="case-h">
<div class="wrap case-grid">
@ -184,13 +184,13 @@
</p>
<figure class="case-photo-b reveal" style="--delay: 80ms">
<img
src="./assets/inkstone.webp"
alt="연구한 먹이 고인 연적과 옆에 놓인 인주 연판"
src="./assets/metaltype.webp"
alt="빛을 받은 금속 활자와 정렬된 활자 케이스"
width="1100"
height="825"
loading="lazy"
/>
<figcaption>먹을 갈고 인주를 찍는 자리 — 시험 인쇄 전</figcaption>
<figcaption>활자 폭과 여백을 비교하는 편집 자리</figcaption>
</figure>
</div>
</div>

View file

@ -143,16 +143,6 @@ a {
margin-top: var(--space-4);
position: relative;
}
/* 인주각 — 글리프 옆에 찍히는 도장 */
.hero-glyph::after {
content: "";
position: absolute;
right: 0.12em;
bottom: 0.18em;
width: 0.11em;
height: 0.11em;
background: var(--accent);
}
.hero-side {
margin-top: var(--space-5);
display: grid;

View file

@ -6,7 +6,7 @@
스페시멘은 Lorem 이 아니라 실제 문장, 테스터는 즉시 반영.
하지 않은 것: Lorem ipsum, 서체 카드 3열, '구독하면 웨이트 전부' 마케팅,
책등 세로 내비. 이유: 활자는 보여주는 것이지 포장하는 게 아니다.
강조 인주빨강 #A63D2F — 인장·CTA에만. 배경 채움은 버튼 하나 뿐.
강조 벽돌빨강 #A63D2F — CTA에만. 배경 채움은 버튼 하나 뿐.
========================================================================== */
:root {
@ -23,15 +23,15 @@
--font-display: "MaruBuri", serif;
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
--surface: #f5f1e8; /* 한지 */
--surface: #f5f1e8; /* 따뜻한 중성 바탕 */
--surface-raised: #ede7d9;
--ink: #26221d;
--ink-muted: #6a635a;
--ink-faint: #948b7c;
--line: #d9d1bf;
--accent: #a63d2f; /* 인주 */
--accent: #a63d2f; /* 강조 */
--accent-ink: #f5f1e8;
--accent-hover: #8a3225; /* 인주 눌린 단계 */
--accent-hover: #8a3225; /* 강조 호버 */
--space-1: 0.25rem;
--space-2: 0.5rem;