custom styles and svg for post meta

blockbase/assets/ponyfill.css

@@ -829,6 +829,8 @@ p.has-background {
 	margin-right: calc(0.5 * var(--wp--custom--margin--baseline));
 	height: 16px;
 	width: 16px;
+	mask-size: contain;
+	mask-repeat: no-repeat;
 	background-color: currentColor;
 }
 

blockbase/sass/base/_mixins.scss

@@ -23,6 +23,8 @@
 		margin-right: calc(0.5 * var(--wp--custom--margin--baseline) );
 		height: 16px;
 		width: 16px;
+		mask-size: contain;
+		mask-repeat: no-repeat;
 		background-color: currentColor;
 	}
 }

skatepark/assets/svg/post-category.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.19795 3.75L8.21115 1.77639C8.12645 1.607 7.95332 1.5 7.76393 1.5H2C1.72386 1.5 1.5 1.72386 1.5 2V13.75C1.5 14.0261 1.72386 14.25 2 14.25H16C16.2761 14.25 16.5 14.0261 16.5 13.75V4.25C16.5 3.97386 16.2761 3.75 16 3.75H9.19795ZM10.125 2.25L9.55279 1.10557C9.214 0.428005 8.52148 0 7.76393 0H2C0.895431 0 0 0.895431 0 2V13.75C0 14.8546 0.89543 15.75 2 15.75H16C17.1046 15.75 18 14.8546 18 13.75V4.25C18 3.14543 17.1046 2.25 16 2.25H10.125Z" fill="black"/>
+</svg>

skatepark/assets/svg/post-date.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 4H1.5V16C1.5 16.2761 1.72386 16.5 2 16.5H16C16.2761 16.5 16.5 16.2761 16.5 16V4ZM0 4V2C0 0.895431 0.895431 0 2 0H16C17.1046 0 18 0.895431 18 2V4V16C18 17.1046 17.1046 18 16 18H2C0.895431 18 0 17.1046 0 16V4ZM4 7H6V9H4V7ZM6 11H4V13H6V11ZM8 7H10V9H8V7ZM14 7H12V9H14V7ZM8 11H10V13H8V11ZM14 11H12V13H14V11Z" fill="black"/>
+</svg>

skatepark/assets/svg/post-tag.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0.25C0.585786 0.25 0.25 0.585786 0.25 1V8.82613C0.25 9.02516 0.329111 9.21602 0.469909 9.3567L7.19079 16.0715C7.40564 16.2865 7.66073 16.4571 7.94149 16.5735C8.22252 16.69 8.52376 16.75 8.82799 16.75C9.13222 16.75 9.43346 16.69 9.71449 16.5735C9.99539 16.457 10.2509 16.286 10.4658 16.0709L16.0754 10.4599L15.545 9.92961L16.0769 10.4583C16.5081 10.0245 16.75 9.43771 16.75 8.82613C16.75 8.21454 16.5081 7.62776 16.0769 7.19396L9.35448 0.469739C9.21382 0.329045 9.02303 0.25 8.82408 0.25H1ZM15.25 8.82613C15.25 9.04127 15.165 9.24764 15.0136 9.40031L9.4044 15.011C9.32872 15.0868 9.23886 15.1469 9.13995 15.1879C9.04105 15.2289 8.93505 15.25 8.82799 15.25C8.72094 15.25 8.61493 15.2289 8.51603 15.1879C8.41713 15.1469 8.32666 15.0862 8.25097 15.0104L1.75 8.51527V1.75H8.51336L15.0137 8.252C15.165 8.40466 15.25 8.61101 15.25 8.82613ZM5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6Z" fill="black"/>
+</svg>

skatepark/assets/theme.css

