fix: match mobile Our Work linework
This commit is contained in:
@@ -35,6 +35,16 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.our-work__vector-desktop {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.our-work__vector-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.our-work__inner {
|
||||
display: grid;
|
||||
gap: clamp(2rem, 4vw, 4rem) 2.5rem;
|
||||
@@ -196,13 +206,49 @@
|
||||
padding-top: 4.25rem;
|
||||
}
|
||||
|
||||
.our-work__vector img {
|
||||
height: 118%;
|
||||
.our-work__vector-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.our-work__vector-mobile {
|
||||
display: block;
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.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 img {
|
||||
height: auto;
|
||||
max-width: none;
|
||||
object-fit: cover;
|
||||
object-position: 85% center;
|
||||
transform: translateY(clamp(8rem, 39.8vw, 10rem));
|
||||
width: 118%;
|
||||
object-fit: fill;
|
||||
position: absolute;
|
||||
width: min(238.806vw, 60rem);
|
||||
}
|
||||
|
||||
.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__inner {
|
||||
|
||||
@@ -31,12 +31,33 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
|
||||
<section <?php echo wp_kses_post( $wrapper ); ?>>
|
||||
<div class="our-work__vector" aria-hidden="true">
|
||||
<img
|
||||
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">
|
||||
<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>
|
||||
|
||||
<div class="our-work__vector-desktop">
|
||||
<img
|
||||
src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
role="presentation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our-work__inner container">
|
||||
|
||||
Reference in New Issue
Block a user