Improved post loading speed.

Also improved the layout for Home page.

_includes/head.html

@@ -50,4 +50,18 @@
     {% include google-analytics.html %}
   {% endif %}
 
+  {% if page.layout == 'home' or page.layout == 'post' %}
+    <script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
+    {% if site.google_analytics.pv %}
+      <script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
+      <script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
+    {% endif %}
+  {% endif %}
+
+  {% if page.layout == 'post' and site.toc and page.toc %}
+    <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
+    <script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/dist/toc.min.js"></script>
+  {% endif %}
+
 </head>

_includes/panel.html

@@ -4,8 +4,9 @@
   MIT License
 -->
 
-<div class="panel-group">
+<div id="panel-wrap" class="col-xl-3 pl-2 topbar-down">
 
+  <div class="access">
   {% assign lastmod_list = "" | split: "" %}
   {% assign index = 0 %}
 
@@ -20,7 +21,7 @@
   {% endfor %}
 
   {% if lastmod_list.size > 0 %}
-  <div id="panel-update" class="post mb-4"">
+  <div id="access-lastmod" class="post mb-4"">
     <h3 data-toc-skip>
       {{ site.data.label.panel.lastmod }}
     </h3>
@@ -41,7 +42,7 @@
   </div><!-- #panel-update -->
   {% endif %}
 
-  <div id="panel-tags">
+  <div id="access-tags">
     <h3 data-toc-skip>
       {{ site.data.label.panel.trending_tags }}
     </h3>
@@ -69,5 +70,15 @@
 
     </div>
   </div><!-- #panel-tags -->
-
 </div>
+
+{% if page.layout == 'post' and site.toc and page.toc %}
+<div id="toc-wrap" class="pl-0 pr-4">
+    <h3 data-toc-skip class="pl-3 pt-2">
+      {{- site.data.label.panel.toc -}}
+    </h3>
+    <nav id="toc" data-toggle="toc"></nav>
+  </div>
+{% endif %}
+
+</div> <!-- #panel-wrap -->

_layouts/home.html

@@ -119,10 +119,3 @@ layout: page
 
 </ul> <!-- .pagination -->
 {% endif %}
-
-<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
-
-{% if site.google_analytics.pv %}
-<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
-<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
-{% endif %}

_layouts/page.html

@@ -24,6 +24,4 @@ layout: default
   </div> <!-- #page -->
 </div><!-- end .col-12 -->
 
-<div id="panel-wrap" class="col-xl-3 pl-2">
+{% include panel.html %}
-  {% include panel.html %}
-</div>

_layouts/post.html

@@ -96,24 +96,4 @@ layout: default
   </div> <!-- #post-wrap -->
 </div> <!-- div.col-12..col-lg-11.col-xl-8 -->
 
-<div id="post-panel" class="col-xl-3 pl-2">
+{% include panel.html %}
-  {% include panel.html %}
-  {% if site.toc and page.toc %}
-  <div id="toc-wrap" class="topbar-down pr-4">
-    <h3 data-toc-skip class="pl-3 pt-2">
-      {{- site.data.label.panel.toc -}}
-    </h3>
-    <nav id="toc" data-toggle="toc"></nav>
-  </div>
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css" />
-  <script src="{{ site.baseurl }}/assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script>
-  <script src="{{ site.baseurl }}/assets/js/dist/toc.min.js"></script>
-  {% endif %}
-</div> <!-- #post-panel -->
-
-<script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
-
-{% if site.google_analytics.pv %}
-<script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
-<script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>
-{% endif %}

assets/css/_src/main.scss

