asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

perf(layout): improve the min-height of main content (#674)

Browse source
This commit is contained in:
Cotes Chung 2022-09-28 17:21:32 +08:00
parent 8bcdd87891
commit 49bb93cc0c
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
3 changed files with 46 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
_includes/footer.html
View file

@ -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>

6
_layouts/default.html
View file

@ -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 %}

39
_sass/addon/commons.scss
View file

@ -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;
}