added mobile posts view

This commit is contained in:
Ben Varick 2025-10-30 15:24:39 -07:00
parent 0d3847238a
commit 931d729e4d
Signed by: ben
SSH key fingerprint: SHA256:jWnpFDAcacYM5aPFpYRqlsamlDyKNpSj3jj+k4ojtUo
2 changed files with 63 additions and 45 deletions

View file

@ -25,6 +25,18 @@
flex-direction: column;
}
.post-thumbnail {
order: 2;
}
.post-content {
order: 1;
}
.post-summary {
order: 3;
}
.post-thumbnail img {
max-width: 100%;
width: 100%;
@ -35,16 +47,6 @@
{{ 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" }}
@ -56,11 +58,19 @@
{{ end }}
{{ end }}
{{ end }}
</div>
<div style="margin-bottom: 2rem;">
{{ if $post.Summary }}
<p>{{ $post.Summary | truncate 150 }}</p>
{{ end }}
<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 }}
{{ if $post.Summary }}
<p>{{ $post.Summary | truncate 150 }}</p>
{{ end }}
</div>
</div>
<hr>
{{ end }}

View file

@ -167,6 +167,18 @@ Posts - Dendroalsia
flex-direction: column;
}
.post-thumbnail {
order: 2;
}
.post-content {
order: 1;
}
.post-summary {
order: 3;
}
.post-thumbnail img {
max-width: 100%;
width: 100%;
@ -177,16 +189,6 @@ Posts - Dendroalsia
<div class="post-item-wrapper">
<div class="post-content">
<h3 class="title is-4" style="margin-bottom: 0.5rem;">
<a href="https://www.dendroalsia.net/blog/riverlevelcharts/">River level charts</a>
</h3>
<p class="has-text-grey" style="margin-bottom: 0.5rem;">
Oct 14, 2024
</p>
</div>
@ -198,29 +200,27 @@ Posts - Dendroalsia
</div>
<div style="margin-bottom: 2rem;">
<div class="post-content">
<h3 class="title is-4" style="margin-bottom: 0.5rem;">
<a href="https://www.dendroalsia.net/blog/riverlevelcharts/">River level charts</a>
</h3>
<p><p>I&rsquo;m interested in rivers (both ecologically and recreationally) and I want to know</p>
<p class="has-text-grey" style="margin-bottom: 0.5rem;">
Oct 14, 2024
</p>
<p><p>I&rsquo;m interested in rivers (both ecologically and recreationally) and I want to know</p>
<ul>
<li>what water level different rivers are currently at</li>
<li>how does …</li></ul></p>
</div>
</div>
<hr>
<div class="post-item-wrapper">
<div class="post-content">
<h3 class="title is-4" style="margin-bottom: 0.5rem;">
<a href="https://www.dendroalsia.net/blog/prettyrivers/">Pretty rivers</a>
</h3>
<p class="has-text-grey" style="margin-bottom: 0.5rem;">
Jan 1, 2024
</p>
</div>
@ -232,11 +232,19 @@ Posts - Dendroalsia
</div>
<div style="margin-bottom: 2rem;">
<div class="post-content">
<h3 class="title is-4" style="margin-bottom: 0.5rem;">
<a href="https://www.dendroalsia.net/blog/prettyrivers/">Pretty rivers</a>
</h3>
<p><p>I like maps that isolate different natural features. And I think that rivers make pretty patterns. So I made a series of scripts that generates a …</p></p>
<p class="has-text-grey" style="margin-bottom: 0.5rem;">
Jan 1, 2024
</p>
<p><p>I like maps that isolate different natural features. And I think that rivers make pretty patterns. So I made a series of scripts that generates a …</p></p>
</div>
</div>
<hr>