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
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 ); ?>