Restyle <ol> and <ul>

Use * for unordered lists and fix the number placement in ordered lists
This commit is contained in:
Eryn Wells 2024-10-07 21:02:29 -07:00
parent 6753b7328c
commit f078b30866
4 changed files with 54 additions and 5 deletions

View file

@ -14,12 +14,52 @@ ul
grid-column: main-start / main-end;
}
ol, ul {
padding-inline-start: var(--space-l);
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) ".";
}
}
}
li::marker {
font-size: var(--text-s);
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 {

View file

@ -7,5 +7,9 @@
**************/
.page-footer {
margin-block-start: var(--space-xl);
margin-block-start: var(--space-xl);
:last-child {
margin-bottom: 0;
}
}

View file

@ -17,6 +17,7 @@
li {
display: block;
padding-inline: 0;
}
.next-page {

View file

@ -23,6 +23,10 @@
text-transform: uppercase;
}
li {
padding-inline-start: 0;
}
li:not(:last-child)::after {
color: var(--text-color-secondary);
content: ":";