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 --> <!-- The Footer -->
<footer class="row pl-3 pr-3"> <footer>
<div class="col-12 d-flex justify-content-between align-items-center text-muted pl-0 pr-0"> <div class="container pl-lg-4 pr-lg-4">
<div class="footer-left"> <div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
<p class="mb-0"> <div class="footer-left">
© {{ 'now' | date: "%Y" }} <p class="mb-0">
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>. © {{ 'now' | date: "%Y" }}
{% if site.data.locales[lang].copyright.brief %} <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
<span data-toggle="tooltip" data-placement="top" {% if site.data.locales[lang].copyright.brief %}
title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span> <span data-toggle="tooltip" data-placement="top"
{% endif %} title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
</p> {% endif %}
</div> </p>
</div>
<div class="footer-right"> <div class="footer-right">
<p class="mb-0"> <p class="mb-0">
{% capture _platform %}
{% capture _platform %}
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a> <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> <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
{% endcapture %} {% endcapture %}
{{ site.data.locales[lang].meta {{ site.data.locales[lang].meta
| default: 'Powered by :PLATFORM with :THEME theme.' | default: 'Powered by :PLATFORM with :THEME theme.'
| replace: ':PLATFORM', _platform | replace: ':THEME', _theme | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
}} }}
</p>
</p> </div>
</div> </div>
</div> </div>
</footer> </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-wrapper" class="d-flex justify-content-center">
<div id="main" class="container pl-xl-4 pr-xl-4"> <div id="main" class="container pl-xl-4 pr-xl-4">
{{ content }} {{ content }}
{% include footer.html %}
</div> </div>
{% include search-results.html %} {% include search-results.html %}
</div> <!-- #main-wrapper --> </div> <!-- #main-wrapper -->
{% include footer.html %}
{% if page.mermaid %} {% if page.mermaid %}
{% include mermaid.html %} {% include mermaid.html %}
{% endif %} {% endif %}

39
_sass/addon/commons.scss
View file

@ -148,11 +148,10 @@ kbd {
} }
footer { footer {
@include pl-pr(1.5rem);
font-size: 0.8rem; font-size: 0.8rem;
background-color: var(--main-wrapper-bg);
> div.d-flex { div.d-flex {
height: $footer-height; height: $footer-height;
line-height: 1.2rem; line-height: 1.2rem;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -1052,8 +1051,6 @@ $sidebar-display: "sidebar-display";
} }
#core-wrapper { #core-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
.categories, .categories,
#tags, #tags,
#archives { #archives {
@ -1084,7 +1081,7 @@ $sidebar-display: "sidebar-display";
#main-wrapper { #main-wrapper {
background-color: var(--main-wrapper-bg); background-color: var(--main-wrapper-bg);
position: relative; position: relative;
min-height: 100vh; min-height: calc(100vh - #{$footer-height});
@include pl-pr(0); @include pl-pr(0);
} }
@ -1189,7 +1186,7 @@ $sidebar-display: "sidebar-display";
footer { footer {
height: $footer-height-mobile; height: $footer-height-mobile;
> div.d-flex { div.d-flex {
padding: 1.5rem 0; padding: 1.5rem 0;
flex-wrap: wrap; flex-wrap: wrap;
-ms-flex-pack: distribute !important; -ms-flex-pack: distribute !important;
@ -1294,7 +1291,8 @@ $sidebar-display: "sidebar-display";
} }
#topbar, #topbar,
#main { #main,
footer > .container {
max-width: 100%; max-width: 100%;
} }
@ -1352,7 +1350,7 @@ $sidebar-display: "sidebar-display";
/* Phone & Pad */ /* Phone & Pad */
@media all and (min-width: 577px) and (max-width: 1199px) { @media all and (min-width: 577px) and (max-width: 1199px) {
footer > .d-flex > div { footer .d-flex > div {
width: 312px; width: 312px;
} }
} }
@ -1364,7 +1362,7 @@ $sidebar-display: "sidebar-display";
overflow-y: scroll; overflow-y: scroll;
} }
#main-wrapper { #main-wrapper, footer {
margin-left: $sidebar-width; margin-left: $sidebar-width;
} }
@ -1395,10 +1393,6 @@ $sidebar-display: "sidebar-display";
right: 5%; right: 5%;
} }
#topbar {
@include pl-pr(2rem);
}
#topbar-title { #topbar-title {
text-align: left; text-align: left;
} }
@ -1438,7 +1432,7 @@ $sidebar-display: "sidebar-display";
} }
#topbar-wrapper { #topbar-wrapper {
left: 210px; left: $sidebar-width-small;
} }
#search-results > div { #search-results > div {
@ -1456,8 +1450,8 @@ $sidebar-display: "sidebar-display";
font-size: 90%; font-size: 90%;
} }
#main-wrapper { #main-wrapper, footer {
margin-left: 210px; margin-left: $sidebar-width-small;
} }
#breadcrumb { #breadcrumb {
@ -1520,8 +1514,10 @@ $sidebar-display: "sidebar-display";
font-size: 1.03rem; font-size: 1.03rem;
} }
footer > div.d-felx { footer {
width: 85%; div.d-felx {
width: 85%;
}
} }
} }
@ -1533,7 +1529,7 @@ $sidebar-display: "sidebar-display";
} }
@media all and (min-width: 1650px) { @media all and (min-width: 1650px) {
#main-wrapper { #main-wrapper, footer {
margin-left: $sidebar-width-large; margin-left: $sidebar-width-large;
} }
@ -1546,7 +1542,8 @@ $sidebar-display: "sidebar-display";
} }
#topbar, #topbar,
#main { #main,
footer > .container {
max-width: $main-content-max-width; max-width: $main-content-max-width;
} }