66 lines
1.5 KiB
HTML
66 lines
1.5 KiB
HTML
<style>
|
|
.post-item-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 2rem;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.post-thumbnail {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.post-thumbnail img {
|
|
max-width: 300px;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.post-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.post-item-wrapper {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.post-thumbnail img {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{{ range .Pages.ByPublishDate.Reverse }}
|
|
{{ $post := . }}
|
|
<div class="post-item-wrapper">
|
|
<div class="post-content">
|
|
<h3 class="title is-4" style="margin-bottom: 0.5rem;">
|
|
<a href="{{ $post.Permalink }}">{{ $post.Title | markdownify }}</a>
|
|
</h3>
|
|
{{ if $post.Params.date }}
|
|
<p class="has-text-grey" style="margin-bottom: 0.5rem;">
|
|
{{ $post.Date.Format (.Site.Params.dateFormat | default ":date_medium") }}
|
|
</p>
|
|
{{ end }}
|
|
</div>
|
|
{{ with .Params.image }}
|
|
{{ with $post.Resources.GetMatch . }}
|
|
{{ with .Resize "400x" }}
|
|
<div class="post-thumbnail">
|
|
<a href="{{ $post.Permalink }}">
|
|
<img src="{{ .Permalink }}" alt="{{ $post.Title }}">
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
<div style="margin-bottom: 2rem;">
|
|
{{ if $post.Summary }}
|
|
<p>{{ $post.Summary | truncate 150 }}</p>
|
|
{{ end }}
|
|
</div>
|
|
<hr>
|
|
{{ end }}
|