Blockbase: Improve comment awaiting moderation styling

blockbase/assets/ponyfill.css

@@ -452,6 +452,10 @@ p.has-background {
 	fill: var(--wp--custom--button--color--text);
 }
 
+.wp-block-post-comments .reply {
+	margin-block: var(--wp--custom--margin--vertical);
+}
+
 .wp-block-post-comments .reply a {
 	display: inline-block;
 }
@@ -474,6 +478,16 @@ p.has-background {
 	line-height: var(--wp--custom--post-comment--typography--line-height);
 }
 
+.wp-block-post-comments .commentmetadata {
+	margin-left: 0;
+}
+
+.wp-block-post-comments .comment-awaiting-moderation {
+	display: inline-block;
+	font-size: var(--wp--preset--font-size--small);
+	margin-bottom: var(--wp--custom--margin--baseline);
+}
+
 .wp-block-pullquote.is-style-solid-color,
 .wp-block-pullquote {
 	text-align: var(--wp--custom--pullquote--typography--text-align);

blockbase/sass/blocks/_post-comments.scss

@@ -12,8 +12,12 @@
 		@include button-hover-styles;
 	}
 
-	.reply a {
-		display: inline-block;
+	.reply {
+		margin-block: var(--wp--custom--margin--vertical);
+		
+		a {
+			display: inline-block;
+		}
 	}
 
 	.comment-form {
@@ -44,4 +48,14 @@
 		}
 	}
 
+	.commentmetadata {
+		margin-left: 0;
+	}
+
+	.comment-awaiting-moderation {
+		display: inline-block;
+		font-size: var(--wp--preset--font-size--small);
+		margin-bottom: var(--wp--custom--margin--baseline);
+	}
+
 }

skatepark/assets/theme.css

@@ -109,10 +109,6 @@
 	background-color: var(--wp--custom--button--color--text);
 }
 
-.wp-block-post-comments .reply {
-	margin-bottom: var(--wp--custom--margin--vertical);
-}
-
 .wp-block-post-comments .reply a {
 	--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
 	border-style: var(--wp--custom--button--border--style);
@@ -263,12 +259,12 @@
 	margin-bottom: 36px;
 }
 
-.wp-block-post-comments .commentlist {
-	margin-bottom: calc( 4 * var(--wp--custom--margin--baseline));
+.wp-block-post-comments .commentmetadata a {
+	font-weight: 500;
 }
 
-.wp-block-post-comments .commentlist .comment p {
-	margin-bottom: var(--wp--custom--margin--vertical);
+.wp-block-post-comments .commentlist {
+	margin-bottom: calc( 4 * var(--wp--custom--margin--baseline));
 }
 
 .wp-block-post-comments .comment-body > p > a,

skatepark/sass/blocks/_post-comments.scss

@@ -2,8 +2,6 @@
 
 .wp-block-post-comments {
 	.reply {
-		margin-bottom: var(--wp--custom--margin--vertical);
-
 		a {
 			--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
 			@include button-border-styles;
@@ -154,10 +152,6 @@
 
 	.commentlist {
 		margin-bottom: calc( 4 * var(--wp--custom--margin--baseline) );
-
-		.comment p {
-			margin-bottom: var(--wp--custom--margin--vertical);
-		}
 	}
 
 	// Target certain links within post comments to use the underline treatment.