fix(theme): defined height on article thumbnails

helps masonryjs work better

blog/themes/mineral/layouts/_default/list.html

@@ -14,7 +14,9 @@
                 <a href="{{ .Permalink }}">
                     <h2>{{ .Title }}</h2>
                     {{if isset .Params "image" }}
+                    <div class="preview">
                         <img src="{{ index .Params "image" }}" alt="{{ .Title }}" class="preview">
+                    </div>
                     {{ end }}
                     {{ if ne .Kind "term" }}
                         <p class="date">{{.Date.Format "January 2, 2006"}}</p>

blog/themes/mineral/static/css/mineral.css

@@ -33,8 +33,35 @@ article p img {
     cursor: auto;
 }
 
-/* hide some pagination links on tablet/mobile-width views */
+/* automatically hyphenate long words in summaries on list pages */
+.summary {
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+}
+
+img.heading {
+    width: 100%;
+}
+
+div.preview {
+    width: 100%;
+    height: 12rem;
+    overflow: hidden;
+}
+  
+img.preview {
+    width: 100%;
+    height: 12rem;
+    object-fit: cover;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+
+    
 @media (max-width: 420px) {
+    /* hide some pagination links on mobile-width views */
     .mobile-hidden {
         display: none;
     }
@@ -43,18 +70,19 @@ article p img {
     }
 }
 @media (max-width: 550px) {
+    /* hide some pagination links on tablet-width views */
     .tablet-hidden {
         display: none;
     }
+
+    /* enlarge article thumbnail on smaller views */
+    div.preview {
+        height: 20rem;
+    }
+    
+    img.preview {
+        height: 20rem;
+    }
+    
 }
 
-/* automatically hyphenate long words in summaries on list pages */
-.summary {
-    -webkit-hyphens: auto;
-    -ms-hyphens: auto;
-    hyphens: auto;
-}
-
-img.preview, img.heading {
-    width: 100%;
-}