Fix the lists!

This commit is contained in:
Eryn Wells 2023-09-28 16:29:02 -07:00
parent c642a23ec3
commit fb7fd04fe9
3 changed files with 18 additions and 30 deletions

View file

@ -0,0 +1,9 @@
/* Eryn Wells <eryn@erynwells.me> */
article > :is(h1, h2, h3, h4, h5, h6) {
grid-column: content-start / content-end;
}
.blog.list {
gap: 4rem 0;
}

View file

@ -1,20 +0,0 @@
/* Eryn Wells <eryn@erynwells.me> */
:has(> img) {
grid-column: content-start / content-end;
line-height: 0;
}
@media (max-width: 639px) {
:has(> img) {
grid-column: gutter-start / gutter-end;
}
}
main {
gap: var(--body-item-spacing) 0;
}
article > :is(h1, h2, h3, h4, h5, h6) {
grid-column: content-start / content-end;
}

View file

@ -1,5 +1,5 @@
:root { :root {
--body-item-spacing: 4rem; --body-item-spacing: 2rem;
--content-width: 80rem; --content-width: 80rem;
--content-columns: 5; --content-columns: 5;
--gutter-width: 3rem; --gutter-width: 3rem;
@ -135,10 +135,6 @@
grid-column: wide-content-start / wide-content-end; grid-column: wide-content-start / wide-content-end;
} }
p, ul {
grid-column: content-start / content-end;
}
nav.bulleted>li:first-child::before { nav.bulleted>li:first-child::before {
margin-inline: 0; margin-inline: 0;
} }
@ -147,20 +143,25 @@
margin-inline: var(--nav-bulleted-spacing); margin-inline: var(--nav-bulleted-spacing);
} }
ul, ol {
list-style-position: inside;
}
ul, ul,
ol, ol,
dl, dl,
:is(ul, ol) > li, :is(ul, ol) > li,
dl > dt { dl > dt {
margin-inline-start: calc(var(--body-item-spacing) + 2px); margin-inline-start: var(--body-item-spacing);
} }
:is(ul, ol) > li { :is(ul, ol) > li:not(:last-child) {
margin-block-start: 1rem; margin-block-end: calc(var(--body-item-spacing) / 2);
} }
:is(ul, ol) > li > :is(ul, ol) { :is(ul, ol) > li > :is(ul, ol) {
margin-inline-start: 0; margin-inline-start: 0;
margin-block-start: calc(var(--body-item-spacing) / 2);
} }
table { table {
@ -210,8 +211,6 @@
@supports (grid-template-columns: subgrid) { @supports (grid-template-columns: subgrid) {
.list > .post { .list > .post {
--body-item-spacing: 2rem;
display: grid; display: grid;
grid-template-columns: subgrid; grid-template-columns: subgrid;
gap: var(--body-item-spacing) 0; gap: var(--body-item-spacing) 0;