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

Resolves #540

_includes/footer.html

@@ -1,9 +1,7 @@
-<!--
+<!-- The Footer -->
-  The Footer
--->
 
-<footer class="d-flex w-100 justify-content-center">
+<footer class="row">
-  <div class="d-flex justify-content-between align-items-center text-muted">
+  <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-wrapper">
-  <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
+  <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 @@ layout: compress
 
     {% include topbar.html %}
 
-    <div id="main-wrapper">
+    <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main">
+      <div id="main" class="container">
 
         {{ content }}
 

_layouts/page.html

@@ -9,8 +9,8 @@ layout: default
 <div class="row">
 
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-8">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-5">
-    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    <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 @@ layout: default
 <!-- tail -->
 {% if layout.tail_includes %}
 <div class="row">
-  <div class="col-12 col-lg-11 col-xl-8">
+  <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="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
+    {% for _include in layout.tail_includes %}
-      {% for _include in layout.tail_includes %}
+      {% assign _include_path = _include | append: '.html' %}
-        {% assign _include_path = _include | append: '.html' %}
+      {% include {{ _include_path }} %}
-        {% include {{ _include_path }} %}
+    {% endfor %}
-      {% endfor %}
-    </div>
   </div>
-</div> <!-- .row -->
+</div>
 {% endif %}

_sass/addon/commons.scss

@@ -148,18 +148,15 @@ kbd {
 }
 
 footer {
-  position: absolute;
+  @include pl-pr(1.5rem);
-  bottom: 0;
+
-  padding: 0 1rem;
-  height: $footer-height;
   font-size: 0.8rem;
 
   > div.d-flex {
+    height: $footer-height;
     line-height: 1.2rem;
-    width: 95%;
+    padding-bottom: 1rem;
-    max-width: 1045px;
     border-top: 1px solid var(--main-border-color);
-    margin-bottom: 1rem;
 
     > div {
       width: 350px;
@@ -227,7 +224,6 @@ img[data-src] {
 .access {
   top: 2rem;
   transition: top 0.2s ease-in-out;
-  margin-right: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 4rem;
 
@@ -876,6 +872,7 @@ $sidebar-display: "sidebar-display";
 #search-result-wrapper {
   display: none;
   height: 100%;
+  width: 100%;
   overflow: auto;
 
   .post-content {
@@ -933,7 +930,7 @@ $sidebar-display: "sidebar-display";
 
 #search-wrapper {
   display: flex;
-  width: 85%;
+  width: 100%;
   border-radius: 1rem;
   border: 1px solid var(--search-wrapper-border-color);
   background: var(--search-wrapper-bg);
@@ -1002,7 +999,7 @@ $sidebar-display: "sidebar-display";
 }
 
 #search-results {
-  padding-bottom: 6rem;
+  padding-bottom: 3rem;
 
   a {
     &:hover {
@@ -1055,7 +1052,7 @@ $sidebar-display: "sidebar-display";
 }
 
 #core-wrapper {
-  min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+  min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
 
   .categories,
   #tags,
@@ -1088,29 +1085,13 @@ $sidebar-display: "sidebar-display";
   background-color: var(--main-wrapper-bg);
   position: relative;
   min-height: 100vh;
-  padding-bottom: $footer-height;
 
   @include pl-pr(0);
 }
 
-#main {
+#core-wrapper,
-  .row:first-child {
+#panel-wrapper {
-    > div {
+  margin-top: $topbar-height; /* same as the height of topbar */
-      &:nth-child(1),
-      &:nth-child(2) {
-        margin-top: $topbar-height; /* same as the height of topbar */
-      }
-
-      &:first-child {
-        /* 3rem for topbar, 6rem for footer */
-        min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
-      }
-    }
-  }
-
-  div.row:first-of-type:last-of-type { /* alone */
-    margin-bottom: 4rem;
-  }
 }
 
 #topbar-wrapper.row,
@@ -1205,16 +1186,11 @@ $sidebar-display: "sidebar-display";
 */
 
 @media all and (max-width: 576px) {
-
-  $footer-height: $footer-height-mobile; /* overwrite */
-
   footer {
-    height: $footer-height;
+    height: $footer-height-mobile;
 
     > div.d-flex {
-      width: 100%;
       padding: 1.5rem 0;
-      margin-bottom: 0.3rem;
       flex-wrap: wrap;
       -ms-flex-pack: distribute !important;
       justify-content: space-around !important;
@@ -1226,12 +1202,8 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-  #main > div.row:first-child > div:first-child {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-  }
-
   #core-wrapper {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height-mobile}) !important;
 
     h1 {
       margin-top: 2.2rem;
@@ -1256,10 +1228,21 @@ $sidebar-display: "sidebar-display";
     @include ml-mr(1.8rem);
   }
 
-  #main-wrapper {
+}
-    padding-bottom: $footer-height;
+
+@media all and (max-width: 768px) {
+  %full-width {
+    max-width: 100%;
   }
 
+  #topbar {
+    @extend %full-width;
+  }
+
+  #main {
+    @extend %full-width;
+    @include pl-pr(0);
+  }
 }
 
 /* hide sidebar and panel */
@@ -1310,6 +1293,11 @@ $sidebar-display: "sidebar-display";
     padding-top: $topbar-height;
   }
 
+  #topbar,
+  #main {
+    max-width: 100%;
+  }
+
   #search-result-wrapper {
     width: 100%;
   }
@@ -1325,8 +1313,8 @@ $sidebar-display: "sidebar-display";
     left: 0;
   }
 
-  #main > div.row:first-child > div:nth-child(1),
+  #core-wrapper,
-  #main > div.row:first-child > div:nth-child(2) {
+  #panel-wrapper {
     margin-top: 0;
   }
 
