From 1b3086d3515d7266481f06c6e6e726d62a8eb529 Mon Sep 17 00:00:00 2001
From: steven-y-e <steven@mineral.town>
Date: Sat, 2 Oct 2021 10:33:17 -0400
Subject: [PATCH] fix(theme): defined height on article thumbnails

helps masonryjs work better
---
 .../themes/mineral/layouts/_default/list.html |  2 +
 blog/themes/mineral/static/css/mineral.css    | 50 +++++++++++++++----
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/blog/themes/mineral/layouts/_default/list.html b/blog/themes/mineral/layouts/_default/list.html
index 0887495..9452d03 100644
--- a/blog/themes/mineral/layouts/_default/list.html
+++ b/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>
diff --git a/blog/themes/mineral/static/css/mineral.css b/blog/themes/mineral/static/css/mineral.css
index 7794bf0..f76e44f 100644
--- a/blog/themes/mineral/static/css/mineral.css
+++ b/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%;
-}