hugo-theme-termlite/assets/css/050_lists.css
Eryn Wells 08e787b1d9 Reformat definition list definitions
Large inline margins and small text. No more italics. I think this is easier to
read and more consistent with the surrounding text.
2024-11-16 09:40:01 -08:00

80 lines
1 KiB
CSS

/*******
* LISTS
*******/
dl,
ol,
ul
{
grid-column: main-start / main-end;
margin-block: 0;
}
ol {
display: grid;
grid-template-columns: min-content 1fr;
list-style: none;
padding-inline-start: 0;
&:not([start]) {
counter-reset: list-item 1;
}
&[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-size: var(--text-s);
margin-inline: var(--space-l);
&:has(+ dt) {
margin-block-end: var(--space-paragraph);
}
}
}