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

Redesigned Footer.

Browse source
This commit is contained in:
Cotes Chung 2020-02-17 02:55:16 +08:00
parent f302f798aa
commit 2ad56cf249
5 changed files with 69 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
_config.yml
View file

@ -66,9 +66,6 @@ disqus:
comments: false # boolean type, the global switch for posts comments.
shortname: '' # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
# The year your website first ran.
first_run: 2019
# Prefer color scheme setting, available values:
#

18
_data/license.yml Normal file
View file

@ -0,0 +1,18 @@
# License data.
#
# v2.1
# https://github.com/cotes2020/jekyll-theme-chirpy
# © 2020 Cotes Chung
# MIT Licensed
icons:
- "fab fa-creative-commons"
- "fab fa-creative-commons-by"
type: "CC BY 4.0"
statment: >-
The blog posts on this site are licensed
under the Creative Commons Attribution 4.0 International (CC BY 4.0) License.
link: "https://creativecommons.org/licenses/by/4.0/"

24
_includes/footer.html
View file

@ -7,20 +7,26 @@
-->
<footer class="d-flex w-100 justify-content-center">
<div class="d-flex justify-content-between align-items-center">
<div class="copyright">
{% assign first = site.first_run | plus: 0 %}
{% assign last = 'now' | date: "%Y" | plus: 0 %}
<div class="d-flex justify-content-between align-items-center">
<div class="footer-left">
<p class="mb-0">
© {% if last > first %}{{ first }}-{% endif %}{{-last-}}
<a href="{{ site.social.links[0] }}" class="ml-1">{{ site.social.name }}</a>.
<br>Powered by <a href="https://jekyllrb.com" target="_blank">Jekyll</a> with theme <a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>.
© {{ 'now' | date: "%Y" }}
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
{% if site.data.license.statment %}
<span data-toggle="tooltip" data-placement="top"
title="{{ site.data.license.statment }}">Some rights reserved</span>.
{% endif %}
</p>
</div>
<div class="license">
<div class="footer-right">
<p class="mb-0">
The blog posts on this site are licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
Powered by
<a href="https://jekyllrb.com" target="_blank">Jekyll</a>
with theme
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>.
</p>
</div>
</div> <!-- div.d-flex -->
</footer>

4
assets/css/_dark/dark-main.scss
View file

@ -13,7 +13,6 @@
--search-wrapper-bg: rgb(34, 34, 39);
--search-icon: rgb(100, 102, 105);
--input-focus-border: rgb(112, 114, 115);
--footer-bg: rgb(31, 30, 30);
--footer-border: rgb(44, 45, 45);
--mask-bg: rgb(68, 69, 70);
@ -98,6 +97,9 @@
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
}
/* Footer */
---footer-link: rgb(146, 146, 146);
}

55
assets/css/main.scss
View file

@ -415,11 +415,13 @@ body {
/*--- main wrapper ---*/
$footer-height: 5rem;
#main-wrapper {
background-color: var(--main-wrapper-bg, white);//rgb(27, 27, 30);
background-color: var(--main-wrapper-bg, white);
position: relative;
min-height: 100%;
padding-bottom: 6rem; /* equals to or greatter than footer's height */
padding-bottom: $footer-height;
padding-left: 0;
padding-right: 0;
margin-left: 260px;
@ -452,18 +454,20 @@ body {
footer {
position: absolute;
bottom: 0;
height: 6rem; /* see the height of #main-wrapper */
padding: 1rem;
padding: 0 1rem;
height: $footer-height; /* see the height of #main-wrapper */
font-size: 0.8rem;
color: #7a7b7d;
background-color: var(--footer-bg, #f3f3f3);
border-top: 1px solid var(--footer-border, #f3f3f3);
background-color: var(--main-wrapper-bg, #ffffff);
}
footer>div.d-flex {
line-height: 1.2rem;
width: 95%;
max-width: 1035px;
border-top: 1px solid var(--footer-border, #f3f3f3);
margin-bottom: 1rem;
}
footer a:link,
@ -475,12 +479,15 @@ footer>.d-flex>div {
width: 350px;
}
footer .copyright a,
footer .license a {
footer .footer-left a,
footer .footer-right a {
font-weight: 600;
color: inherit;
color: var(---footer-link, inherit);
}
footer .footer-right {
text-align: right;
}
/*--- Panels ---*/
@ -859,9 +866,10 @@ table tbody td {
text-decoration: none;
}
div.tooltip-inner { /* Overrided BS4 Tooltip */
.tooltip-inner { /* Overrided BS4 Tooltip */
font-size: .7rem;
max-width: 220px;
text-align: left;
}
.disabled {
@ -884,10 +892,6 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
@media all and (max-width: 576px) {
#main-wrapper {
padding-bottom: 10rem; /* footer height */
}
#main>div.row:first-child>div:first-child {
min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
}
@ -922,20 +926,31 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
word-wrap: break-word;
}
/* footer and #main-wrapper expand vertical */
$footer-height: 6rem;
#main-wrapper {
padding-bottom: $footer-height;
}
footer {
height: 10rem;
height: $footer-height;
}
footer>div.d-flex {
width: 90%;
padding: 1.5rem;
flex-wrap: wrap;
justify-content: left!important;
-ms-flex-pack: distribute!important;
justify-content: space-around!important;
}
}
footer .footer-left,
footer .footer-right {
text-align: center;
}
}
/* Sidebar is visibal */
@media all and (min-width: 831px) {
@ -1388,7 +1403,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
}
footer>div.d-flex {
max-width: 1130px;
max-width: 1150px;
}
#search-result-wrapper {
@ -1419,10 +1434,6 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
padding-right: calc(100% - 350px - 1180px);
}
footer>div.d-flex {
max-width: 1150px;
}
#back-to-top {
right: calc(100% - 1920px + 15rem);
}