From 49bb93cc0c89ad9cfaad5edcf9cb28c3d5134575 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 28 Sep 2022 17:21:32 +0800
Subject: [PATCH] perf(layout): improve the min-height of main content (#674)

---
 _includes/footer.html    | 52 ++++++++++++++++++++--------------------
 _layouts/default.html    |  6 ++---
 _sass/addon/commons.scss | 39 ++++++++++++++----------------
 3 files changed, 46 insertions(+), 51 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index b6b27de538d..14490bd6af2 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,36 +1,36 @@
 <!-- The Footer -->
 
-<footer class="row pl-3 pr-3">
-  <div class="col-12 d-flex justify-content-between align-items-center text-muted pl-0 pr-0">
-    <div class="footer-left">
-      <p class="mb-0">
-        © {{ 'now' | date: "%Y" }}
-        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.locales[lang].copyright.brief %}
-        <span data-toggle="tooltip" data-placement="top"
-          title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
-        {% endif %}
-      </p>
-    </div>
+<footer>
+  <div class="container pl-lg-4 pr-lg-4">
+    <div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
+      <div class="footer-left">
+        <p class="mb-0">
+          © {{ 'now' | date: "%Y" }}
+          <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+          {% if site.data.locales[lang].copyright.brief %}
+          <span data-toggle="tooltip" data-placement="top"
+            title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
+          {% endif %}
+        </p>
+      </div>
+
+      <div class="footer-right">
+        <p class="mb-0">
 
-    <div class="footer-right">
-      <p class="mb-0">
-        {% capture _platform %}
+          {% capture _platform %}
           <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-        {% endcapture %}
+          {% endcapture %}
 
-        {% capture _theme %}
+          {% capture _theme %}
           <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-        {% endcapture %}
-
-        {{ site.data.locales[lang].meta
-          | default: 'Powered by :PLATFORM with :THEME theme.'
-          | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
-        }}
+          {% endcapture %}
 
-      </p>
+          {{ site.data.locales[lang].meta
+            | default: 'Powered by :PLATFORM with :THEME theme.'
+            | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
+          }}
+        </p>
+      </div>
     </div>
-
   </div>
-
 </footer>
diff --git a/_layouts/default.html b/_layouts/default.html
index 3823ba02c10..55385a39043 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -27,17 +27,15 @@
 
     <div id="main-wrapper" class="d-flex justify-content-center">
       <div id="main" class="container pl-xl-4 pr-xl-4">
-
         {{ content }}
-
-        {% include footer.html %}
-
       </div>
 
       {% include search-results.html %}
 
     </div> <!-- #main-wrapper -->
 
+    {% include footer.html %}
+
     {% if page.mermaid %}
       {% include mermaid.html %}
     {% endif %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index ed55c75b5c4..373f6936024 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -148,11 +148,10 @@ kbd {
 }
 
 footer {
-  @include pl-pr(1.5rem);
-
   font-size: 0.8rem;
+  background-color: var(--main-wrapper-bg);
 
-  > div.d-flex {
+  div.d-flex {
     height: $footer-height;
     line-height: 1.2rem;
     padding-bottom: 1rem;
@@ -1052,8 +1051,6 @@ $sidebar-display: "sidebar-display";
 }
 
 #core-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-
   .categories,
   #tags,
   #archives {
@@ -1084,7 +1081,7 @@ $sidebar-display: "sidebar-display";
 #main-wrapper {
   background-color: var(--main-wrapper-bg);
   position: relative;
-  min-height: 100vh;
+  min-height: calc(100vh - #{$footer-height});
 
   @include pl-pr(0);
 }
@@ -1189,7 +1186,7 @@ $sidebar-display: "sidebar-display";
   footer {
     height: $footer-height-mobile;
 
-    > div.d-flex {
+    div.d-flex {
       padding: 1.5rem 0;
       flex-wrap: wrap;
       -ms-flex-pack: distribute !important;
@@ -1294,7 +1291,8 @@ $sidebar-display: "sidebar-display";
   }
 
   #topbar,
-  #main {
+  #main,
+  footer > .container {
     max-width: 100%;
   }
 
@@ -1352,7 +1350,7 @@ $sidebar-display: "sidebar-display";
 
 /* Phone & Pad */
 @media all and (min-width: 577px) and (max-width: 1199px) {
-  footer > .d-flex > div {
+  footer .d-flex > div {
     width: 312px;
   }
 }
@@ -1364,7 +1362,7 @@ $sidebar-display: "sidebar-display";
     overflow-y: scroll;
   }
 
-  #main-wrapper {
+  #main-wrapper, footer {
     margin-left: $sidebar-width;
   }
 
@@ -1395,10 +1393,6 @@ $sidebar-display: "sidebar-display";
     right: 5%;
   }
 
-  #topbar {
-    @include pl-pr(2rem);
-  }
-
   #topbar-title {
     text-align: left;
   }
@@ -1438,7 +1432,7 @@ $sidebar-display: "sidebar-display";
   }
 
   #topbar-wrapper {
-    left: 210px;
+    left: $sidebar-width-small;
   }
 
   #search-results > div {
@@ -1456,8 +1450,8 @@ $sidebar-display: "sidebar-display";
     font-size: 90%;
   }
 
-  #main-wrapper {
-    margin-left: 210px;
+  #main-wrapper, footer {
+    margin-left: $sidebar-width-small;
   }
 
   #breadcrumb {
@@ -1520,8 +1514,10 @@ $sidebar-display: "sidebar-display";
     font-size: 1.03rem;
   }
 
-  footer > div.d-felx {
-    width: 85%;
+  footer {
+    div.d-felx {
+      width: 85%;
+    }
   }
 
 }
@@ -1533,7 +1529,7 @@ $sidebar-display: "sidebar-display";
 }
 
 @media all and (min-width: 1650px) {
-  #main-wrapper {
+  #main-wrapper, footer {
     margin-left: $sidebar-width-large;
   }
 
@@ -1546,7 +1542,8 @@ $sidebar-display: "sidebar-display";
   }
 
   #topbar,
-  #main {
+  #main,
+  footer > .container {
     max-width: $main-content-max-width;
   }