fix: align contact card edges with the other field panels - #36
Conversation
The previous commit unified the outer field geometry, but contact stayed visually off: it is the only field holding a separately positioned card (width: min(940px, 82%) + margin-left: 4%), which left ~285px of dead space on its right at 1440px. Give .contact-card the field's full content box and drop the field's own clamp() padding so the card border sits on the field edge, exactly like the experience/about panels. The mobile overrides that hand-reset these values are now redundant with the base rules and are removed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
Widening the card to the full field box covered the copperBars canvas entirely: the bars used to be visible only in the dead space the narrow card left on its right, so removing that gap removed the effect. Fade the card background towards the bottom-right instead of filling it with an opaque --veil, matching how the experience/about panels expose their own canvases. The gradient targets the same focus point as the visual's mask (78% 72%), so the bars read across the panel while the copy side keeps a near-opaque backing. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
The task was to widen the fields. The two follow-up commits went past that into the contact section -- stretching .contact-card to the field box, then reworking the copperBars layer and the card fill to compensate -- and broke a composition that was fine to begin with. Reset styles.css and index.html to their pre-#35 state and reapply only the original change: .experience-field/.about-field move from a 1340px box with per-panel offsets to the min(1440px, 100vw - 24px) box every other field already uses. The two media blocks that existed solely to cancel those offsets go with them. The contact section is untouched: the card keeps its width and offset, and the copper bars keep showing in the gap beside it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
…25/fix/unified-field-geometry
The 2026-08-13 sync regenerated the PROFILE:STARS block from a stale copy of the template and removed .stars-field-visual along with the starfield canvas, so main now renders six accents instead of seven. Merging main into this branch pulled that deletion in and turned the smoke test red. Put the three lines back, byte-identical to profile/sync/templates/stars.html.j2, which still carries them. This is exactly the drift the 'starfield canvas lives in the bot-managed template' test exists to catch. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
The fields carried a 12px side gutter (min(1440px, 100vw - 24px)) that read as a margin around each panel. Drop the cap so all six -- stars, projects, proof, experience, about, contact -- span the full viewport width. With no page showing beside them, the vertical borders and corner radius on experience/about no longer read as a panel edge, so those become border-block like contact already was. Mobile loses its own calc(100% - 24px) gutter for the same reason. html already carries overflow-x: clip, so 100vw does not introduce sideways scrolling. Measured at a 1440px viewport: every field is L=0 R=1440 W=1440, document scrollWidth stays 1440. The smoke test pinned the old max-width formula; it now pins width: 100vw. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
🔍 Local review (cycle 1) — round aee53fd4-6114-4c95-8f94-f1049b0d48a4Reviewed locally (
Note: the PR description/title describe only a contact-card alignment fix, but the actual diff also makes the Experience/About panels edge-to-edge (unrelated to contact) — this broader change is what produced the two FIX findings above. |
The edge-to-edge rewrite widened .experience-field/.about-field to 100vw without an inner max-width, so timeline/about content stretched past the site's normal content column on wide viewports. Both panels also kept veil-panel's border-inline/border-radius since border-block never cleared them, contradicting the edge-to-edge design intent. - Cap horizontal padding at max(--panel-space, half the max-width gutter), matching the pattern .projects-field already uses. - Explicitly reset border/border-radius before re-adding border-block. - Drop the now-dead mobile override that duplicated the unconditional base rule. - Bump styles.css?v=edge-to-edge-fields-2. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
🔍 Local review (cycle 2) — round c0168b9f-bdbe-442a-90da-789a107e64cfReviewed locally (
Codex verdict: approve, no findings. Result: clean round — no FIX/UNVERIFIED verdicts, every configured reviewer answered. Cycle 2 is final. |
📋 Review summary — all cycles
Totals: 2 FIX (both resolved), 0 SKIP, 5 IRRELEVANT, 0 UNVERIFIED. Note: PR title/body describe only a contact-card alignment fix, but the diff also makes Experience/About panels edge-to-edge — that broader scope is what produced the two FIX findings above (both now fixed). |
Проблема
PR #35 унифицировал внешнюю геометрию полей, но Contact визуально продолжал выбиваться. Причина — внутренняя раскладка, которую #35 не трогал:
.contact-fieldединственное поле, внутри которого сидит отдельно спозиционированная карточка:На 1440px это оставляло ~285px мёртвого места справа от карточки.
Изменения
.contact-card—width: 100%, убранmargin-left: 4%: карточка занимает контентный бокс поля целиком..contact-field—padding: 0вместоclamp(24px, 5vw, 70px), чтобы рамка карточки села на край поля, ровно как у панелей Experience/About..contact-card { width: 100%; margin-left: 0 }и.contact-field { padding: 0 }) — после правки они дублируют базовые правила.styles.css?v=unified-field-geometry-2.Типографика не тронута:
h2и параграфы внутри карточки уже ограниченыmax-width: 880px/660px.Проверка
npm test— 36/36 зелёные. Ни.contact-card, ни строкаstyles.css?v=в тестах не запиннены..contact-field-visualпозиционируется черезinset: 0от поля, а не от контентной области, — убранный паддинг на слой эффекта не влияет.🤖 Generated with Claude Code
https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH