First pass at prettying up blog list

layouts/_default/list.html

@@ -2,14 +2,24 @@
 <article style="padding-top: 2em;">
 	{{.Content}}
 </article>
-<div class="contained">
-    <h3 style="color: black;">Posts:</h3>
-    <ul>
+<div class="contained" style="max-width: 50%; padding-bottom: 2em;">
+    <h3>Posts:</h3>
+    <div style="display: grid; grid-gap: 1em; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));">
     {{ range .Pages }}
-        <li style="padding-top: 1em;">
-            <a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a>
-        </li>
+        <div style="border: 1px solid #00ADFF; border-radius: 10px;">
+            {{ if .Params.images }}
+            <img src="{{ index .Params.images 0}}" style="border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; height: 15em; object-fit: cover;"/>
+            {{ else }}
+            <img src="/img/1*ug9TIbMQlsa4SGxbs0kwgw.jpeg" style="border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; height: 15em; object-fit: cover; filter: grayscale(50%); -webkit-filter: grayscale(50%);"/>
+            {{ end }}
+            <a href="{{.Permalink}}" style="padding: 1em; display: inline-block;">{{.Date.Format "02/01/2006"}} | "{{.Title}}"</a>
+            <div style="padding-left: 1em; padding-right: 1em;">
+                {{ .Summary }}...
+                <p style="text-align: right;"><a href="{{.Permalink}}">Read More</a></p>
+            </div>
+            <p style="text-align: right; padding: 1em;"><small>Reading Time: {{ .ReadingTime }}m</small></p>
+        </div>
     {{ end }}
-    </ul>
+    </div>
 </div>
 {{ end }}