perf: improve the responsive design for ultrawide screens (#540)

Resolves #540

Author: cotes2020

_includes/footer.html

@@ -1,9 +1,7 @@
-<!--
-  The Footer
--->
+<!-- The Footer -->
 
-<footer class="d-flex w-100 justify-content-center">
-  <div class="d-flex justify-content-between align-items-center text-muted">
+<footer class="row">
+  <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" }}
@@ -33,5 +31,6 @@
       </p>
     </div>
 
-  </div> <!-- div.d-flex -->
+  </div>
+
 </footer>

_includes/post-paginator.html

@@ -2,7 +2,7 @@
   The paginator for post list on HomgPage.
 -->
 
-<ul class="pagination align-items-center mt-4 mb-0 pl-lg-2">
+<ul class="pagination align-items-center mt-4 mb-5 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}

_includes/topbar.html

@@ -2,8 +2,8 @@
   The Top Bar
 -->
 
-<div id="topbar-wrapper" class="row justify-content-center">
-  <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
+<div id="topbar-wrapper">
+  <div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
     <span id="breadcrumb">
 
     {% assign paths = page.url | split: '/' %}

_layouts/default.html

@@ -25,8 +25,8 @@
 
     {% include topbar.html %}
 
-    <div id="main-wrapper">
-      <div id="main">
+    <div id="main-wrapper" class="d-flex justify-content-center">
+      <div id="main" class="container">
 
         {{ content }}
 

_layouts/page.html

@@ -9,8 +9,8 @@
 <div class="row">
 
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-8">
-    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-5">
+    <div class="post pl-1 pr-1 pl-md-2 pr-md-2">
 
     {% capture _content %}
       {% if layout.refactor or page.layout == 'page' %}
@@ -54,13 +54,11 @@ <h1 class="dynamic-title">
 <!-- tail -->
 {% if layout.tail_includes %}
 <div class="row">
-  <div class="col-12 col-lg-11 col-xl-8">
-    <div id="tail-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
-      {% for _include in layout.tail_includes %}
-        {% assign _include_path = _include | append: '.html' %}
-        {% include {{ _include_path }} %}
-      {% endfor %}
-    </div>
+  <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-4 pr-4 pr-xl-5">
+    {% for _include in layout.tail_includes %}
+      {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
+    {% endfor %}
   </div>
-</div> <!-- .row -->
+</div>
 {% endif %}