Tweak - Knowledgebase tags

techlore · Dec 15, 2024 · 4e62443 · 4e62443
1 parent 9af024c
commit 4e62443
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/_includes/c_knowledgebase-item.html b/_includes/c_knowledgebase-item.html
@@ -55,7 +55,7 @@ <h4 class="knowledgebase-item__title is-flex is-gap-1">
 				</span>
 			</h4>
 			{% if include.item.tags.size > 0 %}
-				<div class="knowledgebase-item__tags is-size-7 is-family-monospace">
+				<div class="knowledgebase-item__tags is-size-7 is-flex is-gap-1 is-multiline is-family-monospace">
 					{% for tag in include.item.tags -%}<span class="knowledgebase-item__tag">{{ tag  }}</span>{%- endfor %}
 				</div>
 			{% endif %}

diff --git a/_sass/_knowledgebase.scss b/_sass/_knowledgebase.scss
@@ -81,11 +81,10 @@
 
 .knowledgebase-item__tags {
 	position: relative;
-	background-color: var(--custom-knowledgebase-tags-bg);
-	padding: calc(var(--bulma-size-5) * .25) calc(var(--bulma-size-5) * .75);
-	border-radius: var(--bulma-size-5);
 	margin-top: calc(var(--bulma-size-5) * .5);
+	flex-wrap: wrap;
 
+	// --- blue line
 	&:after {
 		content: '';
 		width: calc(var(--bulma-size-5) * 4);
@@ -97,14 +96,9 @@
 	}
 }
 
-.knowledgebase-item__tag:not(:last-child):not(.knowledgebase-item__tag--icon) {
-	&:after {
-		content: ' \2022  ';
-	}
-}
-
-.knowledgebase-item__tag--icon {
-	aspect-ratio: 1;
-	display: inline-flex;
-	padding: calc(var(--bulma-size-5) * .25);
+.knowledgebase-item__tag {
+	background-color: var(--custom-knowledgebase-tags-bg);
+	padding: calc(var(--bulma-size-5) * .25) calc(var(--bulma-size-5) * .75);
+	border-radius: var(--bulma-size-5);
+	white-space: nowrap;
 }