Quadrat: Fix styling of post meta (#4695)

* Quadrat: Fix styling of post meta

* Quadrat: Remove unnecessary styles from post meta

quadrat/assets/theme.css

@@ -587,6 +587,10 @@ textarea:focus {
 	justify-content: center;
 }
 
+.wp-block-group .post-meta {
+	gap: calc( var(--wp--custom--gap--baseline) + 1px);
+}
+
 @media (max-width: 599px) {
 	.post-meta {
 		padding-top: 0 !important;
@@ -594,31 +598,48 @@ textarea:focus {
 	}
 }
 
-.post-meta .wp-block-post-date::before {
-	display: none;
+.post-meta > *:not(:first-child):before {
+	align-items: center;
+	background: transparent;
+	color: var(--wp--custom--color--foreground);
+	content: "·";
+	display: flex;
+	margin-right: 0;
+	-webkit-mask-image: none;
+	mask-image: none;
 }
 
-.post-meta > *::before,
-.post-meta .wp-block-post-date::before {
-	content: "";
+.post-meta > *:first-child:before {
+	background: transparent;
+	-webkit-mask-image: none;
+	mask-image: none;
+}
+
+.post-meta > * > * {
+	color: var(--wp--custom--color--foreground);
+	font-size: var(--wp--preset--font-size--tiny);
 }
 
-.post-meta .wp-block-post-terms {
-	color: transparent;
+.post-meta .wp-block-post-author__content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 }
 
-.post-meta .wp-block-post-terms::before {
-	color: var(--wp--custom--color--foreground);
-	content: "·";
-	margin-right: 8px;
+.post-meta .wp-block-post-author__name {
+	line-height: 1;
 }
 
-.post-meta .wp-block-post-terms a {
-	color: var(--wp--custom--color--foreground);
+.post-meta .wp-block-post-author__avatar {
+	margin-right: 0.5em;
+	align-items: center;
+	display: flex;
 }
 
-.post-meta .wp-block-post-terms a:not(:last-child):after {
-	content: ",";
+.post-meta .wp-block-post-author__avatar .avatar {
+	border-radius: 50%;
+	height: 1.25em;
+	width: 1.25em;
 }
 
 .wp-block-query .wp-block-post-featured-image {

quadrat/block-templates/single.html

@@ -3,8 +3,8 @@
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
-	<div class="wp-block-group post-meta">
+	<!-- wp:group {"className":"post-meta","layout":{"type":"flex"}, "style":{"spacing":{"padding":"50px"}}} -->
+	<div style="padding:50px" class="wp-block-group post-meta">
 		<!-- wp:post-date {"textAlign":"center","fontSize":"tiny","isLink":true} /-->
 		<!-- wp:post-terms {"term":"category","textAlign":"center","fontSize":"tiny"} /-->
 	</div>

quadrat/sass/templates/_meta.scss

@@ -1,37 +1,60 @@
 .post-meta {
 	align-items: center;
 	justify-content: center;
+
+	.wp-block-group & {
+		// 1px needed to account for the separator
+		gap: calc( var(--wp--custom--gap--baseline) + 1px);
+	}
+
 	@include break-small-only() {
 		padding-top: 0 !important;
 		margin-bottom: -20px;
 	}
 
-	.wp-block-post-date::before {
-		display: none;
-	}
+	> * {
+		&:not(:first-child):before {
+			align-items: center;
+			background: transparent;
+			color: var(--wp--custom--color--foreground);
+			content: "·";
+			display: flex;
+			margin-right: 0;
+			-webkit-mask-image: none;
+			mask-image: none;
+		}
 
-	> *,
-	.wp-block-post-date {
-		&::before {
-			content: "";
+		&:first-child:before {
+			background: transparent;
+			-webkit-mask-image: none;
+			mask-image: none;
 		}
-	}
 
-	.wp-block-post-terms {
-		&::before {
+		> * {
 			color: var(--wp--custom--color--foreground);
-			content: "·";
-			margin-right: 8px;
+			font-size: var(--wp--preset--font-size--tiny);
 		}
+	}
 
-		// Needed while https://github.com/WordPress/gutenberg/issues/31710 is sorted.
-		color: transparent;
-		a {
-			color: var(--wp--custom--color--foreground);
-			&:not(:last-child):after {
-				// to be removed after https://github.com/WordPress/gutenberg/pull/32812 lands
-				content: ",";
-			}
+	.wp-block-post-author__content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.wp-block-post-author__name {
+		line-height: 1;
+	}
+
+	.wp-block-post-author__avatar {
+		margin-right: 0.5em;
+		align-items: center;
+		display: flex;
+
+		.avatar {
+			border-radius: 50%;
+			height: 1.25em;
+			width: 1.25em;
 		}
 	}
 }