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 }} {{ range .Pages.ByPublishDate.Reverse }}
{{ $post := . }} {{ $post := . }}
<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;"> <div class="post-item-wrapper">
{{ with .Params.image }} <div class="post-content">
{{ 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;">
<h3 class="title is-4" style="margin-bottom: 0.5rem;"> <h3 class="title is-4" style="margin-bottom: 0.5rem;">
<a href="{{ $post.Permalink }}">{{ $post.Title | markdownify }}</a> <a href="{{ $post.Permalink }}">{{ $post.Title | markdownify }}</a>
</h3> </h3>
@ -21,9 +44,23 @@
{{ $post.Date.Format (.Site.Params.dateFormat | default ":date_medium") }} {{ $post.Date.Format (.Site.Params.dateFormat | default ":date_medium") }}
</p> </p>
{{ end }} {{ end }}
{{ if $post.Summary }}
<p>{{ $post.Summary | truncate 150 }}</p>
{{ end }}
</div> </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>
<div style="margin-bottom: 2rem;">
{{ if $post.Summary }}
<p>{{ $post.Summary | truncate 150 }}</p>
{{ end }}
</div>
<hr>
{{ end }} {{ end }}

102
public/blog/index.html
View file

@ -140,21 +140,44 @@ Posts - Dendroalsia
<div class="container"> <div class="container">
<style>
.post-item-wrapper {
display: flex;
align-items: flex-start;
margin-bottom: 2rem;
gap: 1.5rem;
}
<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;"> .post-thumbnail {
flex-shrink: 0;
}
<div style="flex-shrink: 0;"> .post-thumbnail img {
<a href="https://www.dendroalsia.net/blog/riverlevelcharts/"> max-width: 300px;
<img src="https://www.dendroalsia.net/blog/riverlevelcharts/example_last_6_months_hu_3ee8d3a026ad5207.png" alt="River level charts" style="max-width: 300px; height: auto; border-radius: 4px;"> height: auto;
</a> border-radius: 4px;
</div> }
.post-content {
flex-grow: 1;
<div style="flex-grow: 1;"> }
@media screen and (max-width: 768px) {
.post-item-wrapper {
flex-direction: column;
}
.post-thumbnail img {
max-width: 100%;
width: 100%;
}
}
</style>
<div class="post-item-wrapper">
<div class="post-content">
<h3 class="title is-4" style="margin-bottom: 0.5rem;"> <h3 class="title is-4" style="margin-bottom: 0.5rem;">
<a href="https://www.dendroalsia.net/blog/riverlevelcharts/">River level charts</a> <a href="https://www.dendroalsia.net/blog/riverlevelcharts/">River level charts</a>
</h3> </h3>
@ -163,29 +186,32 @@ Posts - Dendroalsia
Oct 14, 2024 Oct 14, 2024
</p> </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>
</div>
<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
<div style="flex-shrink: 0;"> <div class="post-thumbnail">
<a href="https://www.dendroalsia.net/blog/prettyrivers/"> <a href="https://www.dendroalsia.net/blog/riverlevelcharts/">
<img src="https://www.dendroalsia.net/blog/prettyrivers/wisconsin_rivers_hu_d6e96c96b70bfc8f.png" alt="Pretty rivers" style="max-width: 300px; height: auto; border-radius: 4px;"> <img src="https://www.dendroalsia.net/blog/riverlevelcharts/example_last_6_months_hu_3ee8d3a026ad5207.png" alt="River level charts">
</a> </a>
</div> </div>
<div style="flex-grow: 1;"> </div>
<div style="margin-bottom: 2rem;">
<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>
<hr>
<div class="post-item-wrapper">
<div class="post-content">
<h3 class="title is-4" style="margin-bottom: 0.5rem;"> <h3 class="title is-4" style="margin-bottom: 0.5rem;">
<a href="https://www.dendroalsia.net/blog/prettyrivers/">Pretty rivers</a> <a href="https://www.dendroalsia.net/blog/prettyrivers/">Pretty rivers</a>
</h3> </h3>
@ -194,11 +220,25 @@ Posts - Dendroalsia
Jan 1, 2024 Jan 1, 2024
</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 class="post-thumbnail">
<a href="https://www.dendroalsia.net/blog/prettyrivers/">
<img src="https://www.dendroalsia.net/blog/prettyrivers/wisconsin_rivers_hu_d6e96c96b70bfc8f.png" alt="Pretty rivers">
</a>
</div>
</div> </div>
<div style="margin-bottom: 2rem;">
<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>
<hr>