Eryn Wells
448c48281c
Do not allow any element to wrap (white-space: nowrap) but do allow the flexbox to wrap. Shift the colon separators to the ::before pseudoelement so the colon appears on the leading side of the taxonomy item when it wraps. Remove the vertical gap from the flexbox.
46 lines
770 B
CSS
46 lines
770 B
CSS
|
|
|
|
|
|
|
|
|
|
/***************************
|
|
* COMPONENT: TAXONOMY LIST
|
|
***************************/
|
|
|
|
.taxonomy-list {
|
|
display: flex;
|
|
gap: 1ch;
|
|
font-family: var(--font-family-monospace);
|
|
|
|
.taxonomy-list__name {
|
|
color: var(--text-color-secondary);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
|
|
&::after {
|
|
content: " =";
|
|
}
|
|
}
|
|
|
|
.taxonomy-list__terms {
|
|
--spacing: 1ch;
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0 var(--spacing);
|
|
list-style-type: none;
|
|
margin-block: 0;
|
|
padding-inline-start: 0;
|
|
|
|
li {
|
|
padding-inline-start: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
li:not(:first-child)::before {
|
|
color: var(--text-color-secondary);
|
|
content: ":";
|
|
margin-inline-end: var(--spacing);
|
|
}
|
|
}
|
|
}
|