Add a home/latest widget
Add a shortcode and some styles for a two column, two row grid of latest posts.
This commit is contained in:
parent
f55b445c1f
commit
5c2942bc56
2 changed files with 43 additions and 0 deletions
24
assets/css/099_home_latest.css
Normal file
24
assets/css/099_home_latest.css
Normal file
|
@ -0,0 +1,24 @@
|
|||
.home-latest {
|
||||
display: grid;
|
||||
gap: 1ch;
|
||||
grid-column: main-start / main-end;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-areas:
|
||||
"blog1 photo"
|
||||
"blog2 photo";
|
||||
|
||||
.home-latest__blog:nth-of-type(1) {
|
||||
grid-area: blog1;
|
||||
}
|
||||
|
||||
.home-latest__blog:nth-of-type(2) {
|
||||
grid-area: blog2;
|
||||
}
|
||||
|
||||
.home-latest__photo {
|
||||
border-left: 2px dashed var(--gray6);
|
||||
padding-inline-start: 1ch;
|
||||
grid-area: photo;
|
||||
}
|
||||
}
|
19
layouts/shortcodes/home/latest.html
Normal file
19
layouts/shortcodes/home/latest.html
Normal file
|
@ -0,0 +1,19 @@
|
|||
{{- $blogSection := site.GetPage "blog" -}}
|
||||
{{- $latestBlogPosts := $blogSection.Pages.ByDate.Reverse.Limit 2 -}}
|
||||
|
||||
{{- $photosSection := site.GetPage "photos" -}}
|
||||
{{- $latestPhotoPosts := $photosSection.Pages.ByDate.Reverse.Limit 1 -}}
|
||||
|
||||
<div class="home-latest">
|
||||
{{ range $latestBlogPosts }}
|
||||
<div class="home-latest__blog">
|
||||
{{ .Render "page_summary" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ range $latestPhotoPosts }}
|
||||
<div class="home-latest__photo">
|
||||
{{ .Render "page_summary" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue