Pledge list: Adjust style and layout for smaller screens

WordPress · Aug 29, 2024 · eac1ed9 · eac1ed9
1 parent 5b839d8
commit eac1ed9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php b/themes/wporg-5ftf-2024/patterns/archive-5ftf-pledge.php
@@ -51,7 +51,7 @@
 	<!-- /wp:group -->
 
 	<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|60"}}} -->
-		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
 		<div class="wp-block-group">
 			<!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#d9d9d9","radius":"2px"},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"}} -->
 			<div class="wp-block-group has-border-color has-light-grey-2-background-color has-background" style="border-color:#d9d9d9;border-style:solid;border-width:1px;border-radius:2px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">

diff --git a/themes/wporg-5ftf-2024/src/style/style.scss b/themes/wporg-5ftf-2024/src/style/style.scss
@@ -18,3 +18,31 @@
 .wp-block-search {
 	--wp--custom--form--border--width: 0;
 }
+
+.wp-block-post:where(li.type-5ftf_pledge) {
+	> .wp-block-group {
+
+		@media (max-width: 1080px) {
+			gap: var(--wp--preset--spacing--40);
+		}
+
+		@media (max-width: 960px) and (min-width: 600px) {
+			.wp-block-post-featured-image {
+				max-width: 110px;
+			}
+		}
+
+		@media (max-width: 600px) {
+			flex-direction: column;
+
+			> .wp-block-group:first-child {
+				max-width: 100%;
+				align-self: center;
+			}
+
+			.wp-block-post-featured-image {
+				max-width: 100%;
+			}
+		}
+	}
+}