bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2024-12-22 12:13:19 -06:00
Code Issues Projects Releases Wiki Activity

Add latest posts section to the bottom of every content page

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/bobastyle.css
View File

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

2
i18n/en.yaml
View File

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

12
layouts/_default/single.html
View File

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

2
layouts/index.html
View File

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

21
layouts/partials/latest-posts.html Normal file
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>