Merge branch 'feature/improve-typography' into develop

Author: cotes2020

_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>

_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 %}

_layouts/post.html

@@ -99,7 +99,7 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         {% 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,28 +116,28 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
     </div> <!-- .post -->
 
+
   </div> <!-- #post-wrapper -->
 
   {% include panel.html %}
 
 </div> <!-- .row -->
 
 <div class="row">
-  <div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
-
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+  <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">
 
-      {% include post-nav.html %}
+    {% include related-posts.html %}
 
-      {% if site.disqus.comments and page.comments %}
-        {% include disqus.html %}
-      {% endif %}
+    {% include post-nav.html %}
 
-      {% include related-posts.html %}
+    {% if site.disqus.comments and page.comments %}
+      {% include disqus.html %}
+    {% endif %}
 
-    </div> <!-- .pl-1 pr-1 -->
+    </div> <!-- #post-extend-wrapper -->
 
-  </div> <!-- #post-extend-wrapper -->
+  </div> <!-- .col-* -->
 
 </div> <!-- .row -->
 

assets/css/_addon/main.scss

@@ -493,8 +493,7 @@ footer {
     }
   }
   a {
-    @include semi-bold;
-    color: var(---footer-link);
+    color: var(--footer-link);
     &:link {
       @include no-text-decoration;
     }

assets/css/_colors/dark-typography.scss

@@ -84,7 +84,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
-  ---footer-link: rgb(146, 146, 146);
+  --footer-link: rgb(171 171 171);
 
   .post-content img {
     filter: brightness(90%);

assets/css/_colors/light-typography.scss

@@ -120,5 +120,5 @@
 
   --footnote-target-bg: lightcyan;
 
-  ---footer-link: inherit;
+  --footer-link: #424242;
 }

assets/css/post.scss

@@ -27,10 +27,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
-.author {
-  @include semi-bold;
-}
-
 .post {
   img {
     max-width: 100%;
@@ -45,7 +41,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 +205,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 +349,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);
-  }
-}