Site hero: Update responsive behavior of dots framing screenshot

See #151
WordPress · Sep 18, 2023 · 5223428 · 5223428
1 parent 7c9ffa6
commit 5223428
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/images/dots-hero.svg b/source/wp-content/themes/wporg-showcase-2022/images/dots-hero.svg
diff --git a/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php b/source/wp-content/themes/wporg-showcase-2022/patterns/_site-hero.php
@@ -37,10 +37,10 @@
 
 			<!-- wp:column {"verticalAlignment":"bottom"} -->
 			<div class="wp-block-column is-vertically-aligned-bottom">
-				<!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'images/dots-dark.svg' ) ); ?>","isRepeated":true,"dimRatio":0,"focalPoint":{"x":0.5,"y":0},"minHeight":440,"contentPosition":"bottom center","style":{"spacing":{"padding":{"top":"70px","right":"70px","bottom":"0","left":"70px"}}},"layout":{"type":"constrained"}} -->
-				<div class="wp-block-cover is-repeated has-custom-content-position is-position-bottom-center" style="padding-top:70px;padding-right:70px;padding-bottom:0;padding-left:70px;min-height:440px">
+				<!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'images/dots-hero.svg' ) ); ?>","dimRatio":0,"focalPoint":{"x":0,"y":0},"minHeight":440,"contentPosition":"bottom center","style":{"spacing":{"padding":{"top":"70px","right":"70px","bottom":"0","left":"70px"}}},"layout":{"type":"constrained"}} -->
+				<div class="wp-block-cover has-custom-content-position is-position-bottom-center" style="padding-top:70px;padding-right:70px;padding-bottom:0;padding-left:70px;min-height:440px">
 					<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
-					<div role="img" class="wp-block-cover__image-background is-repeated" style="background-position:50% 0%;background-image:url(<?php echo esc_url( get_theme_file_uri( 'images/dots-dark.svg' ) ); ?>)"></div>
+					<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( get_theme_file_uri( 'images/dots-hero.svg' ) ); ?>" style="object-position:0% 0%" data-object-fit="contain" data-object-position="0% 0%"/>
 					<div class="wp-block-cover__inner-container">
 						<!-- wp:wporg/site-screenshot {"isLink":true} /-->
 					</div>

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/style/style.scss
@@ -15,17 +15,23 @@ a:where(:not(.wp-element-button)):focus-visible {
 
 /* Site Hero section */
 .is-section-site-hero {
-	.wp-block-cover__image-background {
-		background-size: clamp(50px, 4vw, 100px);
-	}
-
 	.wp-block-column + .wp-block-column {
 		align-self: stretch;
 		display: flex;
 	}
 
 	.wp-block-cover {
-		align-self: stretch;
+		align-self: flex-end;
+		min-height: 0 !important;
+	}
+
+	@media (min-width: 1180px) {
+		.wp-block-cover__image-background {
+			object-fit: fill;
+			object-position: center bottom !important;
+			top: auto;
+			height: auto;
+		}
 	}
 
 	/* Switch down to one column when image gets squished. */