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

fix: align mobile pull quote crop

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 19:00:12 -05:00
parent 445269d291
commit 8a601d90cb
2 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+7 -6
View File
@@ -102,23 +102,24 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
const text = await getBox(page.locator(".pull-quote__text")); const text = await getBox(page.locator(".pull-quote__text"));
const vectorImage = page.locator(".pull-quote__vector img"); const vectorImage = page.locator(".pull-quote__vector img");
const vector = await getBox(vectorImage); const vector = await getBox(vectorImage);
const borderWidth = await page.locator(".pull-quote").evaluate((element) => const bandHeight = await page.locator(".pull-quote").evaluate((element) =>
Number.parseFloat(getComputedStyle(element).borderBottomWidth), Number.parseFloat(getComputedStyle(element, "::after").height),
); );
expectNear(quote.height, 361, 6); expectNear(quote.height, 361, 6);
expectNear(borderWidth, 16, 1); expectNear(bandHeight, 16, 1);
expectNear(text.x - quote.x, 32, 3); expectNear(text.x - quote.x, 32, 3);
expect(text.width).toBeGreaterThanOrEqual(330); expect(text.width).toBeGreaterThanOrEqual(330);
expectNear(text.height, 216, 6); expectNear(text.height, 216, 6);
expectNear( expectNear(
text.y + text.height / 2, text.y + text.height / 2,
quote.y + (quote.height - borderWidth) / 2, quote.y + (quote.height - bandHeight) / 2,
8, 8,
); );
expectNear(vector.x, quote.x, 3); expectNear(vector.x, quote.x, 3);
expectNear(vector.width, quote.width, 3); expectNear(vector.width, quote.width, 3);
expectNear(vector.height, quote.height - borderWidth, 3); expectNear(vector.height, quote.height - bandHeight, 3);
await expect(vectorImage).toHaveCSS("object-position", "0% 50%");
}); });
test("mobile pull quote scales proportionally through 767px", async ({ test("mobile pull quote scales proportionally through 767px", async ({
@@ -149,7 +150,7 @@ test("mobile pull quote matches the supplied visual reference", async ({
"pullquote-reference.png", "pullquote-reference.png",
{ {
animations: "disabled", animations: "disabled",
maxDiffPixelRatio: 0.094, maxDiffPixelRatio: 0.05,
threshold: 0.2, threshold: 0.2,
}, },
); );
views/blocks/pull-quote/pull-quote.css
+19 -4
View File
@@ -47,27 +47,42 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.pull-quote { .pull-quote {
background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white); background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
border-bottom-width: 1rem; border-bottom: 0;
height: calc(89.8vw - 1px); height: calc(89.8vw - 1px);
} }
.pull-quote::after {
background: var(--color-cwc-blue-03);
bottom: 0;
content: "";
height: 1rem;
left: 0;
position: absolute;
right: 0;
z-index: 2;
}
.pull-quote .pull-quote__vector {
bottom: 1rem;
}
.pull-quote .pull-quote__vector img { .pull-quote .pull-quote__vector img {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: 30% center; object-position: left center;
width: 100%; width: 100%;
} }
.pull-quote .pull-quote__content { .pull-quote .pull-quote__content {
align-items: center; align-items: center;
display: flex; display: flex;
height: 100%; height: calc(100% - 1rem);
padding: 2.5rem 2rem; padding: 2.5rem 2rem;
} }
.pull-quote .pull-quote__text { .pull-quote .pull-quote__text {
font-size: clamp(1.25rem, 5.535vw, 1.390625rem); font-size: clamp(1.25rem, 5.535vw, 1.390625rem);
line-height: clamp(1.5rem, 6.72vw, 1.6875rem); line-height: clamp(1.5rem, 6.78vw, 1.703125rem);
width: 100%; width: 100%;
} }
} }