fix: remove opacity modifiers on Header active badges to satisfy WCAG 2.1 AA contrast (R-9.6) and update DESIGN.md
This commit is contained in:
@@ -66,13 +66,13 @@ export default function Header() {
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
|
||||
active
|
||||
? "bg-vermillion text-white shadow-sm dark:bg-vermillion dark:text-ivory font-bold"
|
||||
? "bg-vermillion text-white shadow-sm dark:text-ivory font-bold"
|
||||
: "text-ink hover:text-vermillion hover:bg-paper/60"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`font-display text-[0.62rem] ${
|
||||
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
|
||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
||||
}`}
|
||||
>
|
||||
{item.no}
|
||||
@@ -126,14 +126,14 @@ export default function Header() {
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
|
||||
active
|
||||
? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm"
|
||||
? "bg-vermillion text-white font-bold dark:text-ivory shadow-sm"
|
||||
: "text-ink hover:bg-paper/60"
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-baseline gap-3">
|
||||
<span
|
||||
className={`font-display text-xs ${
|
||||
active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
|
||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
||||
}`}
|
||||
>
|
||||
{item.no}
|
||||
@@ -142,7 +142,7 @@ export default function Header() {
|
||||
</span>
|
||||
<span
|
||||
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
|
||||
active ? "text-white/90 dark:text-ivory/90" : "text-ink-mute"
|
||||
active ? "text-white dark:text-ivory" : "text-ink-mute"
|
||||
}`}
|
||||
>
|
||||
{item.en}
|
||||
|
||||
@@ -259,7 +259,7 @@ HeroComposition(props: { className?: string })
|
||||
</Reveal>
|
||||
```
|
||||
|
||||
> **함께 쓰는 관용구:** 모든 페이지는 `PageHeader`(`components/PageHeader.tsx`)로 시작
|
||||
> **함께 쓰는 관용구:** 모든 페이지는 페이지 섹션 헤더
|
||||
> → (선택) `Marquee` 밴드 1개 → 통계 밴드(`Counter` ×3, `gap-px bg-line sm:grid-cols-3`)
|
||||
> → `Reveal`+`SectionLabel` 로 여는 콘텐츠 섹션. 행 내 스태거는 `delay={i * 80}`~`120`.
|
||||
|
||||
@@ -269,17 +269,17 @@ HeroComposition(props: { className?: string })
|
||||
|
||||
| 라우트 | index | 잡지에서의 역할 | 특징 |
|
||||
| --- | --- | --- | --- |
|
||||
| `/intro` | 1 | **커버 스프레드** | 거대 한/영 히어로 + `HeroComposition` 아트, 키워드 `Marquee`, 통계, 풀쿼트, 5대 연구 기둥 3+2 매거진 조판 그리드 |
|
||||
| `/` | 1 | **커버 스프레드** | 거대 한/영 히어로 + `HeroComposition` 아트, Research Project PageView(3대 과제), 4대 핵심 분야 조판 그리드 |
|
||||
| `/members` | 2 | **기고자 페이지(Contributors)** | 인원 통계 카운터, PI 피처 스프레드, 박/석/학부 그룹을 헤어라인 그리드 + 교차 강조색으로 |
|
||||
| `/publications` | 3 | **목차/서지(Index & Bibliography)** | 서지 `Marquee`, 파생 통계, 번호 매긴 편집 목록(저널=vermillion, 학회=cobalt) |
|
||||
| `/lectures` | 4 | **강의 카탈로그(Course catalog)** | 3개 강의 카드(테두리·강조색 호버 면), 코드·KO/EN 제목·레벨 칩 |
|
||||
| `/lectures` | 4 | **강의 카탈로그(Course catalog)** | 45개 학기 학부·대학원 개설 교과목 이력 |
|
||||
| `/standardization` | 5 | **표준화 바이라인(Standards byline)** | 기구 `Marquee`, 통계, 기관별 2열 기여 그리드, 기관마다 강조색 배정 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 새 페이지 추가 체크리스트
|
||||
|
||||
1. **마스트헤드:** `PageHeader` 로 시작 — `ko`, `en`, 라우트 `index`(intro 1 … standardization 5) 부여.
|
||||
1. **내비게이션 배지 & 마스트헤드:** `Header.tsx` 활성 배지(`bg-vermillion text-white dark:text-ivory`, `aria-current="page"`)와 페이지 타이틀 섹션으로 시작.
|
||||
2. **콘텐츠 분리:** 편집 데이터 전부를 파일 상단 `// CUSTOMIZATION HOOK` 배열에 둔다.
|
||||
3. **레이아웃:** 헤어라인 그리드 관용구(`gap-px bg-line` + 자식 `bg-ivory`)로 구성, 섹션은 `border-b border-ink` 로 구획.
|
||||
4. **모션:** 등장 가치가 있는 블록을 `Reveal` 로 감싸고, §2 페어링 규칙대로 vermillion/cobalt 를 교차 배정.
|
||||
|
||||
Reference in New Issue
Block a user