chore: optimize the layout of main content and search input

Author: cotes2020

_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">

_layouts/default.html

@@ -26,7 +26,7 @@
     {% 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 }}
 

_layouts/page.html

@@ -9,7 +9,7 @@
 <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 @@ <h1 class="dynamic-title">
 <!-- 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 }} %}

_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);
   }

_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;