@@ -378,9 +378,7 @@ footer .license a {
 
 
 /*--- Panels ---*/
-.panel-group {
+.access {
-  position: -webkit-sticky; /* Safari */
-  position: sticky;
   top: 2rem;
   transition: top 0.2s ease-in-out;
   margin-right: 1.5rem;
@@ -389,20 +387,25 @@ footer .license a {
   color: #6c757d;
 }
 
-.panel-group.topbar-down {
+.access:only-child {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+}
+
+.access.topbar-down {
   top: 6rem;
 }
 
-.panel-group>div {
+.access>div {
   padding-left: 1rem;
   border-left: 1px solid rgba(158, 158, 158, 0.17);
 }
 
-.panel-group>div:not(:first-child) {
+.access>div:not(:first-child) {
   margin-top: 4rem;
 }
 
-.panel-group h3 {
+.access h3 {
   padding-top: .5rem;
   padding-bottom: .5rem;
   margin-top: 0;
@@ -412,15 +415,15 @@ footer .license a {
   font-family: 'Oswald', sans-serif;
 }
 
-.panel-group .post-content {
+.access .post-content {
   font-size: .9rem;
 }
 
-#panel-tags>div.post-content>div {
+#access-tags>div.post-content>div {
   max-width: 80%;
 }
 
-#panel-tags .post-tag {
+#access-tags .post-tag {
   display: inline-block;
   line-height: 1rem;
   font-size: 0.85rem;
@@ -431,14 +434,14 @@ footer .license a {
   margin-bottom: .3rem;
 }
 
-#panel-tags .post-tag:hover {
+#access-tags .post-tag:hover {
   background-color: #2a408e;
   border-color: #2a408e;
   color: #fff;
   transition: none;
 }
 
-#panel-update ul>li {
+#access-lastmod ul>li {
   height: 1.8rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -448,7 +451,7 @@ footer .license a {
   list-style: none;
 }
 
-#panel-update ul a {
+#access-lastmod ul a {
   color: #6c757d;
 }
 
@@ -585,7 +588,7 @@ p>a, span>a,
 }
 
 .categories a,
-.panel-group a,
+.access a,
 #archives a,
 #page-tag a,
 #page-category a,
@@ -606,7 +609,7 @@ p>a, span>a,
 footer a:hover,
 #post-wrap .post-content a:hover,
 #page .post-content a:hover,
-#panel-update a:hover {
+#access-lastmod a:hover {
   color: #d2603a;
   border-bottom: 1px solid #d2603a;
   text-decoration: none;
@@ -819,10 +822,6 @@ table tbody td {
   filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.08));
 }
 
-#post-panel .panel-group {
-  position: static;
-}
-
 #toc-wrap {
   border-left: 1px solid rgba(158, 158, 158, 0.17);
   position: -webkit-sticky;
@@ -1164,7 +1163,7 @@ a.tag:hover {
 
 #page-category a:hover,
 #page-tag a:hover,
-#panel-update a:hover {
+#access-lastmod a:hover {
   margin-bottom: -1px;  // Avoid jumping
 }
 
@@ -1497,12 +1496,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 /* Pannel hidden */
 @media all and (max-width: 1200px) {
-  #post-list {
+  #panel-wrap {
-    padding-right: 0;
+    display: none;
   }
 
-  #panel-wrap, #post-panel {
+  #post-list {
-    display: none;
+    padding-right: 0;
   }
 
   .pagination {

assets/js/_src/_commons/topbar-switch.js

@@ -38,8 +38,8 @@ $(function() {
         $('#toc-wrap').removeClass('topbar-down');
       }
 
-      if ( $('.panel-group').length > 0) {
+      if ( $('.access').length > 0) {
-        $('.panel-group').removeClass('topbar-down');
+        $('.access').removeClass('topbar-down');
       }
 
       if ($('#search-input').is(':focus')) {
@@ -53,8 +53,8 @@ $(function() {
         if ( $('#toc-wrap').length > 0) {
           $('#toc-wrap').addClass('topbar-down');
         }
-        if ( $('.panel-group').length > 0) {
+        if ( $('.access').length > 0) {
-          $('.panel-group').addClass('topbar-down');
+          $('.access').addClass('topbar-down');
         }
       }
     }

assets/js/dist/_commons/topbar-switch.min.js

@@ -1 +1 @@
-$(function(){var d;var c=0;var e=5;var b=$("#topbar").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrap").length>0){$("#toc-wrap").removeClass("topbar-down")}if($(".panel-group").length>0){$(".panel-group").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrap").length>0){$("#toc-wrap").addClass("topbar-down")}if($(".panel-group").length>0){$(".panel-group").addClass("topbar-down")}}}c=f}});
+$(function(){var d;var c=0;var e=5;var b=$("#topbar").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrap").length>0){$("#toc-wrap").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrap").length>0){$("#toc-wrap").addClass("topbar-down")}if($(".access").length>0){$(".access").addClass("topbar-down")}}}c=f}});