Browse Source

Skatepark: Fix multiline tags and categories (#5021)

Co-authored-by: Jason Crist <jcrist@pbking.com>
Sarah Norris 3 years ago
parent
commit
7dbb449325

+ 1 - 0
blockbase/assets/ponyfill.css

@@ -918,6 +918,7 @@ p.wp-block-site-tagline {
 .is-style-post-category-icon,
 .is-style-post-tag-icon {
 	display: flex;
+	flex-wrap: wrap;
 }
 
 .is-style-post-author-icon:before,

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

@@ -15,6 +15,7 @@
 
 @mixin post-meta-icon {
 	display: flex;
+	flex-wrap: wrap;
 	&:before {
 		align-self: center;
 		content: '';

+ 7 - 0
skatepark/assets/theme.css

@@ -471,6 +471,10 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 .post-meta .is-style-post-category-icon,
 .post-meta .is-style-post-tag-icon {
 	margin-bottom: 0.5em;
+	overflow-wrap: normal;
+	padding-left: calc( 18px + var(--wp--custom--gap--baseline));
+	position: relative;
+	word-break: normal;
 }
 
 .is-style-post-date-icon:before,
@@ -478,6 +482,9 @@ a:not(.ab-item):not(.screen-reader-shortcut):focus {
 .is-style-post-tag-icon:before {
 	height: 18px;
 	width: 18px;
+	position: absolute;
+	left: 0;
+	top: 3px;
 }
 
 .is-style-post-date-icon:before {

+ 7 - 1
skatepark/sass/elements/_post-meta.scss

@@ -8,8 +8,11 @@
 	.is-style-post-category-icon,
 	.is-style-post-tag-icon {
 		margin-bottom: 0.5em;
+		overflow-wrap: normal;
+		padding-left: calc( 18px + var(--wp--custom--gap--baseline));
+		position: relative;
+		word-break: normal;
 	}
-
 }
 
 .is-style-post-date-icon,
@@ -18,6 +21,9 @@
 	&:before {
 		height: 18px;
 		width: 18px;
+		position: absolute;
+		left: 0;
+		top: 3px;
 	}
 }