feat(layout): center the footer

_includes/footer.html

@@ -1,22 +1,13 @@
 <!-- The Footer -->
 
-<footer>
+<footer
-  <div class="container px-lg-4">
+  class="
-    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
+    d-flex flex-column justify-content-center text-muted
+    flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
+  "
+>
   <p>
-        {%- capture _platform -%}
+    {{ '©' }}
-          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        {%- endcapture -%}
-
-        {%- capture _theme -%}
-          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-        {%- endcapture -%}
-
-        {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
-      </p>
-
-      <p>
-        {{- '©' }}
     {{ 'now' | date: '%Y' }}
     <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
     {% if site.data.locales[include.lang].copyright.brief %}
@@ -29,6 +20,16 @@
       </span>
     {% endif %}
   </p>
-    </div>
+
-  </div>
+  <p>
+    {%- capture _platform -%}
+      <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
+    {%- endcapture -%}
+
+    {%- capture _theme -%}
+      <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+    {%- endcapture -%}
+
+    {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
+  </p>
 </footer>

_includes/related-posts.html

@@ -70,7 +70,7 @@
 
 {% if relate_posts.size > 0 %}
   <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3 class="pt-2 mb-4 ms-1" data-toc-skip>
+    <h3 class="pt-2 mb-4" data-toc-skip>
       {{ site.data.locales[include.lang].post.relate_posts }}
     </h3>
     <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">

_layouts/default.html

@@ -30,8 +30,6 @@ layout: compress
       </div>
     </div>
 
-    {% include_cached footer.html lang=lang %}
-
     <div id="mask"></div>
 
     <button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">

_layouts/home.html

@@ -40,7 +40,7 @@ refactor: true
   {% endfor %}
 {% endif %}
 
-<div id="post-list">
+<div id="post-list" class="pe-xl-2">
   {% for post in posts %}
     <a href="{{ post.url | relative_url }}" class="card-wrapper">
       <div class="card post-preview flex-md-row-reverse">

_layouts/page.html

@@ -9,14 +9,14 @@ layout: default
   {% assign has_tail = true %}
 {% endif %}
 
-<div class="row{% unless has_tail %} mb-5{% endunless %}">
+<div class="row">
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
     {% capture padding %}
       {% unless page.layout == 'home' %}px-1{% endunless %}
     {% endcapture %}
 
-    <div class="post {{ padding | strip }} px-md-2">
+    <div class="post {{ padding | strip }} {% unless has_tail %} flex-grow-1 mb-5{% endunless %}">
       {% capture _content %}
         {% if layout.refactor or page.layout == 'page' %}
           {% include refactor-content.html content=content lang=lang %}
@@ -55,14 +55,16 @@ layout: default
   </div>
 </div>
 
-<!-- tail -->
+<div class="row">
-{% if has_tail %}
+  <!-- tail -->
-  <div class="row">
+  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4{% if has_tail%} mt-5{% endif %}">
-    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
+    {% if has_tail %}
       {% for _include in layout.tail_includes %}
         {% assign _include_path = _include | append: '.html' %}
         {% include {{ _include_path }} lang=lang %}
       {% endfor %}
+    {% endif %}
+
+    {% include_cached footer.html lang=lang %}
   </div>
-  </div>
+</div>
-{% endif %}

_sass/addon/commons.scss

@@ -175,17 +175,11 @@ kbd {
 footer {
   font-size: 0.8rem;
   background-color: var(--main-bg);
+  height: $footer-height;
+  border-top: 1px solid var(--main-border-color);
 
   @extend %text-color;
 
-  div.d-flex {
-    height: $footer-height;
-    line-height: 1.2rem;
-    padding-bottom: 1rem;
-    border-top: 1px solid var(--main-border-color);
-    flex-wrap: wrap;
-  }
-
   a {
     @extend %text-highlight;
 
@@ -195,7 +189,7 @@ footer {
   }
 
   p {
-    width: 100%;
+    line-height: 1.75;
     text-align: center;
     margin-bottom: 0;
   }
@@ -1081,6 +1075,7 @@ $btn-mb: 0.5rem;
 
 #core-wrapper {
   line-height: 1.75;
+  min-height: calc(100vh - $topbar-height - $footer-height);
 
   .categories,
   #tags,
@@ -1108,7 +1103,6 @@ $btn-mb: 0.5rem;
 
 #main-wrapper {
   position: relative;
-  min-height: calc(100vh - $footer-height-mobile);
 
   @include pl-pr(0);
 }
@@ -1122,19 +1116,17 @@ $btn-mb: 0.5rem;
 /* --- button back-to-top --- */
 
 #back-to-top {
-  $size: 3rem;
-
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
   right: 1rem;
-  bottom: 2rem;
+  bottom: calc($footer-height-large - $back2top-size / 2);
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
   padding: 0;
-  width: $size;
+  width: $back2top-size;
-  height: $size;
+  height: $back2top-size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
   transition: transform 0.2s ease-out;
@@ -1146,7 +1138,7 @@ $btn-mb: 0.5rem;
   }
 
   i {
-    line-height: $size;
+    line-height: $back2top-size;
     position: relative;
     bottom: 2px;
   }
@@ -1212,14 +1204,12 @@ $btn-mb: 0.5rem;
 */
 
 @media all and (max-width: 576px) {
-  #main-wrapper {
-    min-height: calc(100vh - #{$footer-height-mobile});
-  }
-
   #core-wrapper {
+    min-height: calc(100vh - $topbar-height - $footer-height-large);
+
     .post-content {
       > blockquote[class^='prompt-'] {
-        @include ml-mr(-1.25rem);
+        @include ml-mr(-1rem);
 
         border-radius: 0;
         max-width: none;
@@ -1260,21 +1250,11 @@ $btn-mb: 0.5rem;
     }
   }
 
-  html,
-  body {
-    overflow-x: hidden;
-  }
-
   footer {
     @include slide;
 
-    height: $footer-height-mobile;
+    height: $footer-height-large;
-
-    div.d-flex {
     padding: 1.5rem 0;
-      line-height: 1.65;
-      flex-wrap: wrap;
-    }
   }
 
   [#{$sidebar-display}] {
@@ -1282,8 +1262,7 @@ $btn-mb: 0.5rem;
       transform: translateX(0);
     }
 
-    #main-wrapper,
+    #main-wrapper {
-    footer {
       transform: translateX(#{$sidebar-width});
     }
 
@@ -1304,8 +1283,7 @@ $btn-mb: 0.5rem;
   }
 
   #topbar,
-  #main,
+  #main {
-  footer > .container {
     max-width: 100%;
   }
 
@@ -1352,13 +1330,6 @@ $btn-mb: 0.5rem;
   }
 } /* max-width: 849px */
 
-/* Phone & Pad */
-@media all and (min-width: 577px) and (max-width: 1199px) {
-  footer .d-flex > div {
-    width: 312px;
-  }
-}
-
 /* Sidebar is visible */
 @media all and (min-width: 850px) {
   /* Solved jumping scrollbar */
@@ -1366,26 +1337,8 @@ $btn-mb: 0.5rem;
     overflow-y: scroll;
   }
 
-  #main-wrapper,
-  footer {
-    margin-left: $sidebar-width;
-  }
-
   #main-wrapper {
-    min-height: calc(100vh - $footer-height);
+    margin-left: $sidebar-width;
-  }
-
-  footer {
-    p {
-      width: auto;
-      &:last-child {
-        &::before {
-          content: '-';
-          margin: 0 0.75rem;
-          opacity: 0.8;
-        }
-      }
-    }
   }
 
   #sidebar {
@@ -1419,8 +1372,8 @@ $btn-mb: 0.5rem;
 
   /* button 'back-to-Top' position */
   #back-to-top {
-    bottom: 5.5rem;
     right: 5%;
+    bottom: calc($footer-height - $back2top-size / 2);
   }
 
   #topbar-title {
