added mobile posts view

layouts/partials/blog/li.html

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