Redesigned Footer.

_config.yml

@@ -66,9 +66,6 @@ disqus:
   comments: false  # boolean type, the global switch for posts comments.
   shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
-# The year your website first ran.
-first_run: 2019
-
 
 # Prefer color scheme setting, available values:
 #

_data/license.yml

@@ -0,0 +1,18 @@
+#  License data.
+#
+#  v2.1
+#  https://github.com/cotes2020/jekyll-theme-chirpy
+#  © 2020 Cotes Chung
+#  MIT Licensed
+
+icons:
+  - "fab fa-creative-commons"
+  - "fab fa-creative-commons-by"
+
+type: "CC BY 4.0"
+
+statment: >-
+  The blog posts on this site are licensed
+  under the Creative Commons Attribution 4.0 International (CC BY 4.0) License.
+
+link: "https://creativecommons.org/licenses/by/4.0/"

_includes/footer.html

@@ -7,20 +7,26 @@
 -->
 
 <footer class="d-flex w-100 justify-content-center">
-  <div class="d-flex justify-content-between  align-items-center">
+  <div class="d-flex justify-content-between align-items-center">
-    <div class="copyright">
+    <div class="footer-left">
-      {% assign first = site.first_run | plus: 0 %}
-      {% assign last = 'now' | date: "%Y" | plus: 0 %}
       <p class="mb-0">
-        © {% if last > first %}{{ first }}-{% endif %}{{-last-}}
+        © {{ 'now' | date: "%Y" }}
-        <a href="{{ site.social.links[0] }}" class="ml-1">{{ site.social.name }}</a>.
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        <br>Powered by <a href="https://jekyllrb.com" target="_blank">Jekyll</a> with theme <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>.
+        {% if site.data.license.statment %}
+        <span data-toggle="tooltip" data-placement="top"
+          title="{{ site.data.license.statment }}">Some rights reserved</span>.
+        {% endif %}
       </p>
     </div>
-    <div class="license">
+
+    <div class="footer-right">
       <p class="mb-0">
-        The blog posts on this site are licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
+        Powered by
+        <a href="https://jekyllrb.com" target="_blank">Jekyll</a>
+        with theme
+        <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>.
       </p>
     </div>
+
   </div> <!-- div.d-flex -->
 </footer>

assets/css/_dark/dark-main.scss

@@ -13,7 +13,6 @@
   --search-wrapper-bg: rgb(34, 34, 39);
   --search-icon: rgb(100, 102, 105);
   --input-focus-border: rgb(112, 114, 115);
-  --footer-bg: rgb(31, 30, 30);
   --footer-border: rgb(44, 45, 45);
   --mask-bg: rgb(68, 69, 70);
 
@@ -98,6 +97,9 @@
       rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
   }
 
+  /* Footer */
+  ---footer-link: rgb(146, 146, 146);
+
 }
 
 

assets/css/main.scss

@@ -415,11 +415,13 @@ body {
 
 /*--- main wrapper ---*/
 
+$footer-height: 5rem;
+
 #main-wrapper {
-  background-color: var(--main-wrapper-bg, white);//rgb(27, 27, 30);
+  background-color: var(--main-wrapper-bg, white);
   position: relative;
   min-height: 100%;
-  padding-bottom: 6rem; /* equals to or greatter than footer's height */
+  padding-bottom: $footer-height;
   padding-left: 0;
   padding-right: 0;
   margin-left: 260px;
@@ -452,18 +454,20 @@ body {
 footer {
   position: absolute;
   bottom: 0;
-  height: 6rem; /* see the height of #main-wrapper */
+  padding: 0 1rem;
-  padding: 1rem;
+  height: $footer-height; /* see the height of #main-wrapper */
   font-size: 0.8rem;
   color: #7a7b7d;
-  background-color: var(--footer-bg, #f3f3f3);
+  background-color: var(--main-wrapper-bg, #ffffff);
-  border-top: 1px solid var(--footer-border, #f3f3f3);
 }
 
+
 footer>div.d-flex {
   line-height: 1.2rem;
   width: 95%;
   max-width: 1035px;
+  border-top: 1px solid var(--footer-border, #f3f3f3);
+  margin-bottom: 1rem;
 }
 
 footer a:link,
@@ -475,12 +479,15 @@ footer>.d-flex>div {
   width: 350px;
 }
 
-footer .copyright a,
+footer .footer-left a,
-footer .license a {
+footer .footer-right a {
   font-weight: 600;
-  color: inherit;
+  color: var(---footer-link, inherit);
 }
 
+footer .footer-right {
+  text-align: right;
+}
 
 /*--- Panels ---*/
 
@@ -859,9 +866,10 @@ table tbody td {
   text-decoration: none;
 }
 
-div.tooltip-inner { /* Overrided BS4 Tooltip */
+.tooltip-inner { /* Overrided BS4 Tooltip */
   font-size: .7rem;
   max-width: 220px;
+  text-align: left;
 }
 
 .disabled {
@@ -884,10 +892,6 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 @media all and (max-width: 576px) {
 
-  #main-wrapper {
-    padding-bottom: 10rem; /* footer height */
-  }
-
   #main>div.row:first-child>div:first-child {
     min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
   }
@@ -922,20 +926,31 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     word-wrap: break-word;
   }
 
-  /* footer and #main-wrapper expand vertical */
+  $footer-height: 6rem;
+
+  #main-wrapper {
+    padding-bottom: $footer-height;
+  }
+
   footer {
-    height: 10rem;
+    height: $footer-height;
   }
 
   footer>div.d-flex {
+    width: 90%;
+    padding: 1.5rem;
     flex-wrap: wrap;
     justify-content: left!important;
     -ms-flex-pack: distribute!important;
     justify-content: space-around!important;
   }
 
-}
+  footer .footer-left,
+  footer .footer-right {
+    text-align: center;
+  }
 
+}
 
 /* Sidebar is visibal */
 @media all and (min-width: 831px) {
@@ -1388,7 +1403,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
   }
 
   footer>div.d-flex {
-    max-width: 1130px;
+    max-width: 1150px;
   }
 
   #search-result-wrapper {
@@ -1419,10 +1434,6 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-right: calc(100% - 350px - 1180px);
   }
 
-  footer>div.d-flex {
-    max-width: 1150px;
-  }
-
   #back-to-top {
     right: calc(100% - 1920px + 15rem);
   }