feat: Add thumbnail-smart page listings

assets/styles/mix-twbs.scss

@@ -152,4 +152,8 @@ h1 {
   .fixed-bottom {
     left: 25%;
   }
+
+  .md-max-width-33 {
+    max-width: 33%;
+  }
 }

layouts/_default/list.html

@@ -6,5 +6,48 @@
         {{ .Content }}
       {{ end }}
     </div>
+
+    <div class="row" data-masonry='{"percentPosition": true}'>
+      {{ range .Pages }}
+        <div class="col-xl-auto mb-4">
+          <div class="card">
+            <div class="card-body">
+              {{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
+                historically they might have been referenced as 'thumbnail' in the front
+                matter, or (even more historically) as 'cardImage'. Use scratch to
+                normalize all these different systems.
+              */}}
+              {{ $bundleGlob := "thumbnail.*" }}
+              {{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
+              {{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
+              {{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
+              {{ with .Resources.GetMatch $allThumbnailGlob }}
+                {{ $thumbnail := . }}
+                {{ $thumbnailResized := $thumbnail.Resize "600x" }}
+                <img
+                  class="img img-thumbnail float-start me-3 md-max-width-33"
+                  src="{{ $thumbnailResized.RelPermalink }}"
+                  alt="Thumbnail of {{ .Title }}"
+                />
+              {{ end }}
+              <a href="{{ .RelPermalink }}"
+                ><h3 class="card-title">{{ .Title }}</h3></a
+              >
+              <p class="card-text">
+                {{ .Summary }}
+                <strong
+                  ><small
+                    ><a href="{{ .RelPermalink }}">Read more &raquo;</a></small
+                  ></strong
+                >
+              </p>
+            </div>
+          </div>
+          <!-- </card> -->
+        </div>
+        <!-- </col> -->
+      {{ end }}
+    </div>
+    <!-- </row> -->
   </section>
 {{ end }}