@@ -1336,17 +1324,6 @@ $sidebar-display: "sidebar-display";
     display: block;
   }
 
-  #search-wrapper {
-    &.loaded ~ a {
-      margin-right: 1rem;
-    }
-  }
-
-  #search-input {
-    margin-left: 0;
-    width: 95%;
-  }
-
   #search-result-wrapper .post-content {
     letter-spacing: 0;
   }
@@ -1395,17 +1372,17 @@ $sidebar-display: "sidebar-display";
     margin-top: 3rem;
   }
 
-  #search-wrapper {
-    width: 22%;
-    min-width: 150px;
-  }
-
   #search-hints {
     display: none;
   }
 
+  #search-wrapper {
+    max-width: 210px;
+  }
+
   #search-result-wrapper {
     margin-top: 3rem;
+    max-width: $main-content-max-width;
   }
 
   div.post-content .table-wrapper > table {
@@ -1415,17 +1392,17 @@ $sidebar-display: "sidebar-display";
   /* button 'back-to-Top' position */
   #back-to-top {
     bottom: 5.5rem;
-    right: 1.2rem;
+    right: 5%;
+  }
+
+  #topbar {
+    @include pl-pr(2rem);
   }
 
   #topbar-title {
     text-align: left;
   }
 
-  footer > div.d-flex {
-    width: 92%;
-  }
-
 }
 
 /* Pad horizontal */
@@ -1499,10 +1476,6 @@ $sidebar-display: "sidebar-display";
     display: none;
   }
 
-  #topbar {
-    padding: 0;
-  }
-
   #main > div.row {
     -webkit-box-pack: center !important;
     -ms-flex-pack: center !important;
@@ -1513,26 +1486,12 @@ $sidebar-display: "sidebar-display";
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #main > div.row > div.col-xl-8 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-    padding-left: 3%;
-  }
-
-  #topbar {
-    padding: 0;
-    max-width: 1070px;
-  }
-
-  #panel-wrapper {
-    max-width: $panel-max-width;
-  }
-
   #back-to-top {
     bottom: 6.5rem;
-    right: 4.3rem;
+  }
+
+  #search-wrapper {
+    margin-right: 4rem;
   }
 
   #search-input {
@@ -1568,62 +1527,27 @@ $sidebar-display: "sidebar-display";
 }
 
 @media all and (min-width: 1400px) {
-  #main > div.row {
+  #back-to-top {
-    padding-left: calc((100% - #{$main-content-max-width}) / 2);
+    right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
-
-    > div.col-xl-8 {
-      max-width: 850px;
-    }
-  }
-
-  #search-result-wrapper {
-    padding-right: 2rem;
-
-    > div {
-      max-width: 1110px;
-    }
-  }
-
-}
-
-@media all and (min-width: 1400px) and (max-width: 1650px) {
-  #topbar {
-    padding-right: 2rem;
   }
 }
 
 @media all and (min-width: 1650px) {
-  #breadcrumb {
-    padding-left: 0;
-  }
-
-  #main > div.row > div.col-xl-8 {
-    padding-left: 0;
-
-    > div:first-child {
-      padding-left: 0.55rem !important;
-      padding-right: 1.9rem !important;
-    }
-  }
-
   #main-wrapper {
     margin-left: $sidebar-width-large;
   }
 
-  #panel-wrapper {
-    margin-left: calc((100% - #{$main-content-max-width}) / 10);
-  }
-
   #topbar-wrapper {
     left: $sidebar-width-large;
   }
 
-  #topbar {
+  #topbar,
-    max-width: #{$main-content-max-width};
+  #main {
+    max-width: $main-content-max-width;
   }
 
-  #search-wrapper {
+  #back-to-top {
-    margin-right: 3%;
+    right: calc((100vw - #{$sidebar-width-large} - #{$main-content-max-width}) / 2 + 2rem);
   }
 
   #sidebar {
@@ -1744,58 +1668,4 @@ $sidebar-display: "sidebar-display";
 
   } /* #sidebar */
 
-  footer > div.d-flex {
-    width: 92%;
-    max-width: 1140px;
-  }
-
-  #search-result-wrapper {
-    > div {
-      max-width: #{$main-content-max-width};
-    }
-  }
-
 } /* min-width: 1650px */
-
-@media all and (min-width: 1700px) {
-  #topbar-wrapper {
-    /* 100% - 350px - (1920px - 350px); */
-    padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large}));
-  }
-
-  #topbar {
-    max-width: calc(#{$main-content-max-width} + 20px);
-  }
-
-  #main > div.row {
-    padding-left: calc((100% - #{$main-content-max-width} - 2%) / 2);
-  }
-
-  #panel-wrapper {
-    margin-left: 3%;
-  }
-
-  footer {
-    padding-left: 0;
-    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
-  }
-
-  #back-to-top {
-    right: calc(100% - 1920px + 15rem);
-  }
-
-}
-
-@media (min-width: 1920px) {
-  #main > div.row {
-    padding-left: 190px;
-  }
-
-  #search-result-wrapper {
-    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
-  }
-
-  #panel-wrapper {
-    margin-left: 41px;
-  }
-}

_sass/addon/variables.scss

@@ -23,9 +23,7 @@ $topbar-height: 3rem !default;
 $footer-height: 5rem !default;
 $footer-height-mobile: 6rem !default;   /* screen width: <= 576px */
 
-$main-content-max-width: 1150px !default;
+$main-content-max-width: 1200px !default;
-
-$panel-max-width: 300px !default;
 
 $bottom-min-height: 35rem !default;