Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: match mobile Our Work design

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 22:01:47 -05:00
parent ca8f5c939d
commit 6206761573
2 changed files with 139 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+85
View File
@@ -451,6 +451,91 @@ test("mobile contact card render remains stable", async ({ page }) => {
);
});
test("mobile Our Work contains both reference images", async ({ page }) => {
await page.goto(homepage);
const block = await getBox(page.locator(".our-work"));
const left = await getBox(page.locator(".our-work__media--left"));
const bottom = await getBox(page.locator(".our-work__media--bottom"));
const vector = await getBox(page.locator(".our-work__vector img"));
expectNear(block.height, 888, 12);
expectNear(left.width, 189, 5);
expect(bottom.width).toBeGreaterThanOrEqual(335);
expect(bottom.x).toBeGreaterThanOrEqual(60);
expect(bottom.x + bottom.width).toBeLessThanOrEqual(402);
expectNear(vector.width, 474, 4);
expectNear(vector.y - block.y, 160, 3);
});
test("mobile Our Work follows the reference content and overlap order", async ({
page,
}) => {
await page.goto(homepage);
const block = await getBox(page.locator(".our-work"));
const content = await getBox(page.locator(".our-work__content"));
const left = await getBox(page.locator(".our-work__media--left"));
const bottom = await getBox(page.locator(".our-work__media--bottom"));
const paragraph = page.locator(".our-work__content p");
const paragraphBox = await getBox(paragraph);
const buttons = page.locator(".our-work .button");
const primary = await getBox(buttons.nth(0));
const secondary = await getBox(buttons.nth(1));
expectNear(content.x - block.x, 32, 3);
expectNear(content.y - block.y, 68, 8);
expectNear(paragraphBox.y - block.y, 146, 4);
expect(content.y).toBeLessThan(left.y);
expectNear(left.y - block.y, 428, 12);
expectNear(bottom.y - block.y, 595, 12);
expectNear(primary.y, secondary.y, 2);
expectNear(primary.y - block.y, 321, 4);
expectNear(primary.height, 44, 2);
expectNear(secondary.height, 44, 2);
await expect(paragraph).toHaveCSS("text-wrap", "wrap");
});
test("mobile Our Work remains contained at responsive endpoints", async ({
page,
}) => {
for (const width of [320, 767]) {
await page.setViewportSize({ width, height: 900 });
await page.goto(homepage);
const block = await getBox(page.locator(".our-work"));
const left = await getBox(page.locator(".our-work__media--left"));
const bottom = await getBox(page.locator(".our-work__media--bottom"));
const buttons = page.locator(".our-work .button");
const primary = await getBox(buttons.nth(0));
const secondary = await getBox(buttons.nth(1));
for (const item of [left, bottom, primary, secondary]) {
expect(item.x).toBeGreaterThanOrEqual(block.x);
expect(item.x + item.width).toBeLessThanOrEqual(
block.x + block.width,
);
}
expectNear(primary.y, secondary.y, 2);
expect(left.y).toBeLessThan(bottom.y);
}
});
test("Our Work restores its tablet layout at 768px", async ({ page }) => {
await page.setViewportSize({ width: 768, height: 900 });
await page.goto(homepage);
const block = page.locator(".our-work");
const inner = block.locator(".our-work__inner");
const vector = block.locator(".our-work__vector img");
await expect(block).toHaveCSS("min-height", "0px");
await expect(block).toHaveCSS("padding-top", "64px");
await expect(inner).toHaveCSS("padding-left", "38.4px");
await expect(vector).toHaveCSS("width", "768px");
});
test("mobile recent posts exposes previous and next controls", async ({
page,
}) => {
views/blocks/our-work/our-work.css
+54 -27
View File
@@ -1,13 +1,12 @@
/* Our Work block styles */
.our-work {
background:
linear-gradient(
90deg,
var(--color-cwc-blue-01) 0%,
var(--color-cwc-blue-02) 52%,
var(--color-cwc-blue-02) 100%
);
background: linear-gradient(
90deg,
var(--color-cwc-blue-01) 0%,
var(--color-cwc-blue-02) 52%,
var(--color-cwc-blue-02) 100%
);
border-bottom: 16px solid var(--color-secondary);
color: var(--color-white);
/* margin-bottom: clamp(4rem, 7vw, 5.5rem); */
@@ -56,7 +55,7 @@
.our-work__content {
grid-area: content;
margin-lefT: 4rem;
margin-left: 4rem;
max-width: 46.75rem;
}
@@ -190,23 +189,35 @@
}
}
@media (max-width: 640px) {
@media (max-width: 767px) {
.our-work {
margin-bottom: 2rem;
padding-top: 3.25rem;
min-height: clamp(44rem, 220.9vw, 55.5rem);
padding-top: 4.25rem;
}
.our-work__vector img {
height: 118%;
max-width: none;
object-fit: cover;
object-position: 85% center;
transform: translateY(clamp(8rem, 39.8vw, 10rem));
width: 118%;
}
.our-work__inner {
gap: 1.4rem;
gap: 0;
padding-inline: 2rem !important;
}
.our-work__content {
max-width: 20rem;
margin-inline: 0;
max-width: 21rem;
text-align: left;
}
.our-work__content .acf-innerblocks-container {
gap: 1rem;
gap: 2.125rem;
}
.our-work__content h1,
@@ -215,43 +226,59 @@
.our-work__content h4,
.our-work__content h5,
.our-work__content h6 {
font-size: clamp(2rem, 9vw, 2.45rem);
font-size: clamp(2.5rem, 11vw, 2.75rem);
}
.our-work__content p {
font-size: var(--text-14px);
line-height: 1.35;
font-size: var(--text-16px);
line-height: 1.45;
text-wrap: wrap;
}
.our-work__content .wp-block-acf-buttons > div {
gap: 0.75rem;
flex-wrap: nowrap;
gap: 2rem;
justify-content: flex-start;
}
.our-work__content x-button {
flex: 1 1 0;
min-width: 0;
}
.our-work__content .button {
font-size: var(--text-14px);
min-height: 2.25rem;
min-width: 6.35rem;
padding: 0.5rem 0.8rem;
font-size: var(--text-18px);
min-height: 2.75rem;
min-width: 0;
padding: 0.65rem 1rem;
white-space: nowrap;
width: 100%;
}
.our-work__media--left {
justify-self: start;
margin: 0 0 -3.25rem;
max-width: 9.5rem;
margin: 4rem 0 0;
max-width: 11.8125rem;
position: relative;
width: 55.9%;
z-index: 2;
}
.our-work__media--bottom {
justify-self: end;
margin-bottom: -2.35rem;
max-width: 20.5rem;
width: calc(100% - 2.25rem);
margin: -3.5rem 0 0;
max-width: none;
position: relative;
transform: translateX(2rem);
width: 100%;
z-index: 1;
}
.our-work:not(.has-left-image) .our-work__media--bottom {
justify-self: center;
width: 100%;
}
.our-work__image {
object-fit: contain;
}
}