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

refactor: isolate mobile home contact styles

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 21:34:44 -05:00
parent 7c143721b8
commit f0c5c47297
3 changed files with 85 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mobile-homepage.spec.js
+23 -4
View File
@@ -352,7 +352,6 @@ test("mobile contact card matches the 402px reference geometry", async ({
const linework = await getBox(
cardLocator.locator(".contact-block__linework"),
);
const lineworkLocator = cardLocator.locator(".contact-block__linework");
const backgroundImage = cardLocator.locator(".contact-block__bg-image");
const bandHeight = await cardLocator.evaluate((element) =>
Number.parseFloat(getComputedStyle(element).borderBottomWidth),
@@ -370,10 +369,7 @@ test("mobile contact card matches the 402px reference geometry", async ({
expectNear(linework.y - card.y, 300, 5);
expectNear(linework.height, 186, 5);
expect(linework.x).toBeLessThanOrEqual(card.x);
await expect(lineworkLocator).toHaveCSS("overflow", "visible");
await expect(backgroundImage).toHaveCSS("object-fit", "cover");
await expect(backgroundImage).toHaveCSS("object-position", "82% 50%");
await expect(backgroundImage).toHaveCSS("filter", "brightness(1.5)");
const overlay = await cardLocator
.locator(".contact-block__media")
.evaluate(
@@ -381,6 +377,29 @@ test("mobile contact card matches the 402px reference geometry", async ({
);
expect(overlay).toContain("linear-gradient");
await expect(cardLocator).toHaveCSS("border-radius", "16px 16px 0px 0px");
const reusableStyles = await cardLocator.evaluate((element) => {
const clone = element.cloneNode(true);
clone.classList.remove("home-contact");
document.body.append(clone);
const media = clone.querySelector(".contact-block__media");
const content = clone.querySelector(".contact-block__content");
const styles = {
borderRadius: getComputedStyle(clone).borderRadius,
contentPaddingLeft: getComputedStyle(content).paddingLeft,
maskImage: getComputedStyle(media).maskImage,
overlay: getComputedStyle(media, "::after").backgroundImage,
};
clone.remove();
return styles;
});
expect(reusableStyles.borderRadius).toBe("12px 12px 0px 0px");
expect(reusableStyles.contentPaddingLeft).toBe("24px");
expect(reusableStyles.maskImage).toContain("linear-gradient");
expect(reusableStyles.overlay).toBe("none");
});
test("mobile contact card scales proportionally and remains contained", async ({
views/blocks/contact-block/contact-block.css
+61 -20
View File
@@ -37,6 +37,10 @@
width: auto;
}
.contact-block__content {
padding-inline: 1rem;
}
&.home-contact {
bottom: -25%;
left: 50%;
@@ -48,21 +52,70 @@
@media (max-width: 767px) {
.contact-block {
border-bottom-width: 0.75rem;
border-radius: 0.75rem 0.75rem 0 0;
}
.contact-block .contact-block__media {
inset: 0;
mask-image: linear-gradient(
to bottom,
rgb(0 0 0 / 0.9) 0%,
rgb(0 0 0 / 0.45) 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
rgb(0 0 0 / 0.9) 0%,
rgb(0 0 0 / 0.45) 100%
);
}
.contact-block .contact-block__bg-image {
object-fit: cover;
}
.contact-block .contact-block__linework {
bottom: 0.75rem;
max-width: 112%;
right: -32%;
width: 22rem;
}
.contact-block .contact-block__content {
min-height: 18.5rem;
padding: 2.25rem 1.5rem 2.75rem !important;
}
.contact-block .contact-block__text {
font-size: clamp(1.9rem, 8.7vw, 2.45rem);
line-height: 1.02;
max-width: 16rem !important;
}
.contact-block.home-contact {
background-color: #032f46;
border-bottom-width: calc(100vw * 16 / 402);
border-radius: calc(100vw * 16 / 402) calc(100vw * 16 / 402) 0 0;
box-sizing: border-box;
bottom: auto;
height: calc(100vw * 502 / 402);
left: 50%;
margin: 2.5rem auto -3.75rem;
max-width: none;
padding-inline: 0 !important;
padding-top: 0 !important;
position: relative;
transform: translateX(-50%);
width: calc(100vw * 343 / 402);
}
.contact-block .contact-block__media {
.contact-block.home-contact .contact-block__media {
inset: 0;
mask-image: none;
-webkit-mask-image: none;
}
.contact-block .contact-block__media::after {
.contact-block.home-contact .contact-block__media::after {
background: linear-gradient(
to right,
rgb(3 47 70 / 0.98) 0%,
@@ -78,7 +131,7 @@
z-index: 1;
}
.contact-block .contact-block__bg-image {
.contact-block.home-contact .contact-block__bg-image {
filter: brightness(1.5);
object-fit: cover;
object-position: 82% center;
@@ -86,7 +139,7 @@
z-index: 0;
}
.contact-block .contact-block__linework {
.contact-block.home-contact .contact-block__linework {
bottom: 0;
height: auto;
left: calc(100% * -113 / 343);
@@ -100,32 +153,20 @@
.contact-block.home-contact .contact-block__content {
margin: 0 !important;
max-width: none !important;
min-height: 0;
padding: calc(100vw * 31 / 402) calc(100vw * 33 / 402) 0 !important;
position: relative;
left: calc(100vw * 33 / 402 - 1rem);
width: 100% !important;
z-index: 2;
}
.contact-block .contact-block__text {
.contact-block.home-contact .contact-block__text {
font-size: calc(100vw * 28 / 402);
line-height: 1.08;
margin-bottom: calc(100vw * 37 / 402);
max-width: calc(100% * 260 / 343) !important;
max-width: calc(100vw * 236 / 402) !important;
}
.contact-block .contact-block__cta {
.contact-block.home-contact .contact-block__cta {
padding-block: calc(100vw * 8.5 / 402);
}
.contact-block.home-contact {
bottom: auto;
height: calc(100vw * 502 / 402);
left: 50%;
margin: 2.5rem auto -3.75rem;
max-width: none;
position: relative;
transform: translateX(-50%);
width: calc(100vw * 343 / 402);
}
}
views/blocks/contact-block/contact-block.php
+1 -1
View File
@@ -33,7 +33,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<?php get_template_part( '/views/blocks/contact-block/linework' ); ?>
</div>
<div class="contact-block__content container px-4! pt-12 pb-16 relative z-10">
<div class="contact-block__content container pt-12 pb-16 relative z-10">
<?php if ( $text ) : ?>
<h2 class="contact-block__text font-quincy font-normal leading-none text-white max-w-4/5 mb-8">
<?php echo wp_kses_post( $text ); ?>