Fixed the posts' layout jumping in loading.

cotes2020 · cotes2020 · commit 6f8c965f77d1 · 2019-12-02T03:05:23.000+08:00
screen width &gt;= 1200px and the panel is visible.
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -5,7 +5,7 @@
 # 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
@@ -5,11 +5,11 @@
 # 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 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
 </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
@@ -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,37 +1070,39 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 }
 
 /* Pannel hidden */
-@media all and (max-width: 1200px) {
+@media all and (max-width: 1199px) {
   #panel-wrap {
     display: none;
   }
 
   #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%;
   }
 
   #panel-wrap {
     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;
+  }
 }
diff --git 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%;
   }

Original file line number	Diff line number	Diff line change
`@@ -115,7 +115,7 @@`
`115`	`115`	`/*`
`116`	`116`	`The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width`
`117`	`117`	`*/`
`118`		`-@media all and (min-width: 1201px) {`
	`118`	`+@media all and (min-width: 1200px) {`
`119`	`119`	`#post-extend-wrap {`
`120`	`120`	`margin-right: 25%;`
`121`	`121`	`}`