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

fix: use new mobile vector for our work

Browse Source 
Replace the clip-path composition of the desktop SVG with a real <img> that references the artist-supplied mobile-work-vector.svg. Drop the CSS-layer trick and the ::before/::after background pieces; the new mobile SVG already covers the composition. Update the linework composition test to assert against the new <img>.
This commit is contained in:
Keith Solomon
2026-06-28 13:06:01 -05:00
parent 8c239e15f6
commit daeb184dd1
4 changed files with 15 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/img/mobile-work-vector.svg
+4
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

tests/mobile-homepage.spec.js-snapshots/our-work-linework-render-chromium.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 254 KiB

After

Width:  |  Height:  |  Size: 276 KiB

views/blocks/our-work/our-work.css
-42
View File
@@ -219,48 +219,6 @@
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%,
100% 24.77%,
100% 56.31%,
0 56.31%,
0 48.42%,
54.73% 48.42%,
54.73% 43.92%,
67.16% 43.92%,
67.16% 38.29%,
74.63% 38.29%
);
inset: 0;
position: absolute;
}
.our-work__vector-mobile-clip::before {
left: 24.876vw;
top: 59.701vw;
}
.our-work__vector-mobile::after {
left: -106.965vw;
top: 121.891vw;
}
.our-work__inner {
gap: 0;
padding-inline: 2rem !important;
views/blocks/our-work/our-work.php
+11 -8
View File
@@ -9,9 +9,10 @@
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';
$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';
$mobile_vector_url = get_theme_file_uri( '/static/img/mobile-work-vector.svg' );
$classes = 'our-work mx-break-out mb-36';
@@ -32,11 +33,13 @@ $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"
style="<?php echo esc_attr( '--our-work-vector-image: url(' . esc_url( $vector_url ) . ');' ); ?>"
>
<div class="our-work__vector-mobile-clip"></div>
<div class="our-work__vector-mobile">
<img
src="<?php echo esc_url( $mobile_vector_url ); ?>"
alt=""
loading="lazy"
role="presentation"
/>
</div>
<div class="our-work__vector-desktop">