Browse Source

added post meta stuff, fixed class on BB and Mayland

Maggie 3 years ago
parent
commit
ce0f6c4d05

+ 6 - 6
blockbase/assets/ponyfill.css

@@ -813,16 +813,16 @@ p.has-background {
 
 .post-meta .wp-block-post-author,
 .post-meta .wp-block-post-date,
-.post-meta .wp-block-post-tags,
-.post-meta .wp-block-post-hierarchical-terms {
+.post-meta .taxonomy-post_tag,
+.post-meta .taxonomy-category {
 	display: flex;
 	margin-right: calc(2 * var(--wp--custom--margin--baseline));
 }
 
 .post-meta .wp-block-post-author:before,
 .post-meta .wp-block-post-date:before,
-.post-meta .wp-block-post-tags:before,
-.post-meta .wp-block-post-hierarchical-terms:before {
+.post-meta .taxonomy-post_tag:before,
+.post-meta .taxonomy-category:before {
 	align-self: center;
 	content: '';
 	display: inline-block;
@@ -842,12 +842,12 @@ p.has-background {
 	mask-image: url(svg/post-date.svg);
 }
 
-.post-meta .wp-block-post-hierarchical-terms:before {
+.post-meta .taxonomy-category:before {
 	-webkit-mask-image: url(svg/post-category.svg);
 	mask-image: url(svg/post-category.svg);
 }
 
-.post-meta .wp-block-post-tags:before {
+.post-meta .taxonomy-post_tag:before {
 	-webkit-mask-image: url(svg/post-tag.svg);
 	mask-image: url(svg/post-tag.svg);
 }

+ 14 - 0
blockbase/sass/base/_mixins.scss

@@ -12,3 +12,17 @@
 	width: 1px;
 	word-wrap: normal !important;
 }
+
+@mixin post-meta-icon {
+	display: flex;
+	margin-right: calc(2 * var(--wp--custom--margin--baseline) );
+	&:before {
+		align-self: center;
+		content: '';
+		display: inline-block;
+		margin-right: calc(0.5 * var(--wp--custom--margin--baseline) );
+		height: 16px;
+		width: 16px;
+		background-color: currentColor;
+	}
+}

+ 5 - 19
blockbase/sass/post/_meta.scss

@@ -4,23 +4,9 @@
 
 	.wp-block-post-author,
 	.wp-block-post-date,
-	.wp-block-post-tags,
-	.wp-block-post-hierarchical-terms {
-		display: flex;
-		margin-right: calc(2 * var(--wp--custom--margin--baseline) );
-	}
-
-	.wp-block-post-author:before,
-	.wp-block-post-date:before,
-	.wp-block-post-tags:before,
-	.wp-block-post-hierarchical-terms:before {
-		align-self: center;
-		content: '';
-		display: inline-block;
-		margin-right: calc(0.5 * var(--wp--custom--margin--baseline) );
-		height: 16px;
-		width: 16px;
-		background-color: currentColor;
+	.taxonomy-post_tag,
+	.taxonomy-category {
+		@include post-meta-icon;
 	}
 
 	.wp-block-post-author:before {
@@ -33,12 +19,12 @@
 		mask-image: url(svg/post-date.svg);
 	}
 
-	.wp-block-post-hierarchical-terms:before  {
+	.taxonomy-category:before  {
 		-webkit-mask-image: url(svg/post-category.svg);
 		mask-image: url(svg/post-category.svg);
 	}
 
-	.wp-block-post-tags:before {
+	.taxonomy-post_tag:before {
 		-webkit-mask-image: url(svg/post-tag.svg);
 		mask-image: url(svg/post-tag.svg);
 	}

+ 2 - 2
mayland-blocks/assets/theme.css

@@ -60,12 +60,12 @@ img {
 	mask-image: url(svg/post-date.svg);
 }
 
-.post-meta .wp-block-post-hierarchical-terms:before {
+.post-meta .taxonomy-category:before {
 	-webkit-mask-image: url(svg/post-category.svg);
 	mask-image: url(svg/post-category.svg);
 }
 
-.post-meta .wp-block-post-tags:before {
+.post-meta .taxonomy-post_tag:before {
 	-webkit-mask-image: url(svg/post-tag.svg);
 	mask-image: url(svg/post-tag.svg);
 }

+ 2 - 2
mayland-blocks/sass/theme.scss

@@ -63,12 +63,12 @@ img {
 	mask-image: url(svg/post-date.svg);
 }
 
-.post-meta .wp-block-post-hierarchical-terms:before {
+.post-meta .taxonomy-category:before {
 	-webkit-mask-image: url(svg/post-category.svg);
 	mask-image: url(svg/post-category.svg);
 }
 
-.post-meta .wp-block-post-tags:before {
+.post-meta .taxonomy-post_tag:before {
 	-webkit-mask-image: url(svg/post-tag.svg);
 	mask-image: url(svg/post-tag.svg);
 }

+ 17 - 0
skatepark/assets/theme.css

@@ -42,6 +42,19 @@
 	color: var(--wp--preset--color--background);
 }
 
+.wp-block-post-author__name {
+	font-weight: 700;
+}
+
+.wp-block-post-author__bio {
+	margin-top: 0;
+	font-size: var(--wp--preset--font-size--small);
+}
+
+.wp-block-post-author__avatar img {
+	border-radius: 50%;
+}
+
 .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover,
 .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus,
@@ -404,6 +417,10 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 	text-decoration: none;
 }
 
+.post-meta {
+	flex-direction: column;
+}
+
 header.wp-block-template-part > .wp-block-group {
 	align-items: flex-end;
 	justify-content: space-between;

+ 31 - 5
skatepark/block-templates/singular.html

@@ -1,16 +1,42 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-<!-- wp:post-title /-->
-</div>
+<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"2.5em"}}}} -->
+<div class="wp-block-group" style="padding-top:2.5em"><!-- wp:post-title {"level":1,"align":"wide"} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
-<!-- wp:post-featured-image {"align":"full"} /-->
+<!-- wp:post-featured-image {"align":"full","style":{"color":{"duotone":["#000","#B9FB9C"]}}} /-->
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group">
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator is-style-wide"/>
+	<!-- /wp:separator -->
+	<!-- wp:post-author {"showBio":true} /-->
+	</div>
+	<!-- /wp:column -->
+	
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:separator {"className":"is-style-wide"} -->
+	<hr class="wp-block-separator is-style-wide"/>
+	<!-- /wp:separator -->
+	<!-- wp:group {"className":"post-meta"} -->
+	<div class="wp-block-group post-meta">
+	<!-- wp:post-date {"fontSize":"tiny"} /-->
+	<!-- wp:post-terms {"term":"category","fontSize":"tiny"} /-->
+	<!-- wp:post-terms {"term": "post_tag", "fontSize":"tiny"} /--></div>
+	<!-- /wp:group -->
+		
+	</div>
+	<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->
+
 </main>
 <!-- /wp:group -->
 

+ 4 - 1
skatepark/child-theme.json

@@ -272,7 +272,10 @@
 			},
 			"core/post-title": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--red-hat-display)"
+					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
+					"fontSize": "min(max(48px, 7vw), 72px)",
+					"fontWeight": "700",
+					"lineHeight": 1.2
 				}
 			},
 			"core/separator": {

+ 14 - 0
skatepark/sass/blocks/_author.scss

@@ -0,0 +1,14 @@
+.wp-block-post-author__name {
+	font-weight: 700;
+}
+
+.wp-block-post-author__bio {
+	margin-top: 0;
+	font-size: var(--wp--preset--font-size--small);
+}
+
+.wp-block-post-author__avatar {
+	img {
+		border-radius: 50%;
+	}
+}

+ 3 - 0
skatepark/sass/elements/_post-meta.scss

@@ -0,0 +1,3 @@
+.post-meta {
+	flex-direction: column;
+}

+ 2 - 0
skatepark/sass/theme.scss

@@ -2,6 +2,7 @@
 @import "../../blockbase/sass/base/mixins";
 @import "base/text";
 @import "base/mixins";
+@import "blocks/author";
 @import "blocks/buttons";
 @import "blocks/post-comments";
 @import "blocks/query";
@@ -13,5 +14,6 @@
 @import "block-patterns/pre-footer";
 @import "elements/headings";
 @import "elements/links";
+@import "elements/post-meta";
 @import "templates/header";
 @import "templates/index";

+ 3 - 2
skatepark/theme.json

@@ -470,8 +470,9 @@
 			"core/post-title": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--red-hat-display)",
-					"fontSize": "var(--wp--preset--font-size--huge)",
-					"lineHeight": "var(--wp--custom--heading--typography--line-height)"
+					"fontSize": "min(max(48px, 7vw), 72px)",
+					"lineHeight": 1.2,
+					"fontWeight": "700"
 				}
 			},
 			"core/post-date": {