eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
hugo-theme-termlite/assets/css/099_taxonomy_list.css

47 lines
770 B
CSS
Raw Normal View History

A generic taxonomy list template This template produces a <ul> list of the terms in the provided taxonomy. The taxonomy is passed to the template via the `.term` argument, which is a string name of the taxnomy.
2024-07-23 08:48:46 -07:00
/***************************
* COMPONENT: TAXONOMY LIST
***************************/
.taxonomy-list {
Clean up the taxonomy list Make the name of the taxonomy copyable by putting it in the dom, rather than in the CSS content:.
2024-10-08 21:58:57 -07:00
display: flex;
gap: 1ch;
font-family: var(--font-family-monospace);
.taxonomy-list__name {
color: var(--text-color-secondary);
text-transform: uppercase;
Get taxonomy lists to wrap correctly 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.
2024-10-12 09:22:35 -07:00
white-space: nowrap;
Clean up the taxonomy list Make the name of the taxonomy copyable by putting it in the dom, rather than in the CSS content:.
2024-10-08 21:58:57 -07:00
&::after {
content: " =";
A generic taxonomy list template This template produces a <ul> list of the terms in the provided taxonomy. The taxonomy is passed to the template via the `.term` argument, which is a string name of the taxnomy.
2024-07-23 08:48:46 -07:00
}
Clean up the taxonomy list Make the name of the taxonomy copyable by putting it in the dom, rather than in the CSS content:.
2024-10-08 21:58:57 -07:00
}
.taxonomy-list__terms {
Get taxonomy lists to wrap correctly 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.
2024-10-12 09:22:35 -07:00
--spacing: 1ch;
A generic taxonomy list template This template produces a <ul> list of the terms in the provided taxonomy. The taxonomy is passed to the template via the `.term` argument, which is a string name of the taxnomy.
2024-07-23 08:48:46 -07:00
Get taxonomy lists to wrap correctly 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.
2024-10-12 09:22:35 -07:00
display: flex;
flex-wrap: wrap;
gap: 0 var(--spacing);
list-style-type: none;
margin-block: 0;
padding-inline-start: 0;
Restyle <ol> and <ul> Use * for unordered lists and fix the number placement in ordered lists
2024-10-07 21:02:29 -07:00
Get taxonomy lists to wrap correctly 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.
2024-10-12 09:22:35 -07:00
li {
padding-inline-start: 0;
white-space: nowrap;
}
Clean up the taxonomy list Make the name of the taxonomy copyable by putting it in the dom, rather than in the CSS content:.
2024-10-08 21:58:57 -07:00
Get taxonomy lists to wrap correctly 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.
2024-10-12 09:22:35 -07:00
li:not(:first-child)::before {
color: var(--text-color-secondary);
content: ":";
margin-inline-end: var(--spacing);
}
Clean up the taxonomy list Make the name of the taxonomy copyable by putting it in the dom, rather than in the CSS content:.
2024-10-08 21:58:57 -07:00
}
A generic taxonomy list template This template produces a <ul> list of the terms in the provided taxonomy. The taxonomy is passed to the template via the `.term` argument, which is a string name of the taxnomy.
2024-07-23 08:48:46 -07:00
}
Reference in a new issue Copy permalink