Add latest posts section to the bottom of every content page

This commit is contained in:
BBaoVanC 2022-05-04 22:02:36 -05:00
parent 76b0383c2c
commit 56610009e9
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
5 changed files with 47 additions and 20 deletions

View File

@ -76,8 +76,7 @@
}
.page-list li,
.series-taxonomy li,
.related-posts .post {
.series-taxonomy li {
padding-top: 8px;
padding-left: 24px;
padding-right: 24px;
@ -252,26 +251,27 @@
/* Related posts */
.related {
.full-width-page-list {
/* make left/right 0 margin so it takes up full width */
margin: 25px 0;
}
.related > hr,
.related > h2 {
.full-width-page-list > hr,
.full-width-page-list > h1 {
margin-left: 20px;
margin-right: 20px;
}
.related-posts .post {
.full-width-page-list li {
min-width: 300px;
max-width: 300px;
/* since .related and .related-posts are both full-width with no margin */
margin-left: 20px;
}
.related-posts .post:last-child {
.full-width-page-list li:first-child {
margin-left: 20px;
}
.full-width-page-list li:last-child {
margin-right: 20px;
}
@ -280,14 +280,14 @@
* still reaches the screen edge. then if the posts overflow and require
* scrolling, you can see it cut off on the side of your phone screen
*/
.related {
.full-width-page-list {
margin-left: -20px;
margin-right: -20px;
}
}
@media (min-width: 720px) {
.related {
.full-width-page-list {
/* this makes it full width -- 720px max-width on body it is exactly 720px
* so .related takes up full width
*/
@ -296,8 +296,10 @@
}
}
.related-posts {
.full-width-page-list .page-list ul {
display: flex;
flex-direction: row;
gap: 20px;
overflow-x: scroll;
}

View File

@ -42,7 +42,7 @@ read_more:
other: "Read more"
related_posts:
other: "Related posts"
other: "Related Posts"
older_post:
other: "Older"

View File

@ -76,14 +76,18 @@
{{ $related := .Site.RegularPages.Related . | first 10 }}
{{ with $related }}
<div class="related">
<div class="related-posts full-width-page-list">
<hr>
<h2>{{ i18n "related_posts" }}</h2>
<div class="related-posts">
<h1>{{ i18n "related_posts" }}</h1>
<div class="page-list">
<ul>
{{ range . }}
{{ .Render "summary/post" }}
<li>{{ .Render "summary/post" }}</li>
{{ end }}
</ul>
</div>
</div>
{{ end }}
{{ partialCached "latest-posts.html" . }}
{{ end }}

View File

@ -6,7 +6,7 @@
{{ end }}
{{ if .Site.Params.homepageLatestPosts }}
<div class="hompage-latest-posts">
<div class="homepage-latest-posts">
<hr>
<h1>
{{ i18n "latest_posts" }}

View File

@ -0,0 +1,21 @@
<div class="latest-posts full-width-page-list">
<hr>
<h1>
{{ i18n "latest_posts" }}
{{ partial "rss-link.html" .Site.Home }}
</h1>
{{ with .Site.RegularPages | first 5 }}
<div class="page-list">
<ul>
{{ range . }}
<li>{{ .Render "summary/post" }}</li>
{{ end }}
</ul>
</div>
{{ else }}
<div>
{{ i18n "no_posts" }}
</div>
{{ end }}
</div>