Skip to content

fix: align contact card edges with the other field panels #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
axisrow merged 7 commits into from
Aug 13, 2026
Merged

fix: align contact card edges with the other field panels #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a2d0bb3
fix: align contact card edges with the other field panels
axisrow Aug 13, 2026
4bc2370
fix: let the copper bars show through the contact card
axisrow Aug 13, 2026
ca2f42c
revert: undo the contact-section rework, keep only the field widening
axisrow Aug 13, 2026
515f517
Merge remote-tracking branch 'origin/main' into ao/axisrow.github.io-…
axisrow Aug 13, 2026
03b46b2
fix: restore the starfield canvas the bot sync dropped
axisrow Aug 13, 2026
343f897
feat: run every field edge to edge
axisrow Aug 13, 2026
7823872
fix: cap experience/about content width and drop stray borders
axisrow Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
document.documentElement.classList.add("js");
}());
</script>
<link rel="stylesheet" href="styles.css?v=unified-field-geometry" />
<link rel="stylesheet" href="styles.css?v=edge-to-edge-fields-2" />
</head>
<body>
<header class="topbar">
Expand Down Expand Up @@ -116,6 +116,9 @@ <h1 id="hero-title">AXISROW</h1>
<!-- PROFILE:STARS:START -->
<section id="stars" class="section section-stars">
<div class="visual-field stars-field reveal">
<div class="stars-field-visual" aria-hidden="true">
<canvas id="stars-starfield" class="effect-canvas" data-effect="starfield"></canvas>
</div>
<div class="stars-field-copy veil-panel">
<p class="eyebrow"><span>01</span> Momentum</p>
<h2 class="section-title">Stars over time.</h2>
Expand Down
38 changes: 13 additions & 25 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,7 +646,7 @@ main {
.visual-field {
position: relative;
left: 50%;
width: min(1440px, calc(100vw - 24px));
width: 100vw;
overflow: visible;
background: transparent;
transform: translateX(-50%);
Expand Down Expand Up @@ -942,18 +942,18 @@ main {
white-space: nowrap;
}

/* Share the full-bleed geometry of every other field (stars, projects, proof,
contact) so the panels line up on the same left/right edges instead of each
carrying its own width and offset. The accent stays in the gradient below,
not in the box position. */
/* Every field runs edge to edge: no side gutter, so no vertical border or
corner radius either -- those only read as a panel when there is page around
them. Horizontal rules stay, matching what contact already did. */
.experience-field,
.about-field {
position: relative;
left: 50%;
width: min(1440px, calc(100vw - 24px));
padding: var(--panel-space);
border: 1px solid var(--veil-border);
border-radius: var(--surface-radius);
width: 100vw;
padding: var(--panel-space) max(var(--panel-space), calc((100vw - var(--max-width)) / 2));
border: 0;
border-block: 1px solid var(--veil-border);
border-radius: 0;
/* Both now host an accent canvas: clip it to the rounded box and give each
panel its own stacking context so the layer cannot escape upwards. */
overflow: hidden;
Expand All @@ -979,7 +979,7 @@ main {
.contact-field {
position: relative;
left: 50%;
width: min(1440px, calc(100vw - 24px));
width: 100vw;
padding: clamp(24px, 5vw, 70px);
overflow: hidden;
isolation: isolate;
Expand Down Expand Up @@ -1695,9 +1695,7 @@ main {
.hero {
min-height: 100svh;
align-items: flex-end;
/* 24px matches the gutter `.section` uses, so the hero copy plane starts
on the same vertical line as every block below it. */
padding: 124px 24px 80px;
padding: 124px 20px 80px;
}

.hero-copy {
Expand Down Expand Up @@ -1966,19 +1964,9 @@ main {
grid-column: 2;
}

/* These three sit inside `.section`, which already carries the 24px page
gutter. Subtracting another 24px on top of it pushed them 36px off the
edge while the copy panels inside the full-bleed fields stayed at 24px.
Span the section instead so every mobile block shares one gutter. */
.experience-field,
.about-field {
width: 100%;
padding: var(--panel-space);
}

.contact-field {
width: 100%;
padding: 0;
width: 100vw;
padding: 12px;
}

.contact-card {
Expand Down
3 changes: 2 additions & 1 deletion tests/site-smoke.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -725,7 +725,8 @@ test('both themes and reduced-motion rendering are present', async () => {
assert.match(css, /@media \(prefers-reduced-motion: reduce\)/);
assert.match(css, /--veil: rgba\(/);
assert.match(css, /\.visual-field\s*\{/);
assert.match(css, /width: min\(1440px, calc\(100vw - 24px\)\)/);
// Fields run edge to edge -- no max width, no side gutter.
assert.match(css, /\.visual-field\s*\{[^}]*width: 100vw;/s);
assert.match(css, /\.proof-field\s*\{/);
assert.match(css, /grid-template-columns: minmax\(360px, 0\.38fr\) minmax\(0, 0\.62fr\)/);
assert.match(css, /\.proof-field\s*\{[^}]*height: 380px;/s);
Expand Down