fix(site): 히어로 h1 의 clamp 하한을 h2 기준으로 잡는다
All checks were successful
ci / build (push) Successful in 20s

데스크톱만 보고 고쳐서 좁은 화면의 위계가 사라져 있었다.
h1 만 vw 에 비례해 줄고 h2 는 고정 스케일이라 둘이 만난다.

  1440px  65.4 / 33.2 = 1.97 배
  1024px  52.5 / 33.2 = 1.58 배
   390px  35.2 / 33.2 = 1.06 배   ← 사실상 같은 크기

하한을 3rem(48px, h2 의 1.45 배)으로 올려 전 구간을 확보했다.
320 / 390 / 768 / 1024 / 1440 에서 1.45 · 1.45 · 1.63 · 1.87 · 2.12 배.

tokens.md 에 "clamp 의 하한은 같이 변하지 않는 값을 기준으로 정한다" 와
최소·중간·최대 폭 세 곳에서 계산해 확인하라는 절차를 기록했다.
This commit is contained in:
Yun Chan 2026-08-21 01:07:47 +09:00
parent 6b2c9ad9d2
commit bd1daa7ec3
2 changed files with 38 additions and 7 deletions

View file

@ -124,8 +124,12 @@ const { c, ui } = Astro.props;
.hero-title {
/* step-4(41.5px)는 h2(33px)보다 8px 클 뿐이라 위계가 서지 않았다.
한때 --display(112px)를 썼다가 배경과 싸워서 줄였는데, 줄이다가
h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다. */
font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem);
h2 와 구별이 안 되는 데까지 왔다. 그 사이 값이 필요하다.
하한이 중요하다. h1 만 vw 에 비례해 줄고 h2 는 고정이라,
하한을 2.2rem 으로 두면 390px 화면에서 35.2px 대 33.2px —
1.06 배로 사실상 같은 크기가 된다. 하한은 h2 기준으로 정한다. */
font-size: clamp(3rem, 1.9rem + 3.1vw, 4.4rem);
line-height: 1.08;
letter-spacing: var(--tracking-display);
max-width: 15ch;