fix(site): 히어로 h1 의 clamp 하한을 h2 기준으로 잡는다
All checks were successful
ci / build (push) Successful in 20s
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:
parent
6b2c9ad9d2
commit
bd1daa7ec3
2 changed files with 38 additions and 7 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue