Pledges: Tweak spacing & typography

Related: 7174ae2

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

@@ -20,21 +20,22 @@ body.single.single-5ftf_pledge {
 
 		.pledge-introduction {
 			background-color: $color-gray-light-200;
-			padding: 1em;
-			font-size: 1.5em;
+			margin-bottom: 36px;
+			padding: 30px;
+			font-size: 1.1rem;
 
 			p {
-				max-width: 525px; /* Keep it on two lines, ala https://stackoverflow.com/q/61923996/450127 */
-				margin: 1em auto;
-
-				&:first-child {
-					margin-top: 0;
-				}
+				max-width: 400px; /* Balance across two lines, ala https://stackoverflow.com/q/61923996/450127 */
+				margin: 0 auto 1rem auto;
 
 				&:last-child {
 					margin-bottom: 0;
 				}
 			}
+
+			.pledge-introduction__more {
+				font-size: .9rem;
+			}
 		}
 
 		.pledge-status {
@@ -48,16 +49,29 @@ body.single.single-5ftf_pledge {
 	}
 
 	.entry-title {
+		margin-top: 30px;
 		margin-bottom: 0;
 	}
 
 	.has-post-thumbnail .pledge-introduction {
-		padding-bottom: 2em;
+		padding-bottom: 60px;
+	}
+
+	.pledge-company-summary {
+		h1 {
+			font-size: 2.2rem;
+			font-weight: 600;
+		}
+
+		.pledge-url {
+			font-size: .9rem;
+			margin-top: 18px;
+		}
 	}
 
 	.has-post-thumbnail .pledge-company-summary {
 		position: relative;
-		top: -30px;
+		top: -65px;
 	}
 
 	.entry-image__logo {
@@ -66,9 +80,11 @@ body.single.single-5ftf_pledge {
 
 		img {
 			background-color: white;
-			max-width: 330px;
-			border-radius: 10px;
-			border: 5px solid white;
+			max-width: 170px;
+			max-height: 100px;
+			box-sizing: content-box;
+			border-radius: 3px;
+			border: 12px solid white;
 		}
 	}
 

themes/wporg-5ftf/functions.php

@@ -123,7 +123,7 @@ add_action( 'after_setup_theme', __NAMESPACE__ . '\content_width', 0 );
  * Enqueue scripts and styles.
  */
 function scripts() {
-	wp_enqueue_style( 'wporg-style', get_theme_file_uri( '/css/style.css' ), [ 'dashicons', 'open-sans' ], '2021-05-04' );
+	wp_enqueue_style( 'wporg-style', get_theme_file_uri( '/css/style.css' ), [ 'dashicons', 'open-sans' ], '2021-05-11' );
 
 	wp_enqueue_script( 'wporg-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20181209', true );
 	wp_enqueue_script( 'wporg-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

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

@@ -35,7 +35,7 @@ get_header();
 						<?php esc_html_e( 'This organization contributes 5% of their resources to the WordPress project.', 'wporg-5ftf' ); ?>
 					</p>
 
-					<p>
+					<p class="pledge-introduction__more">
 						<a href="<?php echo esc_url( home_url() ); ?>">
 							<?php esc_html_e( 'More about Five for the Future', 'wporg-5ftf' ); ?>
 						</a>
@@ -46,7 +46,7 @@ get_header();
 					<?php if ( has_post_thumbnail() ) : ?>
 						<div class="entry-image">
 							<div class="entry-image__logo">
-								<?php the_post_thumbnail( 'pledge-logo' ); ?>
+								<?php the_post_thumbnail(); ?>
 							</div>
 						</div>
 					<?php endif; ?>
@@ -54,17 +54,18 @@ get_header();
 					<?php if ( DEACTIVE_STATUS === get_post_status() ) : ?>
 						<span class="pledge-status"><?php esc_html_e( 'deactivated', 'wporg-5ftf' ); ?></span>
 					<?php endif; ?>
+
 					<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
-					<span class="pledge-url">
+
+					<p class="pledge-url">
 						<?php
 						printf(
-							'<a href="%1$s" rel="nofollow">%1$s</a>',
+							'<a href="%1$s" rel="nofollow noopener">%1$s</a>',
 							esc_url( $post->{ META_PREFIX . 'org-url' } )
 						);
 						?>
-					</span>
+					</p>
 				</div>
-
 			</header>
 
 			<div class="entry-content">

themes/wporg-5ftf/template-parts/content-5ftf_pledge.php

@@ -52,7 +52,7 @@ $contributor_title = sprintf(
 	<div class="entry-image">
 		<?php if ( has_post_thumbnail() ) : ?>
 			<div class="entry-image__logo">
-				<?php the_post_thumbnail( 'pledge-logo' ); ?>
+				<?php the_post_thumbnail(); ?>
 			</div>
 		<?php else : ?>
 			<div class="entry-image__placeholder"></div>