perf: improve the responsive design for ultrawide screens (#540)
Resolves #540
This commit is contained in:
Cotes Chung
parent
20caace68a
commit
5d6e8c5ef6
7 changed files with 73 additions and 208 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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: '/' %}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ layout: compress
|
|||
|
||||
{% 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 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ layout: default
|
|||
<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 @@ 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="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
|
||||
<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>
|
||||
</div> <!-- .row -->
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -148,18 +148,15 @@ kbd {
|
|||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 0 1rem;
|
||||
height: $footer-height;
|
||||
@include pl-pr(1.5rem);
|
||||
|
||||
font-size: 0.8rem;
|
||||
|
||||
> div.d-flex {
|
||||
height: $footer-height;
|
||||
line-height: 1.2rem;
|
||||
width: 95%;
|
||||
max-width: 1045px;
|
||||
padding-bottom: 1rem;
|
||||
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,31 +1085,15 @@ $sidebar-display: "sidebar-display";
|
|||
background-color: var(--main-wrapper-bg);
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
padding-bottom: $footer-height;
|
||||
|
||||
@include pl-pr(0);
|
||||
}
|
||||
|
||||
#main {
|
||||
.row:first-child {
|
||||
> div {
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
#core-wrapper,
|
||||
#panel-wrapper {
|
||||
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,
|
||||
#main > .row,
|
||||
#search-result-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),
|
||||
#main > div.row:first-child > div:nth-child(2) {
|
||||
#core-wrapper,
|
||||
#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 {
|
||||
padding-left: calc((100% - #{$main-content-max-width}) / 2);
|
||||
|
||||
> 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;
|
||||
#back-to-top {
|
||||
right: calc((100vw - #{$sidebar-width} - 1140px) / 2 + 3rem);
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
max-width: #{$main-content-max-width};
|
||||
#topbar,
|
||||
#main {
|
||||
max-width: $main-content-max-width;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
margin-right: 3%;
|
||||
#back-to-top {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
$panel-max-width: 300px !default;
|
||||
$main-content-max-width: 1200px !default;
|
||||
|
||||
$bottom-min-height: 35rem !default;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue