From 2ad56cf24996a9a8f8738e17c1836805b92c7024 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Mon, 17 Feb 2020 02:55:16 +0800 Subject: [PATCH] Redesigned Footer. --- _config.yml | 3 -- _data/license.yml | 18 +++++++++++ _includes/footer.html | 24 ++++++++------ assets/css/_dark/dark-main.scss | 4 ++- assets/css/main.scss | 55 ++++++++++++++++++++------------- 5 files changed, 69 insertions(+), 35 deletions(-) create mode 100644 _data/license.yml diff --git a/_config.yml b/_config.yml index 872de8b..b5695d3 100644 --- a/_config.yml +++ b/_config.yml @@ -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: # diff --git a/_data/license.yml b/_data/license.yml new file mode 100644 index 0000000..cd19f4f --- /dev/null +++ b/_data/license.yml @@ -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/" diff --git a/_includes/footer.html b/_includes/footer.html index 529376d..7f1b37a 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -7,20 +7,26 @@ --> diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss index 4aebd1e..8939e52 100644 --- a/assets/css/_dark/dark-main.scss +++ b/assets/css/_dark/dark-main.scss @@ -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); + } diff --git a/assets/css/main.scss b/assets/css/main.scss index 5303819..e87c61f 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -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); }