ソースを参照

fix third post

Ben Dwyer 3 年 前
コミット
52b6bd9d7b

+ 7 - 13
quadrat/assets/theme.css

@@ -56,29 +56,23 @@
 	   object-fit: cover;
 }
 
-.horizontal-query-pattern {
+div.horizontal-query-pattern {
 	align-items: stretch;
+	flex-wrap: nowrap;
+	gap: 0;
 }
 
-.horizontal-query-pattern figure.wp-block-post-featured-image {
+div.horizontal-query-pattern .wp-block-cover,
+div.horizontal-query-pattern figure.wp-block-post-featured-image {
 	margin-top: 0;
-	height: 100%;
 }
 
-.horizontal-query-pattern img {
-	height: 100%;
+div.horizontal-query-pattern img {
+	aspect-ratio: 1.12;
 	-o-object-fit: cover;
 	   object-fit: cover;
 }
 
-.horizontal-query-pattern .wp-block-column {
-	margin-top: 0;
-}
-
-.horizontal-query-pattern.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
-	margin-left: 0;
-}
-
 .wp-block-cover.is-style-quadrat-cover-diamond::after {
 	background-image: url(rotated.svg);
 	background-position: center;

+ 12 - 3
quadrat/inc/patterns/query-episodes.php

@@ -24,12 +24,21 @@ return array(
 	<!-- /wp:query -->
 	<!-- wp:query {"queryId":34,"query":{"perPage":"1","pages":0,"offset":"2","postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"align":"wide"} -->
 	<div class="wp-block-query alignwide"><!-- wp:post-template -->
-	<!-- wp:cover {"overlayColor":"tertiary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"30px","left":"40px"}}}} -->
-	<div class="wp-block-cover has-tertiary-background-color has-background-dim mt-0" style="padding-top:30px;padding-right:40px;padding-bottom:30px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container">
-	<!-- wp:post-featured-image {"align":"left","className":"image-no-margin mb-0"} /-->
+
+	<!-- wp:group {"className":"horizontal-query-pattern","layout":{"type":"flex"}} -->
+	<div class="wp-block-group horizontal-query-pattern">
+
+	<!-- wp:post-featured-image {"className":"image-no-margin mb-0"} /-->
+
+	<!-- wp:cover {"className":"horizontal-query-pattern","overlayColor":"tertiary","minHeight":360,"className":"mt-0","style":{"spacing":{"padding":{"top":"30px","right":"40px","bottom":"30px","left":"40px"}}}} -->
+	<div class="wp-block-cover has-tertiary-background-color has-background-dim mt-0 horizontal-query-pattern" style="padding-top:30px;padding-right:40px;padding-bottom:30px;padding-left:40px;min-height:360px"><div class="wp-block-cover__inner-container">
 	<!-- wp:post-title {"isLink":true,"linkTarget":"_blank","textColor":"primary"} /-->
 	<!-- wp:post-excerpt {"textColor":"primary","fontSize":"small"} /--></div></div>
 	<!-- /wp:cover -->
+
+	</div>
+	<!-- /wp:group -->
+
 	<!-- /wp:post-template --></div>
 	<!-- /wp:query -->',
 );

+ 8 - 10
quadrat/sass/block-patterns/_query.scss

@@ -15,20 +15,18 @@
 	}
 }
 
-.horizontal-query-pattern {
+div.horizontal-query-pattern {
 	align-items: stretch;
+	flex-wrap: nowrap;
+	gap: 0;
+
+	.wp-block-cover,
 	figure.wp-block-post-featured-image {
 		margin-top: 0;
-		height: 100%;
 	}
+
 	img {
-		height: 100%;
+		aspect-ratio: 1.12;
 		object-fit: cover;
 	}
-	.wp-block-column {
-		margin-top: 0;
-	}
-	&.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
-		margin-left: 0;
-	}
-}
+}