start styling the blog overview page

themes/bluewater/layouts/blog/list.html

@@ -1,5 +1,24 @@
 {{ define "main" }}
-  {{ range .Pages }}
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
-    {{ .Title }}
+    {{ range .Pages }}
-  {{ end }}
+      <div class="overflow-hidden rounded-lg shadow-lg border-2 hover:bg-primary-300 text-slate-700">
+        <!-- <a href="{{ .RelPermalink }}"> -->
+        {{ $image := .Resources.GetMatch "header" }}
+        {{ with $image }}
+          {{ $image := $image.Fill "1024x512 Center webp" }}
+          <img class="" src="{{ $image.RelPermalink }}" />
+        {{ end }}
+        <div class="text-lg m-4">
+          {{ .Title }}
+        </div>
+
+        <div class="mx-4 mb-4 line-clamp-5 text-balance">
+          {{ .Summary }}
+          
+        </div>
+
+        <!-- </a> -->
+      </div>
+    {{ end }}
+  </div>
 {{ end }}