ben/dendroalsia.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added mobile posts view

Browse source
This commit is contained in:
Ben Varick 2025-10-30 15:20:22 -07:00
parent efde3369bc
commit 0d3847238a
Signed by: ben
SSH key fingerprint: SHA256:jWnpFDAcacYM5aPFpYRqlsamlDyKNpSj3jj+k4ojtUo
2 changed files with 124 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

69
layouts/partials/blog/li.html
View file

@ -1,18 +1,41 @@
<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" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
{{ with .Params.image }}
{{ with $post.Resources.GetMatch . }}
{{ with .Resize "400x" }}
<div style="flex-shrink: 0;">
<a href="{{ $post.Permalink }}">
<img src="{{ .Permalink }}" alt="{{ $post.Title }}" style="max-width: 300px; height: auto; border-radius: 4px;">
</a>
</div>
{{ end }}
{{ end }}
{{ end }}
<div style="flex-grow: 1;">
<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>
@ -21,9 +44,23 @@
{{ $post.Date.Format (.Site.Params.dateFormat | default ":date_medium") }}
</p>
{{ end }}
{{ if $post.Summary }}
<p>{{ $post.Summary | truncate 150 }}</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 }}