added mobile posts view

layouts/partials/blog/li.html

@@ -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 }}