diff --git a/apps/site/src/components/Install.astro b/apps/site/src/components/Install.astro index b2d531e..6983f89 100644 --- a/apps/site/src/components/Install.astro +++ b/apps/site/src/components/Install.astro @@ -30,7 +30,7 @@ const { c, ui } = Astro.props;
{ c.commands.map((x) => ( -
+
{x.cmd}
{x.what}
@@ -70,8 +70,10 @@ const { c, ui } = Astro.props; .cmd-row { display: grid; gap: var(--space-1); - padding: var(--space-3); + padding-block: var(--space-3); + border-top: 1px solid var(--line); } + .cmd-row:last-child { border-bottom: 1px solid var(--line); } dt { color: var(--accent); } dd { margin: 0; font-size: var(--step-0); } diff --git a/apps/site/src/components/Materials.astro b/apps/site/src/components/Materials.astro index adc9c4d..47ffec7 100644 --- a/apps/site/src/components/Materials.astro +++ b/apps/site/src/components/Materials.astro @@ -23,11 +23,7 @@ const { c } = Astro.props; { c.tiles.map((t, i) => (
  • -
    -
    - -
    -
    +

    {t.name}

    {t.how}

    {t.cost}

    @@ -131,12 +127,12 @@ const { c } = Astro.props; .tile:nth-child(1) .swatch { aspect-ratio: 16 / 11; } .tile:nth-child(n + 2) .swatch { aspect-ratio: 16 / 6; } .tile { display: grid; gap: var(--space-2); align-content: start; } - .tile .shell { box-shadow: var(--glass-hi), var(--shadow-2); } - .tile .core { overflow: hidden; } /* 필터를 먹일 대상. 같은 도형에 서로 다른 재질을 입힌다 */ .swatch { aspect-ratio: 4 / 3; + border-radius: var(--radius-md); + overflow: hidden; background: repeating-linear-gradient( 58deg, diff --git a/apps/site/src/components/Metrics.astro b/apps/site/src/components/Metrics.astro index b680f88..6d2b4d4 100644 --- a/apps/site/src/components/Metrics.astro +++ b/apps/site/src/components/Metrics.astro @@ -7,73 +7,107 @@ const feature = c.items.filter((m) => m.feature); const rest = c.items.filter((m) => !m.feature); --- -{/* 레이아웃 패밀리: 벤토. 항목 수만큼 셀이 있고 빈 칸이 없다 */} +{/* + 레이아웃 패밀리: 수치 조판. + 카드에 담지 않는다. 숫자가 크기와 정렬선으로 스스로 위계를 만든다. + 카드는 elevation 이 진짜 위계를 나를 때만 쓴다는 규칙을 여기서 지킨다. +*/}
    -

    {c.eyebrow}

    -

    {c.h2}

    +
    +

    {c.eyebrow}

    +

    {c.h2}

    +

    {c.lead}

    -
    +
    { feature.map((m, i) => ( -
    - {m.value} - {m.label} - {m.note} -
    - )) - } - { - rest.map((m, i) => ( -
    - {m.value} - {m.label} - {m.note} +
    + {m.value} + {m.label} + {m.note}
    )) } + +
    + { + rest.map((m, i) => ( +
    +
    {m.label}
    +
    {m.value}
    +
    {m.note}
    +
    + )) + } +

    {c.caveat}

    diff --git a/apps/site/src/components/Preflight.astro b/apps/site/src/components/Preflight.astro index 85e66db..eb0158a 100644 --- a/apps/site/src/components/Preflight.astro +++ b/apps/site/src/components/Preflight.astro @@ -5,7 +5,11 @@ interface Props { c: Content["preflight"]; } const { c } = Astro.props; --- -{/* 레이아웃 패밀리: 2열 대비. 왼쪽이 걸린 것, 오른쪽이 고친 것 */} +{/* + 레이아웃 패밀리: 로그. + 걸린 것과 고친 것이 한 줄에서 이어진다. 상자에 담지 않는다. + 왼쪽 세로선이 로그라는 형식을 만든다. +*/}

    {c.h2}

    {c.lead}

    @@ -13,11 +17,8 @@ const { c } = Astro.props;
    { c.items.map((i, idx) => ( -
    -

    -

    +
    +

    {i.caught}

    {i.fixed}

    )) @@ -28,43 +29,51 @@ const { c } = Astro.props;
    diff --git a/apps/site/src/components/Rules.astro b/apps/site/src/components/Rules.astro index 98f2cf9..4769a81 100644 --- a/apps/site/src/components/Rules.astro +++ b/apps/site/src/components/Rules.astro @@ -5,7 +5,11 @@ interface Props { c: Content["rules"]; } const { c } = Astro.props; --- -{/* 레이아웃 패밀리: 정의 목록. 규칙이 크고 근거가 옆에 붙는다 */} +{/* + 레이아웃 패밀리: 어긋난 목록. + 규칙은 왼쪽 정렬선에, 근거는 오른쪽으로 밀어 흘린다. + 카드도 상자도 없다. 어긋남 자체가 두 층위를 구분한다. +*/}

    {c.h2}

    {c.lead}

    @@ -13,7 +17,7 @@ const { c } = Astro.props;
    { c.items.map((r, i) => ( -
    +
    {r.rule}
    {r.why}
    @@ -23,30 +27,36 @@ const { c } = Astro.props;
    diff --git a/apps/site/src/i18n/content.ts b/apps/site/src/i18n/content.ts index 8e9c00f..a42a4a3 100644 --- a/apps/site/src/i18n/content.ts +++ b/apps/site/src/i18n/content.ts @@ -245,7 +245,7 @@ export const ko: Content = { { label: "three.js 추가분", value: "185KB", note: "재료 섹션이 가까워질 때만 받는다. 초기 번들에는 없다" }, { label: "슬롭 지문", value: "0건", note: "9개 패턴 grep" }, { label: "radius 어휘", value: "2종", note: "10px, 20px. 셸은 파생값" }, - { label: "반투명 패널", value: "29개", note: "유리가 이 페이지의 주제다. 대신 스크롤 콘텐츠에 필터를 걸지 않고 고정 광원 위에 얹었다" }, + { label: "반투명 패널", value: "5개", note: "29개까지 늘렸다가 걷어냈다. 유리는 정말 떠 있어야 하는 것에만 남겼다" }, { label: "타입 단계", value: "5단계", note: "디스플레이는 스케일 밖" }, { label: "폰트 패밀리", value: "2개", note: "언어판마다 자기 것만 받는다" }, { label: "강조색", value: "1개", note: "라이트와 다크는 같은 색의 대응값" }, @@ -258,6 +258,11 @@ export const ko: Content = { h2: "이 페이지를 만들며 실제로 걸린 것", lead: "남을 검사한 결과가 아니라 자신을 검사한 결과다.", items: [ + { + caught: "유리 카드를 29개 뿌렸다. 재질만 바뀌었을 뿐 구조는 카드 나열 그대로였다", + fixed: + "우리 규칙이 '카드는 elevation 이 진짜 위계를 나를 때만'이라고 정해두고 있었다. 수치는 조판으로, 규칙은 어긋난 목록으로, 감사 기록은 로그로 바꿨다. 유리는 5개만 남았다.", + }, { caught: "유리에 SVG 굴절을 얹었더니 흐림까지 통째로 사라졌다", fixed: @@ -292,7 +297,7 @@ export const ko: Content = { fixed: "그리드의 본문 폭을 토큰에 묶었다. 스킬 문서의 예시 코드도 같이 고쳤다.", }, ], - note: "일곱 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 정적 검사로 잡힌 것은 하나도 없다. 전부 실제로 렌더해서 재고 나서야 나왔다.", + note: "여덟 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 마지막 한 건은 기계가 아니라 사람이 잡았다. 카드가 전형적이라는 말 한 줄이었다.", }, typography: { eyebrow: "한글 조판", @@ -434,7 +439,7 @@ export const en: Content = { { label: "three.js payload", value: "185KB", note: "fetched only as the materials section approaches. Never in the initial bundle" }, { label: "slop fingerprints", value: "0", note: "9 patterns grepped" }, { label: "radius vocabulary", value: "2", note: "10px and 20px. The shell is derived" }, - { label: "translucent panels", value: "29", note: "glass is the subject here. No filter sits on scrolling content, only on top of fixed light" }, + { label: "translucent panels", value: "5", note: "grew to 29 before being pulled back. Glass stayed only where something has to float" }, { label: "type scale steps", value: "5", note: "the display size sits outside the scale" }, { label: "font families", value: "2", note: "each language loads only its own" }, { label: "accent colours", value: "1", note: "light and dark are the same colour" }, @@ -447,6 +452,11 @@ export const en: Content = { h2: "What this page actually got caught on", lead: "Not the result of auditing someone else. The result of auditing itself.", items: [ + { + caught: "29 glass cards. Only the material had changed. The structure was still a row of cards", + fixed: + "Our own rule says cards are for when elevation carries real hierarchy. Figures became typography, rules became an offset list, the audit became a log. Five panels of glass remain.", + }, { caught: "Adding SVG refraction to the glass removed the blur along with it", fixed: @@ -482,7 +492,7 @@ export const en: Content = { "Bound the grid's main column to the token. The skill's own example code was wrong too, so that got fixed as well.", }, ], - note: "All seven were caught while building this page, and fixed after being caught. Not one was found by static checking. Every one of them needed a real render and an actual measurement.", + note: "All eight were caught while building this page, and fixed after being caught. The last one came from a person, not a checker. One line: the cards look generic.", }, typography: { eyebrow: "Your language is probably not Latin", diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css index 4d3b11c..a6513cc 100644 --- a/apps/site/src/styles/base.css +++ b/apps/site/src/styles/base.css @@ -110,6 +110,13 @@ h1, h2, h3 { } h1 { font-size: var(--display); font-weight: 660; } h2 { font-size: var(--step-3); } + +/* 섹션 제목만 본문 정렬선 왼쪽으로 나간다. 같은 양을 페이지 전체에서 반복한다 */ +@media (min-width: 1100px) { + .section > h2, + .section > .eyebrow, + .section > .head { margin-left: calc(var(--space-6) * -1); } +} h3 { font-size: var(--step-1); } p { margin: 0 0 var(--space-3); text-wrap: pretty; }