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

48
static/styles/root.css
View file

@ -405,55 +405,7 @@ ol ol {
display: grid;
gap: 1em;
padding: 0.1em;
transition: background-color 0.25s;
}
@supports not (display: subgrid) {
.post-list li {
grid-template-columns: 100px 20px 3px auto;
grid-template-areas: "month day thing title";
}
}
@supports (display: subgrid) {
.post-list li {
display: subgrid;
}
}
.post-list li time:nth-of-type(1) {
grid-area: month;
text-align: end;
}
.post-list li time:nth-of-type(2) {
grid-area: day;
text-align: end;
}
.post-list li .title {
font-family: var(--font-family-body);
grid-area: title;
text-align: start;
}
.post-list li:hover {
background-color: var(--post-item-highlight-color);
}
.post-list h1 {
font-size: inherit;
font-weight: normal;
margin: 0;
padding: 0;
}
.post-list a {
color: inherit;
}
.post-list a:hover {
text-decoration: none;
}
.post-title {
align-items: baseline;