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

Move some post-list styles to root.css since they get used in taxonomy templates too

Browse source
This commit is contained in:
Eryn Wells 2022-10-10 08:40:53 -07:00
parent db890fb19f
commit 1cdc11c477
2 changed files with 90 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

71
content/blog/blog.css
View file

@ -18,77 +18,6 @@
.post-content > .highlight { margin-block-end: var(--body-item-spacing); } .post-content > .highlight { margin-block-end: var(--body-item-spacing); }
.post-list {
list-style: none;
margin: 0;
padding: 0;
}
@supports (display: subgrid) {
.post-list {
align-items: baseline;
display: grid;
gap: 1em;
grid-template-columns:
minmax(150px, max-content) minmax(20px, max-content) 3px auto;
grid-template-areas: "month day line title";
}
}
.post-list li {
align-items: baseline;
border-radius: 6px;
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 h1 {
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-nav { .post-nav {
align-items: baseline; align-items: baseline;
display: flex; display: flex;

108
static/styles/root.css
View file

@ -358,34 +358,78 @@ p {
p { margin-block-end: var(--body-item-spacing); } p { margin-block-end: var(--body-item-spacing); }
p:last-child { margin-block-end: 0; } p:last-child { margin-block-end: 0; }
.social menu li + li { .post-list {
margin-left: var(--social-menu-padding); list-style: none;
margin: 0;
padding: 0;
}
@supports (display: subgrid) {
.post-list {
align-items: baseline;
display: grid;
gap: 1em;
grid-template-columns:
minmax(150px, max-content) minmax(20px, max-content) 3px auto;
grid-template-areas: "month day line title";
}
} }
.social { .post-list li {
display: flex; align-items: baseline;
letter-spacing: 2px; border-radius: 6px;
margin-left: auto; 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;
}
} }
.social a { .post-list li time:nth-of-type(1) {
background-image: var(--url); grid-area: month;
background-repeat: no-repeat; text-align: end;
background-size: var(--menu-icon-size);
display: block;
height: var(--menu-icon-size);
width: var(--menu-icon-size);
} }
.social a span { .post-list li time:nth-of-type(2) {
display: none; grid-area: day;
text-align: end;
} }
.social > li + li:before { .post-list li h1 {
color: var(--dark); font-family: var(--font-family-body);
padding: 0 0.5rem; 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 { .post-title {
align-items: baseline; align-items: baseline;
display: flex; display: flex;
@ -417,6 +461,34 @@ p:last-child { margin-block-end: 0; }
width: 100%; width: 100%;
} }
.social menu li + li {
margin-left: var(--social-menu-padding);
}
.social {
display: flex;
letter-spacing: 2px;
margin-left: auto;
}
.social a {
background-image: var(--url);
background-repeat: no-repeat;
background-size: var(--menu-icon-size);
display: block;
height: var(--menu-icon-size);
width: var(--menu-icon-size);
}
.social a span {
display: none;
}
.social > li + li:before {
color: var(--dark);
padding: 0 0.5rem;
}
.youtube iframe { .youtube iframe {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
margin-bottom: -3px; margin-bottom: -3px;