eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Get taxonomy lists to wrap correctly

Browse source 
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.
This commit is contained in:
Eryn Wells 2024-10-12 09:22:35 -07:00
parent b112558914
commit 448c48281c
1 changed files with 17 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

31
assets/css/099_taxonomy_list.css
View file

@ -15,6 +15,7 @@
.taxonomy-list__name {
color: var(--text-color-secondary);
text-transform: uppercase;
white-space: nowrap;
&::after {
content: " =";
@ -22,22 +23,24 @@
}
.taxonomy-list__terms {
--spacing: 1ch;
--spacing: 1ch;
display: flex;
gap: var(--spacing);
list-style-type: none;
margin-block: 0;
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 {
padding-inline-start: 0;
}
li:not(:last-child)::after {
color: var(--text-color-secondary);
content: ":";
margin-inline-start: var(--spacing);
}
li:not(:first-child)::before {
color: var(--text-color-secondary);
content: ":";
margin-inline-end: var(--spacing);
}
}
}