Skip to content

Commit 046b781

Browse files
cotes2020cotes2020
committed
Redesigned Footer.
1 parent c3ab23d commit 046b781

5 files changed

Lines changed: 69 additions & 35 deletions

File tree

‎_config.yml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,6 @@ disqus:
6666
comments: false # boolean type, the global switch for posts comments.
6767
shortname: '' # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
6868

69-
# The year your website first ran.
70-
first_run: 2019
71-
7269

7370
# Prefer color scheme setting, available values:
7471
#

‎_data/license.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# License data.
2+
#
3+
# v2.1
4+
# https://github.com/cotes2020/jekyll-theme-chirpy
5+
# © 2020 Cotes Chung
6+
# MIT Licensed
7+
8+
icons:
9+
- "fab fa-creative-commons"
10+
- "fab fa-creative-commons-by"
11+
12+
type: "CC BY 4.0"
13+
14+
statment: >-
15+
The blog posts on this site are licensed
16+
under the Creative Commons Attribution 4.0 International (CC BY 4.0) License.
17+
18+
link: "https://creativecommons.org/licenses/by/4.0/"

‎_includes/footer.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,26 @@
77
-->
88

99
<footer class="d-flex w-100 justify-content-center">
10-
<div class="d-flex justify-content-between align-items-center">
11-
<div class="copyright">
12-
{% assign first = site.first_run | plus: 0 %}
13-
{% assign last = 'now' | date: "%Y" | plus: 0 %}
10+
<div class="d-flex justify-content-between align-items-center">
11+
<div class="footer-left">
1412
<p class="mb-0">
15-
© {% if last > first %}{{ first }}-{% endif %}{{-last-}}
16-
<a href="{{ site.social.links[0] }}" class="ml-1">{{ site.social.name }}</a>.
17-
<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>.
13+
© {{ 'now' | date: "%Y" }}
14+
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
15+
{% if site.data.license.statment %}
16+
<span data-toggle="tooltip" data-placement="top"
17+
title="{{ site.data.license.statment }}">Some rights reserved</span>.
18+
{% endif %}
1819
</p>
1920
</div>
20-
<div class="license">
21+
22+
<div class="footer-right">
2123
<p class="mb-0">
22-
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>.
24+
Powered by
25+
<a href="https://jekyllrb.com" target="_blank">Jekyll</a>
26+
with theme
27+
<a href="https://github.com/cotes2020/jekyll-theme-chirpy/">Chirpy</a>.
2328
</p>
2429
</div>
30+
2531
</div> <!-- div.d-flex -->
2632
</footer>

‎assets/css/_dark/dark-main.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
--search-wrapper-bg: rgb(34, 34, 39);
1414
--search-icon: rgb(100, 102, 105);
1515
--input-focus-border: rgb(112, 114, 115);
16-
--footer-bg: rgb(31, 30, 30);
1716
--footer-border: rgb(44, 45, 45);
1817
--mask-bg: rgb(68, 69, 70);
1918

@@ -98,6 +97,9 @@
9897
rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
9998
}
10099

100+
/* Footer */
101+
---footer-link: rgb(146, 146, 146);
102+
101103
}
102104

103105

‎assets/css/main.scss‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -415,11 +415,13 @@ body {
415415

416416
/*--- main wrapper ---*/
417417

418+
$footer-height: 5rem;
419+
418420
#main-wrapper {
419-
background-color: var(--main-wrapper-bg, white);//rgb(27, 27, 30);
421+
background-color: var(--main-wrapper-bg, white);
420422
position: relative;
421423
min-height: 100%;
422-
padding-bottom: 6rem; /* equals to or greatter than footer's height */
424+
padding-bottom: $footer-height;
423425
padding-left: 0;
424426
padding-right: 0;
425427
margin-left: 260px;
@@ -452,18 +454,20 @@ body {
452454
footer {
453455
position: absolute;
454456
bottom: 0;
455-
height: 6rem; /* see the height of #main-wrapper */
456-
padding: 1rem;
457+
padding: 0 1rem;
458+
height: $footer-height; /* see the height of #main-wrapper */
457459
font-size: 0.8rem;
458460
color: #7a7b7d;
459-
background-color: var(--footer-bg, #f3f3f3);
460-
border-top: 1px solid var(--footer-border, #f3f3f3);
461+
background-color: var(--main-wrapper-bg, #ffffff);
461462
}
462463

464+
463465
footer>div.d-flex {
464466
line-height: 1.2rem;
465467
width: 95%;
466468
max-width: 1035px;
469+
border-top: 1px solid var(--footer-border, #f3f3f3);
470+
margin-bottom: 1rem;
467471
}
468472

469473
footer a:link,
@@ -475,12 +479,15 @@ footer>.d-flex>div {
475479
width: 350px;
476480
}
477481

478-
footer .copyright a,
479-
footer .license a {
482+
footer .footer-left a,
483+
footer .footer-right a {
480484
font-weight: 600;
481-
color: inherit;
485+
color: var(---footer-link, inherit);
482486
}
483487

488+
footer .footer-right {
489+
text-align: right;
490+
}
484491

485492
/*--- Panels ---*/
486493

@@ -859,9 +866,10 @@ table tbody td {
859866
text-decoration: none;
860867
}
861868

862-
div.tooltip-inner { /* Overrided BS4 Tooltip */
869+
.tooltip-inner { /* Overrided BS4 Tooltip */
863870
font-size: .7rem;
864871
max-width: 220px;
872+
text-align: left;
865873
}
866874

867875
.disabled {
@@ -884,10 +892,6 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
884892

885893
@media all and (max-width: 576px) {
886894

887-
#main-wrapper {
888-
padding-bottom: 10rem; /* footer height */
889-
}
890-
891895
#main>div.row:first-child>div:first-child {
892896
min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
893897
}
@@ -922,20 +926,31 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
922926
word-wrap: break-word;
923927
}
924928

925-
/* footer and #main-wrapper expand vertical */
929+
$footer-height: 6rem;
930+
931+
#main-wrapper {
932+
padding-bottom: $footer-height;
933+
}
934+
926935
footer {
927-
height: 10rem;
936+
height: $footer-height;
928937
}
929938

930939
footer>div.d-flex {
940+
width: 90%;
941+
padding: 1.5rem;
931942
flex-wrap: wrap;
932943
justify-content: left!important;
933944
-ms-flex-pack: distribute!important;
934945
justify-content: space-around!important;
935946
}
936947

937-
}
948+
footer .footer-left,
949+
footer .footer-right {
950+
text-align: center;
951+
}
938952

953+
}
939954

940955
/* Sidebar is visibal */
941956
@media all and (min-width: 831px) {
@@ -1388,7 +1403,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
13881403
}
13891404

13901405
footer>div.d-flex {
1391-
max-width: 1130px;
1406+
max-width: 1150px;
13921407
}
13931408

13941409
#search-result-wrapper {
@@ -1419,10 +1434,6 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
14191434
padding-right: calc(100% - 350px - 1180px);
14201435
}
14211436

1422-
footer>div.d-flex {
1423-
max-width: 1150px;
1424-
}
1425-
14261437
#back-to-top {
14271438
right: calc(100% - 1920px + 15rem);
14281439
}

0 commit comments

Comments
 (0)