Update styles

themes/wporg-5ftf/css/components/_components.scss

@@ -23,6 +23,7 @@
 @import "archive";
 @import "entry-content";
 @import "page";
+@import "pledge-contributors";
 @import "pledge-list";
 @import "pledge-single";
 @import "site-content";

themes/wporg-5ftf/css/components/_entry-content.scss

@@ -8,8 +8,13 @@
 	}
 	
 	h2 {
+		margin-top: ms(10);
 		font-size: ms( 2 );
 		font-weight: 400;
 		color: $color__text-heading;
 	}
+	
+	> :first-child {
+		margin-top: 0;
+	}
 }

themes/wporg-5ftf/css/components/_pledge-contributors.scss

@@ -0,0 +1,52 @@
+.pledge-contributors {
+
+	h3 {
+		margin-top: 0;
+		font-size: ms(-1);
+		color: $color__text-lighter;
+	}
+
+	.pledge-contributor__avatar {
+		display: inline-block;
+		background: $color-gray-light-700;
+
+		img {
+			vertical-align: middle;
+		}
+	}
+
+	&.has-contrib-names {
+		display: flex;
+		flex-wrap: wrap;
+		margin: ms(2) 0;
+		list-style: none;
+		justify-content: space-between;
+
+		li {
+			margin: 0 auto 40px;
+			width: calc( 50% - 20px );
+
+			@include breakpoint( $breakpoint-small ) {
+				width: calc( 33% - 48px );
+				min-width: 170px;
+			}
+		}
+
+		li:first-child:last-child {
+			width: 100%;
+			
+			a {
+				max-width: 280px;
+			}
+		}
+
+		.pledge-contributor__avatar {
+			margin-bottom: 20px;
+		}
+
+		.pledge-contributor__name {
+			display: block;
+			text-align: center;
+		}
+	}
+}

themes/wporg-5ftf/css/components/_pledge-list.scss

@@ -78,4 +78,9 @@ body.archive.post-type-archive-5ftf_pledge {
 			grid-row: 2;
 		}
 	}
+
+	.entry-title {
+		font-size: ms(2);
+		font-weight: 400;
+	}
 }

themes/wporg-5ftf/css/components/_pledge-single.scss

@@ -5,4 +5,53 @@ body.single.single-5ftf_pledge {
 		padding: 0 10px;
 		max-width: $size__site-main;
 	}
+
+	.entry-header {
+		margin: ms(12) 0;
+		padding-bottom: ms(4);
+		border-bottom: 1px solid $color-gray-light-500;
+
+		@include breakpoint( $breakpoint-mobile ) {
+			display: flex;
+			align-items: center;
+
+			> div {
+				flex: auto;
+			}
+
+			.entry-image {
+				max-width: 330px;
+			}
+		}
+
+		@include breakpoint( 0, $breakpoint-mobile ) {
+			text-align: center;
+
+			.entry-image {
+				margin-top: ms(2);
+			}
+		}
+	}
+
+	.entry-title {
+		margin-bottom: 0;
+	}
+
+	.entry-image__logo {
+		background: transparent;
+	}
+
+	.pledge-company-description {
+		max-width: $size__content-width;
+	}
+
+	.team-grid {
+		margin-top: ms(2);
+	}
+
+	.entry-footer {
+		margin-top: ms(2);
+		border-top: 1px solid $color-gray-light-500;
+		padding-top: ms(2);
+	}
 }

themes/wporg-5ftf/css/components/_site-content.scss

@@ -6,7 +6,7 @@
 		padding: 0;
 
 		.site-main {
-			margin: 0 auto;
+			margin: 0 auto ms(8);
 			padding: 0 ms( 2 );
 			max-width: calc( #{ $size__content-width } + #{ ms( 2 ) * 2 } );
 		}

themes/wporg-5ftf/css/objects/_pledge.scss

@@ -1,5 +1,4 @@
 article.type-5ftf_pledge {
-	/* Styles */
 
 	.entry-image__placeholder {
 		background: $color-gray-light-100;
@@ -21,33 +20,16 @@ article.type-5ftf_pledge {
 		}
 	}
 
+	.entry-header a {
+		text-decoration: underline;
+	}
+
 	.entry-title {
 		margin-top: 0;
-		font-size: ms(2);
-		font-weight: 400;
-
-		a {
-			text-decoration: underline;
-		}
 	}
 	
 	.entry-content {
 		font-size: ms(-1);
 		color: $color__text-darker;
 	}
-
-	.pledge-contributors h3 {
-		margin-top: 0;
-		font-size: ms(-1);
-		color: $color__text-lighter;
-	}
-
-	.pledge-contributor__avatar {
-		display: inline-block;
-		background: $color-gray-light-700;
-
-		img {
-			vertical-align: middle;
-		}
-	}
 }

themes/wporg-5ftf/single-5ftf_pledge.php

@@ -5,6 +5,8 @@ use WordPressDotOrg\FiveForTheFuture\Contributor;
 use WordPressDotOrg\FiveForTheFuture\XProfile;
 use WP_Post;
 
+use const WordPressDotOrg\FiveForTheFuture\PledgeMeta\META_PREFIX;
+
 $contribution_data = XProfile\get_aggregate_contributor_data_for_pledge( get_the_ID() );
 
 $contributors = Contributor\get_contributor_user_objects(
@@ -22,13 +24,13 @@ get_header(); ?>
 
 		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 			<header class="entry-header">
-				<div class="">
+				<div>
-					<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
+					<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
-					<span>
+					<span class="pledge-url">
 						<?php
 						printf(
 							'<a href="%1$s">%1$s</a>',
-							esc_url( $post->{'5ftf_org-url'} )
+							esc_url( $post->{ META_PREFIX . 'org-url' } )
 						);
 						?>
 					</span>
@@ -45,12 +47,14 @@ get_header(); ?>
 			</header>
 
 			<div class="entry-content">
-				<h3><?php esc_html_e( 'About', 'wporg' ); ?></h3>
+				<h2><?php esc_html_e( 'About', 'wporg' ); ?></h2>
 
-				<?php echo wp_kses_post( wpautop( $post->{'5ftf_org-description'} ) ); ?>
+				<div class="pledge-company-description">
+					<?php echo wp_kses_post( wpautop( $post->{ META_PREFIX . 'org-description' } ) ); ?>
+				</div>
 
 				<?php if ( ! empty( $contributors ) ) : ?>
-					<h3><?php esc_html_e( 'Contributions', 'wporg' ); ?></h3>
+					<h2><?php esc_html_e( 'Contributions', 'wporg' ); ?></h2>
 
 					<p>
 						<?php
@@ -85,16 +89,18 @@ get_header(); ?>
 					</ul>
 				<?php endif; ?>
 
-				<h3><?php esc_html_e( 'Contributors', 'wporg' ); ?></h3>
+				<h2><?php esc_html_e( 'Contributors', 'wporg' ); ?></h2>
 
 				<?php if ( ! empty( $contributors ) ) : ?>
-					<ul class="contributor-grid">
+					<ul class="pledge-contributors has-contrib-names">
 						<?php foreach ( $contributors as $contributor ) : ?>
-							<li>
+							<li class="pledge-contributor">
-								<?php echo get_avatar( $contributor->user_email, 280 ); ?>
+								<span class="pledge-contributor__avatar">
+									<?php echo get_avatar( $contributor->user_email, 280 ); ?>
+								</span>
 								<?php
 								printf(
-									'<a href="%1$s">%2$s</a>',
+									'<a class="pledge-contributor__name" href="%1$s">%2$s</a>',
 									sprintf(
 										'https://profiles.wordpress.org/%s/',
 										sanitize_key( $contributor->user_login ) // phpcs:ignore WordPress.Security.EscapeOutput -- sanitize_key will catch any security issues.