From 8417727e6e268260ce0fb0b8b649d6cdd8890f56 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 28 Nov 2019 01:59:01 +0800
Subject: [PATCH] Fixed the posts' layout jumping in loading.

screen width >= 1200px and the panel is visible.
---
 _layouts/page.html   |  2 +-
 _layouts/post.html   |  8 +++----
 assets/css/main.scss | 56 ++++++++++++++++++++++++++++++++++----------
 assets/css/post.scss |  2 +-
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/_layouts/page.html b/_layouts/page.html
index 47ec8ba..573d960 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -5,7 +5,7 @@ layout: default
 # MIT License
 ---
 
-<div class="row d-flex justify-content-center bg-white">
+<div class="row bg-white">
   <div class="col-12 col-lg-11 col-xl-8">
     <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
     {% if page.dynamic_title %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 8b8cae9..4b13787 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -5,11 +5,11 @@ layout: default
 # MIT Licensed
 ---
 
-<div class="row d-flex justify-content-center bg-white">
+<div class="row bg-white">
   {% include date-format.html %}
 
   <div id="post-wrap" 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 pl-xl-3">
+    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
       <h1 data-toc-skip>{{ page.title }}</h1>
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published Date and Categoreis -->
@@ -82,10 +82,10 @@ layout: default
 
 </div> <!-- .row -->
 
-<div class="row d-flex justify-content-center bg-white">
+<div class="row bg-white">
   <div id="post-extend-wrap" class="col-12 col-lg-11 col-xl-8">
 
-    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
+    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
       {% include related-posts.html %}
 
       <div class="post-pager d-flex justify-content-between">
diff --git a/assets/css/main.scss b/assets/css/main.scss
index b1712b5..56822d3 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1026,7 +1026,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 }
 
 /* Compact icons in sidebar & TOC hidden */
-@media all and (min-width: 832px) and (max-width: 1200px) {
+@media all and (min-width: 832px) and (max-width: 1199px) {
 
   #sidebar {
     width: 210px;
@@ -1070,7 +1070,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 }
 
 /* Pannel hidden */
-@media all and (max-width: 1200px) {
+@media all and (max-width: 1199px) {
   #panel-wrap {
     display: none;
   }
@@ -1078,18 +1078,24 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
   #topbar-main {
     padding: 0;
   }
+
+  #main>div.row {
+    -webkit-box-pack: center!important;
+    -ms-flex-pack: center!important;
+    justify-content: center!important;
+  }
 }
 
 
 /*--- desktop mode, both sidebar and panel are visible ---*/
 
-@media all and (min-width: 1201px) {
+@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: 850px;
+    max-width: 75%;
     padding-left: 3%;
   }
 
@@ -1097,10 +1103,6 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     max-width: 300px;
   }
 
-  #breadcrumb {
-    padding-left: 0;
-  }
-
   #topbar-main {
     padding: 0 calc((100% - 1150px) / 2)!important;
   }
@@ -1123,12 +1125,31 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 }
 
-@media all and (min-width: 1650px) {
+@media all and (min-width: 1400px) {
+
+  #main>div.row {
+    padding-left: calc((100% - 1150px) / 2);
+  }
 
   #main>div.row>div.col-xl-8 {
-    padding-left: 0px;
     max-width: 850px;
   }
+}
+
+@media all and (min-width: 1650px) {
+
+  #breadcrumb {
+    padding-left: 0;
+  }
+
+  #main>div.row>div.col-xl-8 {
+    padding-left: 0;
+  }
+
+  #main>div.row>div.col-xl-8>div:first-child {
+    padding-left: .55rem !important;
+    padding-right: 1.9rem !important;
+  }
 
   #main-wrap {
     margin-left: 350px;
@@ -1260,11 +1281,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
   }
 
   #main>div.row {
-    padding-right: calc(100% - 1570px); /* 100% - (1920px - 350px) */
+    padding-left: calc((100% - 1150px - 2%) / 2);
   }
 
   #panel-wrap {
-    margin-left: calc((100% - 1150px) / 8);
+    margin-left: 3%;
   }
 
   footer {
@@ -1279,4 +1300,15 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     right: calc(100% - 1920px + 15rem);
   }
 
+}
+
+
+@media (min-width: 1920px) {
+  #main>div.row {
+    padding-left: 190px;
+  }
+
+  #panel-wrap {
+    margin-left: 41px;
+  }
 }
\ No newline at end of file
diff --git a/assets/css/post.scss b/assets/css/post.scss
index c1f330f..4900b11 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -115,7 +115,7 @@
 /*
   The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width
 */
-@media all and (min-width: 1201px) {
+@media all and (min-width: 1200px) {
   #post-extend-wrap {
     margin-right: 25%;
   }