6103700d38
designpaca 파이프라인 0~6단계를 실제로 돌려 만들었다. 근거는 research/site-brief.md, 결정 기록은 apps/site/design.md 에 있다. 한 문장 컨셉 - 이 페이지는 designpaca 를 거쳐 만들어졌고, 절차와 형태 수치를 한국어 기준으로 전부 공개한다 번호 없이 순서 표현 (C-07 회피) - 파이프라인 6단계를 번호로 매기면 검출률 3위 슬롭 지문에 걸린다 - 시각: 스파인 위 위치가 순서를 만든다 / 내용: 같은 브리프가 단계마다 변한다 - 의미: <ol role="list"> — 화면에 번호 0개, 보조기술에는 "6개 중 n번째" 멀티링구얼 - / = 한국어, /en/ = 영어. 번역이 아니라 각 판을 따로 썼다 - 언어별 레이아웃이 자기 폰트만 로드한다 (판당 2개) - 조판 섹션은 한국어판에서 주장이고 영어판에서 사례다 실측 - JS 314B (gzip, 예산 50KB) / CSS 3.0KB / HTML 4.4~4.8KB - radius 2종 · backdrop-filter 0개 · 타입 5단계 · 강조색 1개 - 슬롭 지문 grep 9패턴 0건, 정적 하드 게이트 8개 전부 통과 감사에서 걸려 고친 것 - eyebrow 6개 → 상한 ceil(7/3)=3 위반 → 3개로 - clip-path 리빌 → 게이트 #8 위반 → transform 으로 교정 - 구분선 대비 1.30:1 → 입력 테두리용 별칭 분리 (WCAG 1.4.11) - 본문 컬럼 960px → --measure 로. layout.md 예시 코드도 같이 수정
59 lines
1.7 KiB
Text
59 lines
1.7 KiB
Text
---
|
|
import CopyCommand from "./CopyCommand.astro";
|
|
import type { Content } from "../i18n/content";
|
|
|
|
interface Props {
|
|
c: Content["install"];
|
|
ui: Content["ui"];
|
|
}
|
|
const { c, ui } = Astro.props;
|
|
---
|
|
|
|
{/* 다크 밴드 두 곳 중 둘째. 그 외에는 쓰지 않는다 */}
|
|
<section class="full band-inverse install" aria-labelledby="install-h">
|
|
<div class="install-inner">
|
|
<h2 id="install-h">{c.h2}</h2>
|
|
<p class="lead install-lead">{c.lead}</p>
|
|
|
|
<CopyCommand command={c.command} copyLabel={ui.copy} copiedLabel={ui.copied} />
|
|
|
|
<div class="table-scroll targets">
|
|
<table>
|
|
<tbody>
|
|
{
|
|
c.targets.map((t) => (
|
|
<tr>
|
|
<th scope="row">{t.name}</th>
|
|
<td class="mono">{t.path}</td>
|
|
</tr>
|
|
))
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<dl class="cmds">
|
|
{
|
|
c.commands.map((x) => (
|
|
<div class="cmd-row">
|
|
<dt class="mono">{x.cmd}</dt>
|
|
<dd class="muted">{x.what}</dd>
|
|
</div>
|
|
))
|
|
}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.install { display: grid; grid-template-columns: subgrid; }
|
|
.install-inner { grid-column: main; }
|
|
.install-lead { margin-block: var(--space-3) var(--space-5); }
|
|
.targets { margin-top: var(--space-6); }
|
|
.targets th[scope="row"] { font-weight: 400; color: var(--ink); letter-spacing: 0; }
|
|
.cmds { margin: var(--space-5) 0 0; }
|
|
.cmd-row { padding-block: var(--space-3); border-top: 1px solid var(--line); }
|
|
.cmd-row:last-child { border-bottom: 1px solid var(--line); }
|
|
dt { margin-bottom: var(--space-1); }
|
|
dd { margin: 0; font-size: var(--step-0); }
|
|
</style>
|