Style blog previes on homepage, add headers for articles and author field

themes/bluewater/layouts/partials/blog-preview-homepage.html

@@ -1,4 +1,30 @@
-<div>
-  <div><a href="{{ .Permalink }}">{{ .Title }}</a></div>
-  <div>{{ .Summary }}</div>
+<div class="m-4">
+  <div class="mb-4">
+    <a class="text-3xl font-bold text-neutral-800" href="{{ .Permalink }}"
+      >{{ .Title }}</a
+    >
+  </div>
+  <div class="grid xl:grid-cols-3 grid-cols-1 justify-center gap-x-8">
+    <div class="flex flex-col justify-center h-fit mb-2">
+      {{ $image := .Resources.GetMatch "header" }}
+      {{ with $image }}
+        {{ $image := $image.Crop "512x512 Center" }}
+        <img class="" src="{{ $image.RelPermalink }}" />
+      {{ end }}
+      <span class="mt-4 text-neutral-500">{{ .Param "author" }}</span>
+      <span class="text-neutral-500"
+        >{{ .Date | time.Format ":date_long" }}</span
+      >
+    </div>
+    <div class="prose lg:col-span-2">
+      {{ .Summary }}
+      <div class="mt-6">
+        <a
+          class="underline text-primary-600 hover:text-primary-500"
+          href="{{ .Permalink }}"
+          >Weiterlesen...</a
+        >
+      </div>
+    </div>
+  </div>
 </div>