@@ -370,14 +370,16 @@ a {
 
 .wp-block-post-comments .comment-meta > a,
 .wp-block-post-comments .comment-body > p > a,
-.wp-block-post-comments .comment-edit-link {
+.wp-block-post-comments .comment-edit-link,
+.post-meta a {
 	-webkit-text-decoration-line: underline;
 	        text-decoration-line: underline;
 }
 
 .wp-block-post-comments .comment-meta > a:hover,
 .wp-block-post-comments .comment-body > p > a:hover,
-.wp-block-post-comments .comment-edit-link:hover {
+.wp-block-post-comments .comment-edit-link:hover,
+.post-meta a:hover {
 	-webkit-text-decoration-line: none;
 	        text-decoration-line: none;
 }
@@ -395,16 +397,14 @@ h6 a,
 
 .wp-block-site-title a,
 .wp-block-post-title a,
-.wp-block-query-pagination a,
-.post-meta a {
+.wp-block-query-pagination a {
 	-webkit-text-decoration-line: none;
 	        text-decoration-line: none;
 }
 
 .wp-block-site-title a:hover,
 .wp-block-post-title a:hover,
-.wp-block-query-pagination a:hover,
-.post-meta a:hover {
+.wp-block-query-pagination a:hover {
 	-webkit-text-decoration-line: underline;
 	        text-decoration-line: underline;
 }
@@ -421,6 +421,34 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	flex-direction: column;
 }
 
+.post-meta .wp-block-post-date,
+.post-meta .taxonomy-category,
+.post-meta .taxonomy-post_tag {
+	margin-bottom: 0.5em;
+}
+
+.post-meta .wp-block-post-date:before,
+.post-meta .taxonomy-category:before,
+.post-meta .taxonomy-post_tag:before {
+	height: 18px;
+	width: 18px;
+}
+
+.post-meta .wp-block-post-date:before {
+	-webkit-mask-image: url(svg/post-date.svg);
+	mask-image: url(svg/post-date.svg);
+}
+
+.post-meta .taxonomy-category:before {
+	-webkit-mask-image: url(svg/post-category.svg);
+	mask-image: url(svg/post-category.svg);
+}
+
+.post-meta .taxonomy-post_tag:before {
+	-webkit-mask-image: url(svg/post-tag.svg);
+	mask-image: url(svg/post-tag.svg);
+}
+
 header.wp-block-template-part > .wp-block-group {
 	align-items: flex-end;
 	justify-content: space-between;

skatepark/block-templates/singular.html

@@ -10,11 +10,11 @@
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"3em","right":"0em","bottom":"3em","left":"0em"}}},"layout":{"inherit":true}} -->
+<div class="wp-block-group" style="padding-top:3em;padding-right:0em;padding-bottom:3em;padding-left:0em">
 <!-- wp:columns {"align":"wide"} -->
-<div class="wp-block-columns alignwide"><!-- wp:column -->
-	<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"width":"58%"} -->
+	<div class="wp-block-column" style="flex-basis:58%"><!-- wp:separator {"className":"is-style-wide"} -->
 	<hr class="wp-block-separator is-style-wide"/>
 	<!-- /wp:separator -->
 	<!-- wp:post-author {"showBio":true} /-->

skatepark/child-theme.json

@@ -270,6 +270,11 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/post-terms": {
+				"typography": {
+					"fontWeight": "500"
+				}
+			},
 			"core/post-title": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
@@ -278,6 +283,11 @@
 					"lineHeight": 1.2
 				}
 			},
+			"core/post-date": {
+				"typography": {
+					"fontWeight": "500"
+				}
+			},
 			"core/separator": {
 				"border": {
 					"width": "0 0 3px 0"

skatepark/sass/elements/_links.scss

@@ -13,7 +13,8 @@ a {
 
 .wp-block-post-comments .comment-meta > a,
 .wp-block-post-comments .comment-body > p > a,
-.wp-block-post-comments .comment-edit-link {
+.wp-block-post-comments .comment-edit-link,
+.post-meta a {
 	text-decoration-line: underline;
 	&:hover {
 		text-decoration-line: none;
@@ -33,8 +34,7 @@ h6 a,
 }
 .wp-block-site-title a,
 .wp-block-post-title a,
-.wp-block-query-pagination a,
-.post-meta a {
+.wp-block-query-pagination a {
 	text-decoration-line: none;
 	&:hover {
 		text-decoration-line: underline;

skatepark/sass/elements/_post-meta.scss

@@ -1,3 +1,28 @@
 .post-meta {
 	flex-direction: column;
+
+	.wp-block-post-date,
+	.taxonomy-category,
+	.taxonomy-post_tag {
+		margin-bottom: 0.5em;
+		&:before {
+			height: 18px;
+			width: 18px;
+		}
+	}
+
+	.wp-block-post-date:before {
+		-webkit-mask-image: url(svg/post-date.svg);
+		mask-image: url(svg/post-date.svg);
+	}
+
+	.taxonomy-category:before  {
+		-webkit-mask-image: url(svg/post-category.svg);
+		mask-image: url(svg/post-category.svg);
+	}
+
+	.taxonomy-post_tag:before {
+		-webkit-mask-image: url(svg/post-tag.svg);
+		mask-image: url(svg/post-tag.svg);
+	}
 }

skatepark/theme.json

@@ -481,7 +481,8 @@
 					"text": "var(--wp--custom--color--foreground)"
 				},
 				"typography": {
-					"fontSize": "var(--wp--preset--font-size--small)"
+					"fontSize": "var(--wp--preset--font-size--small)",
+					"fontWeight": "500"
 				}
 			},
 			"core/pullquote": {
@@ -535,6 +536,11 @@
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"fontStyle": "normal"
 				}
+			},
+			"core/post-terms": {
+				"typography": {
+					"fontWeight": "500"
+				}
 			}
 		},
 		"color": {