Better related posts section

This commit is contained in:
BBaoVanC 2022-04-10 15:42:58 -05:00
parent b14e0e90fd
commit 2113c7a4e9
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
2 changed files with 29 additions and 13 deletions

View File

@ -244,19 +244,31 @@
padding: 8px 15px;
}
/* Related posts */
.related hr {
margin: 25px 0px;
}
@media (min-width: 720px) {
.related {
/* this makes it full width -- 720px max-width on body */
margin-left: calc(-100vw / 2 + 760px / 2);
margin-right: calc(-100vw / 2 + 760px / 2);
}
}
.related-posts {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 10px;
align-items: stretch; /* this is default anyways */
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(0, 360px));
}
.related-posts .post {
min-width: 10%;
flex: 1 1 49%;
}
/* Back to top */
#back-to-top {
position: fixed;
float: right;

View File

@ -50,14 +50,18 @@
{{ .Content }}
</div>
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ $related := .Site.RegularPages.Related . | first 10 }}
{{ with $related }}
<div class="related">
<hr>
<h2>{{ i18n "related_posts" }}</h2>
<div class="related-posts">
{{ range . }}
{{ .Render "summary/post" }}
{{ end }}
</div>
<hr>
</div>
{{ end }}
{{ if or .NextInSection .PrevInSection }}