perf(layout): improve the min-height of main content (#674)
This commit is contained in:
Cotes Chung
parent
8bcdd87891
commit
49bb93cc0c
|
|
@ -1,36 +1,36 @@
|
|||
<!-- The Footer -->
|
||||
|
||||
<footer class="row pl-3 pr-3">
|
||||
<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" }}
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
|
||||
{% if site.data.locales[lang].copyright.brief %}
|
||||
<span data-toggle="tooltip" data-placement="top"
|
||||
title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="container pl-lg-4 pr-lg-4">
|
||||
<div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
|
||||
<div class="footer-left">
|
||||
<p class="mb-0">
|
||||
© {{ 'now' | date: "%Y" }}
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
|
||||
{% if site.data.locales[lang].copyright.brief %}
|
||||
<span data-toggle="tooltip" data-placement="top"
|
||||
title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-right">
|
||||
<p class="mb-0">
|
||||
{% capture _platform %}
|
||||
<div class="footer-right">
|
||||
<p class="mb-0">
|
||||
|
||||
{% capture _platform %}
|
||||
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
|
||||
{% endcapture %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture _theme %}
|
||||
{% capture _theme %}
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
|
||||
{% endcapture %}
|
||||
{% endcapture %}
|
||||
|
||||
{{ site.data.locales[lang].meta
|
||||
| default: 'Powered by :PLATFORM with :THEME theme.'
|
||||
| replace: ':PLATFORM', _platform | replace: ':THEME', _theme
|
||||
}}
|
||||
|
||||
</p>
|
||||
{{ site.data.locales[lang].meta
|
||||
| default: 'Powered by :PLATFORM with :THEME theme.'
|
||||
| replace: ':PLATFORM', _platform | replace: ':THEME', _theme
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -27,17 +27,15 @@ layout: compress
|
|||
|
||||
<div id="main-wrapper" class="d-flex justify-content-center">
|
||||
<div id="main" class="container pl-xl-4 pr-xl-4">
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
</div>
|
||||
|
||||
{% include search-results.html %}
|
||||
|
||||
</div> <!-- #main-wrapper -->
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
{% if page.mermaid %}
|
||||
{% include mermaid.html %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -148,11 +148,10 @@ kbd {
|
|||
}
|
||||
|
||||
footer {
|
||||
@include pl-pr(1.5rem);
|
||||
|
||||
font-size: 0.8rem;
|
||||
background-color: var(--main-wrapper-bg);
|
||||
|
||||
> div.d-flex {
|
||||
div.d-flex {
|
||||
height: $footer-height;
|
||||
line-height: 1.2rem;
|
||||
padding-bottom: 1rem;
|
||||
|
|
@ -1052,8 +1051,6 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
#core-wrapper {
|
||||
min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
|
||||
|
||||
.categories,
|
||||
#tags,
|
||||
#archives {
|
||||
|
|
@ -1084,7 +1081,7 @@ $sidebar-display: "sidebar-display";
|
|||
#main-wrapper {
|
||||
background-color: var(--main-wrapper-bg);
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - #{$footer-height});
|
||||
|
||||
@include pl-pr(0);
|
||||
}
|
||||
|
|
@ -1189,7 +1186,7 @@ $sidebar-display: "sidebar-display";
|
|||
footer {
|
||||
height: $footer-height-mobile;
|
||||
|
||||
> div.d-flex {
|
||||
div.d-flex {
|
||||
padding: 1.5rem 0;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-pack: distribute !important;
|
||||
|
|
@ -1294,7 +1291,8 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
#topbar,
|
||||
#main {
|
||||
#main,
|
||||
footer > .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1352,7 +1350,7 @@ $sidebar-display: "sidebar-display";
|
|||
|
||||
/* Phone & Pad */
|
||||
@media all and (min-width: 577px) and (max-width: 1199px) {
|
||||
footer > .d-flex > div {
|
||||
footer .d-flex > div {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1364,7 +1362,7 @@ $sidebar-display: "sidebar-display";
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
#main-wrapper, footer {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
|
|
@ -1395,10 +1393,6 @@ $sidebar-display: "sidebar-display";
|
|||
right: 5%;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
@include pl-pr(2rem);
|
||||
}
|
||||
|
||||
#topbar-title {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1438,7 +1432,7 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
#topbar-wrapper {
|
||||
left: 210px;
|
||||
left: $sidebar-width-small;
|
||||
}
|
||||
|
||||
#search-results > div {
|
||||
|
|
@ -1456,8 +1450,8 @@ $sidebar-display: "sidebar-display";
|
|||
font-size: 90%;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
margin-left: 210px;
|
||||
#main-wrapper, footer {
|
||||
margin-left: $sidebar-width-small;
|
||||
}
|
||||
|
||||
#breadcrumb {
|
||||
|
|
@ -1520,8 +1514,10 @@ $sidebar-display: "sidebar-display";
|
|||
font-size: 1.03rem;
|
||||
}
|
||||
|
||||
footer > div.d-felx {
|
||||
width: 85%;
|
||||
footer {
|
||||
div.d-felx {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1533,7 +1529,7 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
#main-wrapper {
|
||||
#main-wrapper, footer {
|
||||
margin-left: $sidebar-width-large;
|
||||
}
|
||||
|
||||
|
|
@ -1546,7 +1542,8 @@ $sidebar-display: "sidebar-display";
|
|||
}
|
||||
|
||||
#topbar,
|
||||
#main {
|
||||
#main,
|
||||
footer > .container {
|
||||
max-width: $main-content-max-width;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue