Fixed the posts' layout jumping in loading.
screen width >= 1200px and the panel is visible.
This commit is contained in:
Cotes Chung
parent
bd5e8be215
commit
8417727e6e
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -1280,3 +1301,14 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
#main>div.row {
|
||||
padding-left: 190px;
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
margin-left: 41px;
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue