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: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
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,6 +25,18 @@
flex-direction: column; flex-direction: column;
} }
.post-thumbnail {
order: 2;
}
.post-content {
order: 1;
}
.post-summary {
order: 3;
}
.post-thumbnail img { .post-thumbnail img {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
@ -35,16 +47,6 @@
{{ range .Pages.ByPublishDate.Reverse }} {{ range .Pages.ByPublishDate.Reverse }}
{{ $post := . }} {{ $post := . }}
<div class="post-item-wrapper"> <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 .Params.image }}
{{ with $post.Resources.GetMatch . }} {{ with $post.Resources.GetMatch . }}
{{ with .Resize "400x" }} {{ with .Resize "400x" }}
@ -56,11 +58,19 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> <div class="post-content">
<div style="margin-bottom: 2rem;"> <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 }} {{ if $post.Summary }}
<p>{{ $post.Summary | truncate 150 }}</p> <p>{{ $post.Summary | truncate 150 }}</p>
{{ end }} {{ end }}
</div>
</div> </div>
<hr> <hr>
{{ end }} {{ end }}

56
public/blog/index.html
View file

@ -167,6 +167,18 @@ Posts - Dendroalsia
flex-direction: column; flex-direction: column;
} }
.post-thumbnail {
order: 2;
}
.post-content {
order: 1;
}
.post-summary {
order: 3;
}
.post-thumbnail img { .post-thumbnail img {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
@ -177,16 +189,6 @@ Posts - Dendroalsia
<div class="post-item-wrapper"> <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 class="post-content">
<div style="margin-bottom: 2rem;"> <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>
<p><p>I&rsquo;m interested in rivers (both ecologically and recreationally) and I want to know</p> <p><p>I&rsquo;m interested in rivers (both ecologically and recreationally) and I want to know</p>
<ul> <ul>
<li>what water level different rivers are currently at</li> <li>what water level different rivers are currently at</li>
<li>how does …</li></ul></p> <li>how does …</li></ul></p>
</div>
</div> </div>
<hr> <hr>
<div class="post-item-wrapper"> <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 class="post-content">
<div style="margin-bottom: 2rem;"> <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>
<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><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> </div>
<hr> <hr>