75 lines
1.3 KiB
CSS
75 lines
1.3 KiB
CSS
:root {
|
|
--list-item-block-gap: var(--body-item-spacing);
|
|
}
|
|
|
|
@layer section {
|
|
.list {
|
|
gap: var(--list-item-block-gap) 0;
|
|
}
|
|
|
|
.list > h1,
|
|
.list > header {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
.list > .post {
|
|
grid-column: wide-content-start / wide-content-end;
|
|
}
|
|
|
|
@supports (grid-template-columns: subgrid) {
|
|
.list > .post {
|
|
--body-item-spacing: 2rem;
|
|
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
gap: var(--body-item-spacing) 0;
|
|
}
|
|
}
|
|
|
|
.list .post header {
|
|
grid-column: wide-content-start / content-end;
|
|
}
|
|
|
|
@supports (grid-template-columns: subgrid) {
|
|
.list .post header {
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
}
|
|
}
|
|
|
|
.list .post time {
|
|
font-variant-numeric: tabular-nums;
|
|
grid-column: wide-content-start;
|
|
justify-self: end;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.list .post time {
|
|
grid-column: content-start / content-end;
|
|
justify-self: start;
|
|
line-height: var(--line-height);
|
|
}
|
|
}
|
|
|
|
.post {
|
|
grid-column: gutter-start / gutter-end;
|
|
}
|
|
|
|
.post p,
|
|
.post .tags,
|
|
.post .title {
|
|
grid-column: content-start / content-end;
|
|
}
|
|
|
|
li > article > p:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--h5-size);
|
|
}
|
|
|
|
.title, .title a {
|
|
color: var(--color);
|
|
}
|
|
}
|