hugo-theme-termlite/assets/css/050_lists.css
Eryn Wells f078b30866 Restyle <ol> and <ul>
Use * for unordered lists and fix the number placement in ordered lists
2024-10-07 21:02:29 -07:00

76 lines
1 KiB
CSS

/*******
* LISTS
*******/
dl,
ol,
ul
{
grid-column: main-start / main-end;
}
ol {
display: grid;
grid-template-columns: min-content 1fr;
list-style: none;
padding-inline-start: 0;
&:not([start]) {
counter-reset: list-item;
}
&[start] {
counter-reset: list-item attr(start integer);
}
li {
display: grid;
gap: 1ch;
grid-column: 1 / -1;
grid-template-columns: subgrid;
/* TODO: Figure out support for <li value="42"> */
&:not([value]) {
counter-increment: list-item;
}
&::before {
content: counter(list-item) ".";
}
}
}
ul {
list-style-type: "*";
padding-inline-start: 1ch;
li {
padding-inline-start: 1ch;
}
}
li {
&::marker, &::before {
color: var(--text-color-secondary);
font-family: var(--font-family-monospace);
}
}
dl {
dd {
color: var(--text-color-secondary);
font-style: italic;
line-height: 1.2;
margin-inline-start: var(--space-l);
&:has(+ dt) {
margin-block-end: var(--space-xs);
}
}
}