Varia: Revising a8c-posts-list block styles

- Optimize selector nesting
- Add style for `featured` span to match archives
- Add vertical spacing to match index/archives
- Add link color to meta data and clean up spacing
- Use small font-size in meta data

varia/sass/blocks/image/_style.scss

@@ -11,7 +11,7 @@
 }
 
 img {
-	width: auto;
+	height: auto;
 	vertical-align: middle;
 	max-width: 100%;
 }

varia/sass/blocks/posts-list/_style.scss

@@ -1,31 +1,38 @@
-.a8c-posts-list {
-	margin-left: 0;
-	.a8c-posts-list__listing {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
+.a8c-posts-list__listing {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
 
-	.a8c-posts-list__item {
-		display: block;
+.a8c-posts-list-item__featured span {
+	color: #{map-deep-get($config-global, "color", "background")};
+	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
+	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+	font-weight: bold;
+	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+	line-height: 1;
+	padding: calc(0.5 * #{map-deep-get($config-global, "spacing", "unit")}) calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} );
+}
 
-		.a8c-posts-list-item__meta {
-			color: #{map-deep-get($config-global, "color", "foreground", "light")};
-			font-size: #{map-deep-get($config-global, "font", "size", "xs")};
-			line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
-		}
+.a8c-posts-list__item {
+	display: block;
 
-		.a8c-posts-list-item__excerpt {
-			font-size: #{map-deep-get($config-global, "font", "size", "sm")};
-			line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
-			margin: 0;
-		}
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
 	}
 
-	& > li {
-		/* Vertical margins logic */
-		margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
-		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	.entry > * {
+		/* Vertical margins logic between post details */
+		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+		margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
 
 		&:first-child {
 			margin-top: 0;
@@ -36,11 +43,21 @@
 		}
 	}
 
-	& > li > a {
-		font-family: #{map-deep-get($config-heading, "font", "family")};
-		font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
-		font-weight: #{map-deep-get($config-heading, "font", "weight")};
-		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};
+	.a8c-posts-list-item__meta {
+		color: #{map-deep-get($config-global, "color", "foreground", "light")};
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+
+		a {
+			color: currentColor;
+
+			&:hover,
+			&:active {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			}
+		}
+	}
+
+	.a8c-posts-list-item__edit-link {
+		margin-left: #{map-deep-get($config-global, "spacing", "unit")};
 	}
-		
 }

varia/style-rtl.css

@@ -1371,7 +1371,7 @@ h6, .h6 {
 }
 
 img {
-	width: auto;
+	height: auto;
 	vertical-align: middle;
 	max-width: 100%;
 }
@@ -1562,6 +1562,68 @@ p.has-background {
 	padding: 16px 16px;
 }
 
+.a8c-posts-list__listing {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.a8c-posts-list-item__featured span {
+	color: white;
+	background-color: blue;
+	font-family: sans-serif;
+	font-weight: bold;
+	font-size: 0.83333rem;
+	line-height: 1;
+	padding: calc(0.5 * 16px) calc(0.66 * 16px);
+}
+
+.a8c-posts-list__item {
+	display: block;
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * 32px);
+	margin-bottom: calc(3 * 32px);
+}
+
+.a8c-posts-list__item:first-child {
+	margin-top: 0;
+}
+
+.a8c-posts-list__item:last-child {
+	margin-bottom: 0;
+}
+
+.a8c-posts-list__item .entry > * {
+	/* Vertical margins logic between post details */
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
+.a8c-posts-list__item .entry > *:first-child {
+	margin-top: 0;
+}
+
+.a8c-posts-list__item .entry > *:last-child {
+	margin-bottom: 0;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a {
+	color: currentColor;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
+	color: indigo;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__edit-link {
+	margin-right: 16px;
+}
+
 .wp-block-pullquote {
 	padding: calc( 3 * 16px) 0;
 	margin-right: 0;

varia/style.css

@@ -1371,7 +1371,7 @@ h6, .h6 {
 }
 
 img {
-	width: auto;
+	height: auto;
 	vertical-align: middle;
 	max-width: 100%;
 }
@@ -1562,51 +1562,66 @@ p.has-background {
 	padding: 16px 16px;
 }
 
-.a8c-posts-list {
-	margin-left: 0;
-}
-
-.a8c-posts-list .a8c-posts-list__listing {
+.a8c-posts-list__listing {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 
-.a8c-posts-list .a8c-posts-list__item {
+.a8c-posts-list-item__featured span {
+	color: white;
+	background-color: blue;
+	font-family: sans-serif;
+	font-weight: bold;
+	font-size: 0.83333rem;
+	line-height: 1;
+	padding: calc(0.5 * 16px) calc(0.66 * 16px);
+}
+
+.a8c-posts-list__item {
 	display: block;
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * 32px);
+	margin-bottom: calc(3 * 32px);
 }
 
-.a8c-posts-list .a8c-posts-list__item .a8c-posts-list-item__meta {
-	color: #767676;
-	font-size: 0.69444rem;
-	line-height: 1.78;
+.a8c-posts-list__item:first-child {
+	margin-top: 0;
 }
 
-.a8c-posts-list .a8c-posts-list__item .a8c-posts-list-item__excerpt {
-	font-size: 0.83333rem;
-	line-height: 1.78;
-	margin: 0;
+.a8c-posts-list__item:last-child {
+	margin-bottom: 0;
 }
 
-.a8c-posts-list > li {
-	/* Vertical margins logic */
-	margin-top: 32px;
-	margin-bottom: 32px;
+.a8c-posts-list__item .entry > * {
+	/* Vertical margins logic between post details */
+	margin-top: 16px;
+	margin-bottom: 16px;
 }
 
-.a8c-posts-list > li:first-child {
+.a8c-posts-list__item .entry > *:first-child {
 	margin-top: 0;
 }
 
-.a8c-posts-list > li:last-child {
+.a8c-posts-list__item .entry > *:last-child {
 	margin-bottom: 0;
 }
 
-.a8c-posts-list > li > a {
-	font-family: sans-serif;
-	font-size: 1.728rem;
-	font-weight: bold;
-	line-height: 1.125;
+.a8c-posts-list__item .a8c-posts-list-item__meta {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a {
+	color: currentColor;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__meta a:hover, .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
+	color: indigo;
+}
+
+.a8c-posts-list__item .a8c-posts-list-item__edit-link {
+	margin-left: 16px;
 }
 
 .wp-block-pullquote {