feat: initialize IoT Standards Lab website project with MAM skills & onboarding guide
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
# Structural Fix Pass — refer_landing_page
|
||||
|
||||
**Date:** 2026-06-16
|
||||
**Task:** t_6707ec77 — "Fix overlapping elements and spacing collisions"
|
||||
**Source catalogue:** docs/LAYOUT_AUDIT.md (17 issues)
|
||||
**Scope:** structural / layout fixes only. Typography (font sizes, line heights, display scaling) is the previous task's responsibility and is left untouched.
|
||||
|
||||
---
|
||||
|
||||
## Pass summary
|
||||
|
||||
| Catalogue # | Severity | File | Issue | Status |
|
||||
|---|---|---|---|---|
|
||||
| 1 | 🔴 | lectures, standardization, intro | `border-current/30`, `border-current/20` fall back to a fixed gray instead of inheriting `currentColor` | ✅ **resolved by prior typography pass** (replaced with `border-ink/30` + `group-hover:border-ivory/40`) |
|
||||
| 2 | 🔴 | HeroComposition | `node-pulse` scales from SVG origin not circle center — drifts in older Firefox | ✅ **resolved by prior typography pass** (added `transformBox: "fill-box"`, `transformOrigin: "center"` inline) |
|
||||
| 3 | 🔴 | HeroComposition | "QUIC · STREAMS" bottom-right text (y=334) overlaps the 4th stream's curve body (y=290-380) | ✅ **resolved in this pass** — see below |
|
||||
| 5 | 🟠 | Footer | `mt-24` × `flex-1` main creates 6rem dead space on short pages | ✅ **resolved by prior typography pass** (now `mt-0 lg:mt-8`) |
|
||||
| 6 | 🟠 | PageHeader `<h1>` | No `break-keep` for long Korean titles, breaks mid-syllable | ✅ **resolved by prior typography pass** (`break-keep text-balance` added) |
|
||||
| 7 | 🟠 | Intro "Standards" | At 9rem cap, overflows col-span-7 column at 1280+ | ✅ **resolved by prior typography pass** (`display` capped at 7rem in `tailwind.config.ts`) |
|
||||
| 8 | 🟠 | Members group 3 | 2 cards in `lg:grid-cols-3` → ghost cell with `bg-line` showing | ✅ **resolved by prior typography pass** (grid now `sm:grid-cols-2` only — uniform 2-col) |
|
||||
| 9 | 🟠 | Reveal no-JS | No fallback for the `.reveal { opacity: 0 }` rule — blank page if JS fails | ✅ **resolved by prior typography pass** (`<noscript>` style block added in `app/layout.tsx`) |
|
||||
| 10 | 🟡 | PageHeader `display` fallback | When `display` prop absent, long `en` overflows at 9rem | ✅ **resolved by prior typography pass** (fallback now uses `display-sm`) |
|
||||
| 11 | 🟡 | Counter year 2026 | Year ticks 0→2026 (jarring for a year value) | ✅ **resolved by prior typography pass** (Counter gained `static` prop, year passed `static: true`) |
|
||||
| 13 | 🟡 | Counter magnitudes | "2026" 4× wider than "2"/"4" → visual imbalance | ✅ **resolved by prior typography pass** (year uses `display-sm`, others use full `display`) |
|
||||
| 4, 12, 14 | — | — | Verified fine on audit; no fix | — |
|
||||
| 15, 16, 17 | 🟡 | Header sticky flex / h-[4.25rem] / SectionLabel text-sm | Polish items — not structural defects | ⏭ **out of scope** (polish, not structural) |
|
||||
|
||||
**Net result: 1 structural fix in this pass (#3); 10 other catalogue items were already addressed by the prior typography pass (t_612a91e3).**
|
||||
|
||||
---
|
||||
|
||||
## Fix #3 — HeroComposition bottom-right text / stream overlap
|
||||
|
||||
**File:** `app/intro/_components/HeroComposition.tsx`
|
||||
**Catalogue line:** 59-74 (verified by SVG geometry: stream 4 control point at `(240, 380)`, text was at `y=334` — same y-band).
|
||||
|
||||
### Before
|
||||
|
||||
```tsx
|
||||
<text x="20" y="34" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
|
||||
MCM · MESH
|
||||
</text>
|
||||
<text
|
||||
x="360"
|
||||
y="334"
|
||||
textAnchor="end"
|
||||
fill="#0A0A0A"
|
||||
fontSize="11"
|
||||
fontWeight="600"
|
||||
letterSpacing="2"
|
||||
>
|
||||
QUIC · STREAMS
|
||||
</text>
|
||||
```
|
||||
|
||||
The "QUIC · STREAMS" label sat at `y=334`, inside the y-band where the four QUIC stream curves sweep (y=250-380 with control points reaching y+40). The 4th stream (start y=340, control point y=380) crossed directly through the text region.
|
||||
|
||||
### After
|
||||
|
||||
```tsx
|
||||
{/* Annotations — placed in the top corners, clear of the stream
|
||||
curves and the node mesh. The bottom strip (y > 220) is reserved
|
||||
for the four QUIC streams (y = 250, 280, 310, 340 with control
|
||||
points reaching y +40 = 380), so a bottom-anchored text would
|
||||
collide with the 4th stream's curve. See LAYOUT_AUDIT #3. */}
|
||||
<text x="20" y="24" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
|
||||
MCM · MESH
|
||||
</text>
|
||||
<text
|
||||
x="360"
|
||||
y="24"
|
||||
textAnchor="end"
|
||||
fill="#0A0A0A"
|
||||
fontSize="11"
|
||||
fontWeight="600"
|
||||
letterSpacing="2"
|
||||
>
|
||||
QUIC · STREAMS
|
||||
</text>
|
||||
```
|
||||
|
||||
Both labels now sit in the top corners (symmetric mirror positions) at `y=24`, which is:
|
||||
- Clear of the MCM node mesh (nodes span y=60 to y=240)
|
||||
- Clear of the QUIC stream curves (start at y=250)
|
||||
- Inside the frame rect (frame at y=6, strokeWidth 1.5 → effective top edge at y=6.75)
|
||||
|
||||
### Verification
|
||||
|
||||
- `curl http://localhost:4511/intro` → HTTP 200, served HTML contains both labels at the new `y="24"` position.
|
||||
- No other selector / file was touched by this pass.
|
||||
|
||||
---
|
||||
|
||||
## Items not changed (rationale)
|
||||
|
||||
- **#4, #12, #14** — audit verified them as non-issues. No edit needed.
|
||||
- **#15** — sticky-header inside a flex column. The standard `body flex flex-col; main flex-1; header sticky` pattern is working in every modern browser (Chrome 84+, Safari 13.1+, Firefox 90+). The "fix" suggestions in the audit (e.g. changing body to `block` + `margin-top: auto` on main) trade one browser-version edge case for another. Not a real structural defect; leaving as-is.
|
||||
- **#16, #17** — explicit polish items (`h-[4.25rem]` is fine for the 2-line brand; `text-sm` on the corner label is editorial choice). Out of scope for a structural pass.
|
||||
|
||||
---
|
||||
|
||||
## Diff summary (this pass only)
|
||||
|
||||
```
|
||||
app/intro/_components/HeroComposition.tsx
|
||||
- <text x="20" y="34" ...>MCM · MESH</text> → <text x="20" y="24" ...>
|
||||
- <text x="360" y="334" ...>QUIC · STREAMS</text> → <text x="360" y="24" ...>
|
||||
+ explanatory comment block (geometry rationale + audit reference)
|
||||
```
|
||||
|
||||
**Files modified by this pass: 1**
|
||||
**Catalogue issues resolved by this pass: 1** (#3, the only remaining 🔴 that the prior typography pass did not already fix)
|
||||
**Catalogue issues resolved cumulatively (this pass + prior typography pass): 11 of 17**
|
||||
Reference in New Issue
Block a user