eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Redo the blog list layout to make it work a little better on narrow screens

Browse source
This commit is contained in:
Eryn Wells 2022-10-30 11:30:30 -07:00
parent 8b4273fcae
commit e7b2cb493a
5 changed files with 70 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

58
content/blog/blog.css
View file

@ -34,6 +34,64 @@
margin-block-start: var(--body-item-spacing);
}
.blog.list > ul {
list-style: none;
}
.blog.list > ul > li {
align-items: baseline;
border-radius: 6px;
display: grid;
gap: 1rem;
grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content;
margin-block-end: 0.25rem;
transition: background-color 0.25s;
}
.blog.list > ul > li:hover {
background-color: var(--post-item-highlight-color);
}
.blog.list > ul > li > a {
color: inherit;
}
.blog.list > ul > li > a:hover {
text-decoration: none;
}
.blog.list > ul > li > .draft {
align-self: center;
}
@supports (grid-template-columns: subgrid) {
.blog.list {
display: grid;
gap: 1rem;
grid-template-columns: minmax(min-content, 10vh) minmax(min-content, 3vh) auto max-content;
}
.blog.list > ul {
display: grid;
row-gap: 0.25rem;
grid-column: 1 / -1;
grid-template-columns: subgrid;
list-style: none;
}
.blog.list > ul > li {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
margin-block-end: 0;
}
.blog.list > h5 {
grid-column: 1 / -1;
margin-block: 1rem 0;
}
.blog.list > h5:first-child {
margin-block-start: 0;
}
}
.blog.list > ul > li > :first-child {
text-align: end;
}
.blog .tags {
display: flex;
padding-inline-start: 0;