feat(site): 재료 섹션을 실무 필터 3종으로 다시 만들고 푸터를 제거
Some checks are pending
ci / build (push) Waiting to run
Some checks are pending
ci / build (push) Waiting to run
푸터를 없애라는 지시가 반영돼 있지 않았다. .install-colophon 이 사실상
푸터였고, .install-grid 밖에 있어 padding-inline 을 못 받아 화면 왼쪽 끝에
붙어 있기까지 했다. 제거하고 저장소 링크는 헤더 nav 로 옮겼다.
재료 섹션은 "필터로 질감 만들기"(그레인/굴절/듀오톤)였고 화면에서 아무 말도
하지 않았다. 실무에서 손이 줄어드는 자리로 바꾼다.
- 글자 모양대로 생기는 스크림 — 흰 글자 대비 1.70:1 → 4.79:1 (AA 통과)
- 색각 이상 시뮬레이션 — 상태 배지 셋의 최소 색거리 82 → 2
- 구이(gooey) — 가로로 세어 덩어리 3개 → 1개
세 값 모두 화면을 캡처해 잰 것이다. 처음에는 데모보다 카피를 먼저 썼고,
그 결과 "2.1:1 → 12.4:1" 같은 재지 않은 숫자가 페이지에 실렸다. 전부 교체했다.
backdrop-filter 굴절 데모는 뺐다. feTurbulence 를 변위 지도로 써서 지도가
중립값(128)으로 수렴했고, scale 을 120 까지 올려도 채널차 2.96 이었다.
svg-filters.md 에 "변위 지도는 노이즈가 아니다" 라고 이미 적혀 있었는데
쓰기 전에 읽지 않았다.
섹션 끝의 note 도 삭제했다. color-interpolation-filters 를 명시했다는
문장은 방문자가 그것으로 할 수 있는 일이 없는 내부 자랑이었다.
스킬 내재화:
- svg-filters.md 실무 레시피 3종(스크림/색각/구이) + 구이가 붙는 문턱 계산
+ feTurbulence 변위 지도 실패 기록
- antipatterns.md 데모를 만들기 전에 카피부터 쓰지 마라
+ Playwright animations:'disabled' 가 끝 프레임을 찍는 함정
This commit is contained in:
parent
f7f811ab42
commit
ae2980872b
7 changed files with 473 additions and 256 deletions
|
|
@ -100,6 +100,14 @@ const FAVICON =
|
|||
|
||||
<nav class="nav-main" aria-label={lang === "ko" ? "섹션" : "Sections"}>
|
||||
{nav.items.map((i) => <a href={i.href}>{i.label}</a>)}
|
||||
{/* 페이지를 벗어나는 유일한 링크다. 화살표로 그렇다고 알린다 */}
|
||||
<a class="nav-repo" href={nav.repo} rel="noopener">
|
||||
{nav.repoLabel}
|
||||
<svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true">
|
||||
<path d="M3.5 8.5 8.5 3.5M4.5 3.5h4v4" stroke="currentColor"
|
||||
stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="none" />
|
||||
</svg>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-end">
|
||||
|
|
@ -123,6 +131,7 @@ const FAVICON =
|
|||
</summary>
|
||||
<div class="nav-sheet glass">
|
||||
{nav.items.map((i) => <a href={i.href}>{i.label}</a>)}
|
||||
<a href={nav.repo} rel="noopener">{nav.repoLabel} ↗</a>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
|
@ -225,6 +234,9 @@ const FAVICON =
|
|||
background-color var(--dur-instant) var(--ease-out);
|
||||
}
|
||||
.nav-main a:hover { color: var(--ink); background: var(--glass-tint); }
|
||||
/* 바깥으로 나가는 링크는 섹션 앵커와 같은 무게로 두지 않는다 */
|
||||
.nav-repo { gap: var(--space-1); opacity: 0.72; }
|
||||
.nav-repo:hover { opacity: 1; }
|
||||
|
||||
.header-end {
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue