Beautify the layout for posts heading and preview-image.

Author: cotes2020

_layouts/post.html

@@ -61,9 +61,11 @@ <h1 data-toc-skip>{{ page.title }}</h1>
       </div> <!-- .post-meta -->
 
       <div class="post-content">
+
         {% if page.image %}
-          <img src="{{ page.image }}">
+        <img src="{{ page.image }}" class="post-preview-img">
         {% endif %}
+
         <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
         {% if content contains '<img src=' %}
           {{ content | replace: '<img src=', '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src=' }}

assets/css/_addon/main.scss

@@ -737,6 +737,7 @@ a {
 .post {
   h1 {
     margin-top: 3rem;
+    margin-bottom: 1rem;
   }
   em { /* MarkDown italic */
     padding-right: .2rem;

assets/css/post.scss

@@ -52,6 +52,10 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       margin: 1rem 0 0.8rem;
     }
   }
+  .post-preview-img {
+    margin-top: 0;
+    margin-bottom: 2.5rem;
+  }
 }
 
 .post-tail-wrapper {