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