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

Rewrite home page content

Browse source 
Add the latest widget that lays out two blog posts and four photos in a grid
This commit is contained in:
Eryn Wells 2024-10-27 09:57:03 -06:00
parent d5296995de
commit 5e58416bc6
2 changed files with 79 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

32
assets/css/099_home_latest.css
View file

@ -1,24 +1,42 @@
.home-latest {
display: grid;
gap: 1ch;
grid-column: main-start / main-end;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: min-content min-content;
grid-template-areas:
"blog1 photo"
"blog2 photo";
"blog1 blog1 blog2 blog2"
"photo1 photo2 photo3 photo4";
.home-latest__blog {
margin-block-end: var(--space-m);
}
.home-latest__blog:nth-of-type(1) {
grid-area: blog1;
border-right: 2px dashed var(--gray6);
padding-inline-end: var(--space-s);
}
.home-latest__blog:nth-of-type(2) {
grid-area: blog2;
padding-inline-start: var(--space-s);
}
.home-latest__photo {
border-left: 2px dashed var(--gray6);
padding-inline-start: 1ch;
grid-area: photo;
}
}
@media screen and (max-width: 480px) {
.home-latest {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(min-content, 4);
grid-template-areas:
"blog1 blog2"
"photo1 photo2"
"photo3 photo4";
}
}
p + .home-latest {
margin-block-start: var(--space-paragraph);
}