@@ -1465,10 +1418,6 @@ $btn-mb: 0.5rem;
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #back-to-top {
-    bottom: 6.5rem;
-  }
-
   #search-wrapper {
     margin-right: 4rem;
   }
@@ -1497,12 +1446,6 @@ $btn-mb: 0.5rem;
   .post-content {
     font-size: 1.03rem;
   }
-
-  footer {
-    div.d-felx {
-      width: 85%;
-    }
-  }
 }
 
 @media all and (min-width: 1400px) {
@@ -1514,8 +1457,7 @@ $btn-mb: 0.5rem;
 @media all and (min-width: 1650px) {
   $icon-gap: 1rem;
 
-  #main-wrapper,
+  #main-wrapper {
-  footer {
     margin-left: $sidebar-width-large;
   }
 
@@ -1529,8 +1471,7 @@ $btn-mb: 0.5rem;
     );
   }
 
-  #main,
+  #main {
-  footer > .container {
     max-width: $main-content-max-width;
     padding-left: 1.75rem !important;
     padding-right: 1.75rem !important;

_sass/addon/syntax.scss

@@ -150,7 +150,7 @@ div[class^='language-'] {
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
   .post-content > & {
-    @include ml-mr(-1.25rem);
+    @include ml-mr(-1rem);
 
     border-radius: 0;
   }

_sass/addon/variables.scss

@@ -12,20 +12,21 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 $topbar-height: 3rem !default;
 $search-max-width: 210px !default;
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default; /* screen width: < 850px */
+$footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
-$base-radius: 0.5rem;
+$base-radius: 0.5rem !default;
+$back2top-size: 2.75rem !default;
 
 /* syntax highlight */
 
 $code-font-size: 0.85rem !default;
-$code-header-height: 2.25rem;
+$code-header-height: 2.25rem !default;
-$code-dot-size: 0.75rem;
+$code-dot-size: 0.75rem !default;
-$code-dot-gap: 0.5rem;
+$code-dot-gap: 0.5rem !default;
-$code-icon-width: 1.75rem;
+$code-icon-width: 1.75rem !default;
 
 /* fonts */
 
-$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
+$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
-$font-family-heading: Lato, 'Microsoft Yahei', sans-serif;
+$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;

_sass/layout/home.scss

@@ -199,10 +199,3 @@
     }
   } /* .pagination */
 }
-
-/* Panel is visible */
-@media all and (min-width: 1200px) {
-  #post-list {
-    padding-right: 0.5rem;
-  }
-}