From 7bb861b573695a8d569897dc3b71b8595a291b0f Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 21 Aug 2020 22:45:12 +0800
Subject: [PATCH] Beautify the layout for posts heading and preview-image.

---
 _layouts/post.html          | 4 +++-
 assets/css/_addon/main.scss | 1 +
 assets/css/post.scss        | 4 ++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index 0f05e58..ffef163 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -61,9 +61,11 @@ layout: default
       </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=' }}
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index b061163..7b38648 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -737,6 +737,7 @@ a {
 .post {
   h1 {
     margin-top: 3rem;
+    margin-bottom: 1rem;
   }
   em { /* MarkDown italic */
     padding-right: .2rem;
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 6ad8519..555a44e 100644
--- a/assets/css/post.scss
+++ b/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 {