Set margin-block-end on all children of <main> instead of setting it on every item individually

This commit is contained in:
Eryn Wells 2022-11-24 12:15:53 -05:00
parent aa8c85c902
commit 75a2e3a8bf

View file

@ -150,7 +150,6 @@ figure {
display: inline-block;
line-height: 1;
margin: 0;
margin-block: 0 var(--body-item-spacing);
margin-inline: 0;
overflow: hidden;
max-width: var(--content-width);
@ -346,10 +345,6 @@ main {
width: 100%;
}
main > header {
margin-bottom: var(--body-item-spacing);
}
header.site > .grid > nav {
align-items: center;
display: flex;
@ -368,6 +363,7 @@ header.site > .grid > nav > li {
header.site > .grid > nav > .active { font-weight: bold; }
main > :first-child { margin-block-start: 0; }
main > :not(:last-child) { margin-block-end: var(--body-item-spacing); }
main > :last-child { margin-block-end: 0; }
nav.bulleted > li:first-child::before {
@ -391,11 +387,6 @@ nav.social > li:first-child { margin-inline-start: 0; }
p {
letter-spacing: 0.025em;
line-height: var(--body-line-height);
margin-block-end: var(--body-item-spacing);
}
ul, ol, dl {
margin-block-end: var(--body-item-spacing);
}
ul,
@ -562,7 +553,6 @@ footer > .tags > .chevron:hover {
table {
border: 1px solid var(--separator-color);
border-collapse: collapse;
margin-block-end: var(--body-item-spacing);
margin-inline: auto;
width: 50%;
}