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

refactor: harden responsive Our Work artwork

Browse Source
This commit is contained in:
Keith Solomon
2026-06-27 22:36:46 -05:00
parent 79ff6a1408
commit 948cc7e368
3 changed files with 127 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/blocks/our-work/our-work.css
+25 -15
View File
@@ -202,10 +202,13 @@
@media (max-width: 767px) {
.our-work {
margin-bottom: 2rem;
min-height: clamp(44rem, 220.9vw, 55.5rem);
padding-top: 4.25rem;
}
.our-work.has-left-image.has-bottom-image {
min-height: clamp(44rem, 220.9vw, 55.5rem);
}
.our-work__vector-desktop {
display: none;
}
@@ -216,6 +219,21 @@
position: absolute;
}
/*
* CSS layers keep the approved external SVG available. Browsers do not load
* nested external images from an SVG embedded through an img element.
*/
.our-work__vector-mobile::after,
.our-work__vector-mobile-clip::before {
background-image: var(--our-work-vector-image);
background-repeat: no-repeat;
background-size: 100% 100%;
content: "";
height: 98.756vw;
position: absolute;
width: 238.806vw;
}
.our-work__vector-mobile-clip {
clip-path: polygon(
74.63% 24.77%,
@@ -233,22 +251,14 @@
position: absolute;
}
.our-work__vector-mobile img {
height: auto;
max-width: none;
object-fit: fill;
position: absolute;
width: min(238.806vw, 60rem);
.our-work__vector-mobile-clip::before {
left: 24.876vw;
top: 59.701vw;
}
.our-work__vector-mobile-upper {
left: min(24.876vw, 6.25rem);
top: min(59.701vw, 15rem);
}
.our-work__vector-mobile-lower {
left: max(-106.965vw, -26.875rem);
top: min(121.891vw, 30.625rem);
.our-work__vector-mobile::after {
left: -106.965vw;
top: 121.891vw;
}
.our-work__inner {
views/blocks/our-work/our-work.php
+7 -18
View File
@@ -11,6 +11,7 @@ namespace CWC;
$left_image = get_field( 'left_image' );
$bottom_image = get_field( 'bottom_image' );
$vector_url = get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg';
$classes = 'our-work mx-break-out mb-36';
@@ -31,28 +32,16 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
<section <?php echo wp_kses_post( $wrapper ); ?>>
<div class="our-work__vector" aria-hidden="true">
<div class="our-work__vector-mobile">
<div class="our-work__vector-mobile-clip">
<img
class="our-work__vector-mobile-upper"
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
</div>
<img
class="our-work__vector-mobile-lower"
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
<div
class="our-work__vector-mobile"
style="<?php echo esc_attr( '--our-work-vector-image: url(' . esc_url( $vector_url ) . ');' ); ?>"
>
<div class="our-work__vector-mobile-clip"></div>
</div>
<div class="our-work__vector-desktop">
<img
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
src="<?php echo esc_url( $vector_url ); ?>"
alt=""
loading="lazy"
role="presentation"