Pledge details: Style the pledge organization header on small screens

See #301
This commit is contained in:
Kelly Dwan 2024-09-10 15:22:55 -04:00
parent e5b3f8518e
commit f393a214ec
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
2 changed files with 20 additions and 3 deletions

View file

@ -6,11 +6,11 @@
*/
?>
<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignwide" style="margin-bottom:var(--wp--preset--spacing--40)">
<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"org-pledge-header"} -->
<div class="wp-block-group alignwide org-pledge-header" style="margin-bottom:var(--wp--preset--spacing--40)">
<!-- wp:group {"style":{"border":{"radius":"2px"},"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-light-grey-2-background-color has-background" style="border-radius:2px;padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)">
<!-- wp:post-featured-image {"aspectRatio":"1","width":"110px","scale":"contain"} /-->
<!-- wp:post-featured-image {"aspectRatio":"16/9","width":"160px","scale":"contain"} /-->
</div>
<!-- /wp:group -->

View file

@ -91,3 +91,20 @@ body.is-page-in-menu .wp-block-wporg-local-navigation-bar .wp-block-post-title {
}
}
}
/* Style the single (org) pledges header */
.org-pledge-header {
@media (max-width: 600px) {
flex-direction: column;
margin-block-end: 40px !important;
> .wp-block-group {
align-items: flex-start;
}
.wp-block-post-featured-image {
width: 100% !important;
}
}
}