Restyle <ol> and <ul>
Use * for unordered lists and fix the number placement in ordered lists
This commit is contained in:
parent
6753b7328c
commit
f078b30866
4 changed files with 54 additions and 5 deletions
|
@ -14,12 +14,52 @@ ul
|
||||||
grid-column: main-start / main-end;
|
grid-column: main-start / main-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol, ul {
|
ol {
|
||||||
padding-inline-start: var(--space-l);
|
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 {
|
ul {
|
||||||
font-size: var(--text-s);
|
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 {
|
dl {
|
||||||
|
|
|
@ -7,5 +7,9 @@
|
||||||
**************/
|
**************/
|
||||||
|
|
||||||
.page-footer {
|
.page-footer {
|
||||||
margin-block-start: var(--space-xl);
|
margin-block-start: var(--space-xl);
|
||||||
|
|
||||||
|
:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
|
padding-inline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.next-page {
|
.next-page {
|
||||||
|
|
|
@ -23,6 +23,10 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
li:not(:last-child)::after {
|
li:not(:last-child)::after {
|
||||||
color: var(--text-color-secondary);
|
color: var(--text-color-secondary);
|
||||||
content: ":";
|
content: ":";
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue