Skatepark: Fix social links navigation alignment on desktop (#4635)

skatepark/assets/theme.css

@@ -515,7 +515,7 @@ header.wp-block-template-part > .wp-block-group > * > * {
 }
 
 header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only {
-	margin-right: calc( -1 * ( 8px + 0.25em ));
+	margin-right: -2px;
 }
 
 @media (min-width: 600px) {
@@ -535,6 +535,10 @@ header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-
 	padding: 0;
 }
 
+header.wp-block-template-part > .wp-block-group .wp-block-social-links.is-style-logos-only > .wp-social-link:last-child a {
+	padding-right: 0;
+}
+
 header.wp-block-template-part .site-brand {
 	margin-top: calc( 0.5 * var(--wp--custom--gap--vertical));
 	display: grid;

skatepark/sass/templates/_header.scss

@@ -2,7 +2,7 @@ header.wp-block-template-part {
 	max-width: var(--wp--custom--layout--wide-size); // Layouts can be flex OR flow/default (inherit), not both. So we need to mimick the wide width alignment supplied by Gutenberg here.
 	margin: 0 auto;
 	width: 100%;
-	
+
 	> .wp-block-group {
 		gap: 0;
 		justify-content: space-between; // Apply a cluster (flex?) layout
@@ -11,14 +11,14 @@ header.wp-block-template-part {
 		@include break-small-only(){
 			grid-row-gap: calc( 0.25 * var(--wp--custom--gap--vertical) );
 			display: grid;
-			grid-template-areas: 
+			grid-template-areas:
 				"brand menu"
 				"social social";
 			border-bottom: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--color--primary);
 		}
 		> * {
 			flex-grow: 1; // Needed to maintain alignment when the containers stack
-			> * { // Apply a stack layout (page 69 of the every-layout.dev PDF) 
+			> * { // Apply a stack layout (page 69 of the every-layout.dev PDF)
 				margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
 				margin-bottom: calc( 0.5 * var(--wp--custom--gap--vertical) );
 				@include break-small-only(){
@@ -28,17 +28,23 @@ header.wp-block-template-part {
 			}
 		}
 
-		.wp-block-social-links.is-style-logos-only {
-			margin-right: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the right
-			@include break-small(){
-				margin-top: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the tagline
-			}
-			@include break-small-only(){
-				margin-left: -0.25em;
-				margin-right: 0;
-			}
-			> .wp-social-link {
-				padding: 0; // Needed to override Gutenberg default padding on this block style variation
+		.wp-block-social-links {
+			&.is-style-logos-only {
+				margin-right: -2px; // Visually align social links to the right
+				@include break-small(){
+					margin-top: calc( -1 * ( 8px + 0.25em ) ); // Visually align social links to the tagline
+				}
+				@include break-small-only(){
+					margin-left: -0.25em;
+					margin-right: 0;
+				}
+				> .wp-social-link {
+					padding: 0; // Needed to override Gutenberg default padding on this block style variation
+
+					&:last-child a {
+						padding-right: 0;
+					}
+				}
 			}
 		}
 	}
@@ -46,12 +52,12 @@ header.wp-block-template-part {
 	.site-brand {
 		margin-top: calc( 0.5 * var(--wp--custom--gap--vertical) );
 		display: grid;
-		grid-template-areas: 
+		grid-template-areas:
 			"logo title"
 			"logo tagline";
 		grid-template-columns: auto 1fr;
 		@include break-small-only(){
-			grid-template-areas: 
+			grid-template-areas:
 				"logo"
 				"title"
 				"tagline";