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/layouts/_default/single.html

@@ -6,7 +6,7 @@
     </div>
 
     {{if isset .Params "image" }}
-        <img src="{{ index .Params "image" }}" alt="{{ .Title }}" class="preview">
+        <img src="{{ index .Params "image" }}" alt="{{ .Title }}" class="heading">
     {{ end }}
 
     <article class="row content" style="margin-top: 2em">

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;
     }
-}
 
-/* automatically hyphenate long words in summaries on list pages */
+    /* enlarge article thumbnail on smaller views */
-.summary {
+    div.preview {
-    -webkit-hyphens: auto;
+        height: 20rem;
-    -ms-hyphens: auto;
-    hyphens: auto;
     }
     
     img.preview {
-    width: 100%;
+        height: 20rem;
     }
+    
+}
+

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

@@ -143,11 +143,11 @@ h6 { font-size: 1.4rem; line-height: 1.6;  letter-spacing: 0; }
 
 /* Larger than phablet */
 @media (min-width: 550px) {
-  h1 { font-size: 4.0rem; }
+  h1 { font-size: 3.2rem; }
-  h2 { font-size: 3.2rem; }
+  h2 { font-size: 2.6rem; }
-  h3 { font-size: 3.0rem; }
+  h3 { font-size: 2.4rem; }
-  h4 { font-size: 2.8rem; }
+  h4 { font-size: 2.2rem; }
-  h5 { font-size: 2.4rem; }
+  h5 { font-size: 2.0rem; }
   h6 { font-size: 1.5rem; }
 }