From 112091cbf66b6ac44f578749f4cb1742c51361ee Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 30 Jul 2020 04:58:05 +0800
Subject: [PATCH] Improved the posts layout.

---
 _includes/disqus.html        |  6 ++++--
 _includes/related-posts.html |  2 +-
 _layouts/post.html           | 22 +++++++++++-----------
 assets/css/post.scss         | 33 ++++-----------------------------
 4 files changed, 20 insertions(+), 43 deletions(-)

diff --git a/_includes/disqus.html b/_includes/disqus.html
index 2aa49d3..4b4b149 100644
--- a/_includes/disqus.html
+++ b/_includes/disqus.html
@@ -7,8 +7,10 @@
   MIT License
 -->
 
-<div id="disqus" class="pt-2 pb-4">
-  <p class="font-italic text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
+<div id="disqus" class="pt-2 pb-2">
+  <p class="font-italic text-center text-muted small">
+    Comments powered by <a href="https://disqus.com/">Disqus</a>.
+  </p>
 </div>
 
 <script src="{{ site.baseurl }}/assets/js/lib/jquery.disqusloader.min.js"></script>
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index fa256f3..03c1828 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -84,7 +84,7 @@
 
 
 {% if index_list.size > 0 %}
-  <div id="related-posts" class="mt-4 mb-2 mb-sm-4 pb-2">
+  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
     <h3 class="pt-2 mt-1 mb-4 ml-1" data-toc-skip>{{ site.data.label.post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 3275e21..0f05e58 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -99,7 +99,7 @@ layout: default
         {% endif %}
 
         <div class="post-tail-bottom
-          d-flex justify-content-between align-items-center pt-5 pb-2">
+          d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
           {% if site.data.rights.license %}
           <div class="license-wrapper">
             This post is licensed under
@@ -116,6 +116,7 @@ layout: default
 
     </div> <!-- .post -->
 
+
   </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
@@ -123,21 +124,20 @@ layout: default
 </div> <!-- .row -->
 
 <div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div class="col-12 col-lg-11 col-xl-8">
+    <div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
 
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    {% include related-posts.html %}
 
-      {% include post-nav.html %}
+    {% include post-nav.html %}
 
-      {% if site.disqus.comments and page.comments %}
-        {% include disqus.html %}
-      {% endif %}
+    {% if site.disqus.comments and page.comments %}
+      {% include disqus.html %}
+    {% endif %}
 
-      {% include related-posts.html %}
+    </div> <!-- #post-extend-wrapper -->
 
-    </div> <!-- .pl-1 pr-1 -->
-
-  </div> <!-- #post-extend-wrapper -->
+  </div> <!-- .col-* -->
 
 </div> <!-- .row -->
 
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 5658053..44ff367 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -45,7 +45,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 .post-tail-wrapper {
-  margin-top: 4rem;
+  margin-top: 6rem;
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 }
@@ -209,6 +209,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 #post-extend-wrapper {
   min-height: 2rem;
+  #disqus_thread {
+    margin-bottom: 2rem;
+  }
 }
 
 .post-tail-bottom a {
@@ -350,31 +353,3 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   }
 
 }
-
-/*
-  The following resposive design aim to
-  make #post-extend-wrapper margin-right same as pannel's width
-*/
-@media all and (min-width: 1200px) {
-  #post-extend-wrapper {
-    margin-right: 25%;
-  }
-}
-
-@media all and (min-width: 1460px) {
-  #post-extend-wrapper {
-    margin-right: 300px;
-  }
-}
-
-@media all and (min-width: 1650px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 10 + 300px);
-  }
-}
-
-@media all and (min-width: 1700px) {
-  #post-extend-wrapper {
-    margin-right: calc((100% - 1150px) / 8 + 300px);
-  }
-}