From fd0f983bbe250c07dfa7ba9f97d0f4288519521e Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Wed, 8 Jun 2022 22:35:13 +0800
Subject: [PATCH] chore: optimize the layout of main content and search input

---
 _includes/footer.html      |  2 +-
 _layouts/default.html      |  2 +-
 _layouts/page.html         |  4 ++--
 _sass/addon/commons.scss   | 11 ++++++++++-
 _sass/addon/variables.scss |  4 +++-
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index e409128..b6b27de 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,6 +1,6 @@
 <!-- The Footer -->
 
-<footer class="row">
+<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">
diff --git a/_layouts/default.html b/_layouts/default.html
index baa42e6..3823ba0 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -26,7 +26,7 @@ layout: compress
     {% include topbar.html %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main" class="container">
+      <div id="main" class="container pl-xl-4 pr-xl-4">
 
         {{ content }}
 
diff --git a/_layouts/page.html b/_layouts/page.html
index 4d57814..38b46dd 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -9,7 +9,7 @@ layout: default
 <div class="row">
 
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-5">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
     <div class="post pl-1 pr-1 pl-md-2 pr-md-2">
 
     {% capture _content %}
@@ -54,7 +54,7 @@ layout: default
 <!-- tail -->
 {% if layout.tail_includes %}
 <div class="row">
-  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-4 pr-4 pr-xl-5">
+  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4">
     {% for _include in layout.tail_includes %}
       {% assign _include_path = _include | append: '.html' %}
       {% include {{ _include_path }} %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 890196c..ed55c75 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -1377,7 +1377,7 @@ $sidebar-display: "sidebar-display";
   }
 
   #search-wrapper {
-    max-width: 210px;
+    max-width: $search-max-width;
   }
 
   #search-result-wrapper {
@@ -1541,11 +1541,20 @@ $sidebar-display: "sidebar-display";
     left: $sidebar-width-large;
   }
 
+  #search-wrapper {
+    margin-right: calc(#{$main-content-max-width} * 0.25 - #{$search-max-width});
+  }
+
   #topbar,
   #main {
     max-width: $main-content-max-width;
   }
 
+  #core-wrapper,
+  #tail-wrapper {
+    padding-right: 4.5rem !important;
+  }
+
   #back-to-top {
     right: calc((100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem);
   }
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index cc44979..5e75f7f 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -20,10 +20,12 @@ $cursor-width: 2px !default;    /* the cursor width of the selected tab */
 
 $topbar-height: 3rem !default;
 
+$search-max-width: 210px !default;
+
 $footer-height: 5rem !default;
 $footer-height-mobile: 6rem !default;   /* screen width: <= 576px */
 
-$main-content-max-width: 1200px !default;
+$main-content-max-width: 1250px !default;
 
 $bottom-min-height: 35rem !default;