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

108
static/styles/root.css
View file

@ -358,34 +358,78 @@ p {
p { margin-block-end: var(--body-item-spacing); }
p:last-child { margin-block-end: 0; }
.social menu li + li {
margin-left: var(--social-menu-padding);
.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";
}
}
.social {
display: flex;
letter-spacing: 2px;
margin-left: auto;
.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;
}
}
.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);
.post-list li time:nth-of-type(1) {
grid-area: month;
text-align: end;
}
.social a span {
display: none;
.post-list li time:nth-of-type(2) {
grid-area: day;
text-align: end;
}
.social > li + li:before {
color: var(--dark);
padding: 0 0.5rem;
.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-title {
align-items: baseline;
display: flex;
@ -417,6 +461,34 @@ p:last-child { margin-block-end: 0; }
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 {
aspect-ratio: 16 / 9;
margin-bottom: -3px;