diff --git a/apps/site/src/components/Hero.astro b/apps/site/src/components/Hero.astro index 93068ca..45e789b 100644 --- a/apps/site/src/components/Hero.astro +++ b/apps/site/src/components/Hero.astro @@ -55,7 +55,10 @@ const { c, ui } = Astro.props; position: relative; isolation: isolate; overflow: clip; - min-height: min(72dvh, 42rem); + /* 72dvh 는 0.7 화면이었다. 페이지에서 가장 짧은 섹션이 첫인상이라 + 분량 배분이 중요도와 반대였다. 100dvh 로 채우지는 않는다 — + 다음 섹션의 머리가 조금 보여야 스크롤할 것이 있다는 단서가 된다. */ + min-height: min(88dvh, 52rem); display: grid; align-content: center; padding-block: calc(var(--header-h) + var(--space-6)) var(--space-6); @@ -113,16 +116,19 @@ const { c, ui } = Astro.props; margin-inline: auto; padding-inline: var(--gutter); display: grid; - grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); + grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-5) var(--space-6); align-items: center; } .hero-title { - font-size: clamp(var(--step-2), 1.1rem + 2.6vw, var(--step-4)); - line-height: 1.12; + /* step-4(41.5px)는 h2(33px)보다 8px 클 뿐이라 위계가 서지 않았다. + 한때 --display(112px)를 썼다가 배경과 싸워서 줄였는데, 줄이다가 + h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다. */ + font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem); + line-height: 1.08; letter-spacing: var(--tracking-display); - max-width: 16ch; + max-width: 15ch; margin: 0; } [lang="en"] .hero-title { max-width: 18ch; line-height: 1.04; } diff --git a/apps/site/src/i18n/content.ts b/apps/site/src/i18n/content.ts index c37f057..a9908fc 100644 --- a/apps/site/src/i18n/content.ts +++ b/apps/site/src/i18n/content.ts @@ -188,10 +188,7 @@ export const ko: Content = { lead: "AI가 만든 티는 못 만들어서가 아니라 결정을 안 해서 난다. 그 결정을 여섯 단계로 강제하는 스킬.", install: "npx designpaca", installNote: "Node 20.11+ · 설치 대상을 감지해 골라준다", - links: [ - { label: "저장소", href: "https://git.chanpaca.net/yunchan/designpaca" }, - { label: "npm", href: "https://www.npmjs.com/package/designpaca" }, - ], + links: [{ label: "npm", href: "https://www.npmjs.com/package/designpaca" }], stage: { alt: "유리판 여섯 장이 깊이 방향으로 나란히 서 있다. 스크롤하면 카메라가 판을 하나씩 통과하고, 통과한 판은 뒤로 물러난다.", caption: "판 하나가 단계 하나다. 통과 조건을 채우지 못하면 다음 판으로 가지 않는다.", diff --git a/packages/skill/references/tokens.md b/packages/skill/references/tokens.md index e2df4cf..1fa08cd 100644 --- a/packages/skill/references/tokens.md +++ b/packages/skill/references/tokens.md @@ -126,6 +126,33 @@ - 섹션 간격은 **본문 간격의 4배 이상**. 좁으면 페이지가 뭉개진다 - 요소를 정렬할 때 **간격이 아니라 정렬선**을 먼저 맞춰라 +### h1 이 h2 보다 한 단계만 크면 위계가 아니다 + +히어로 제목을 줄이다가 실측에서 이렇게 됐다. + +| | 크기 | | +|---|---|---| +| h1 (히어로) | 41.5px | `--step-4` | +| h2 (섹션) | 33.2px | `--step-3` | + +**8px 차이.** 스케일상으로는 한 단계 위지만 화면에서는 같은 크기로 읽힌다. +페이지에서 가장 중요한 문장이 아홉 개의 섹션 제목과 구별되지 않았다. + +원인은 과잉 교정이었다. 처음에 `--display`(1440px 에서 112px)를 썼다가 +배경 그래픽과 싸워서 줄였는데, 줄이다가 h2 와 붙는 데까지 왔다. +**한 극단에서 도망치다 반대쪽 극단에 도착한 것이다.** + +기준: **히어로 h1 은 섹션 h2 의 1.8~2.2 배.** 그 아래면 위계가 없고, +그 위는 배경·여백과 싸우기 시작한다. 고친 값은 65.4px 로 h2 의 1.97 배다. + +```css +/* 스케일의 마지막 단계를 그대로 쓰지 말고, 히어로 전용 구간을 따로 잡는다 */ +.hero-title { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem); } +``` + +> 확인법: h1 과 h2 를 나란히 놓고 보지 말고 **크기를 재라.** +> 배경이 화려하면 큰 글자도 작아 보여서 눈이 속는다. + ### 제목 다음 간격은 전역에서 한 번 정한다 `h2 { margin: 0 }` 리셋과 `p { margin: 0 0 X }` 를 같이 쓰면 **제목과 본문이 붙는다.**