feat(layout): center the footer
This commit is contained in:
Cotes Chung
parent
62bcd601fc
commit
41b8f9f519
9 changed files with 77 additions and 141 deletions
|
|
@ -1,34 +1,35 @@
|
|||
<!-- The Footer -->
|
||||
|
||||
<footer>
|
||||
<div class="container px-lg-4">
|
||||
<div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
|
||||
<p>
|
||||
{%- capture _platform -%}
|
||||
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
|
||||
{%- endcapture -%}
|
||||
<footer
|
||||
class="
|
||||
d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
|
||||
"
|
||||
>
|
||||
<p>
|
||||
{{ '©' }}
|
||||
{{ 'now' | date: '%Y' }}
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
|
||||
{% if site.data.locales[include.lang].copyright.brief %}
|
||||
<span
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ site.data.locales[include.lang].copyright.verbose }}"
|
||||
>
|
||||
{{- site.data.locales[include.lang].copyright.brief -}}
|
||||
</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{%- capture _theme -%}
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
|
||||
{%- endcapture -%}
|
||||
<p>
|
||||
{%- capture _platform -%}
|
||||
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
|
||||
{%- endcapture -%}
|
||||
|
||||
{{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
|
||||
</p>
|
||||
{%- capture _theme -%}
|
||||
<a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
|
||||
{%- endcapture -%}
|
||||
|
||||
<p>
|
||||
{{- '©' }}
|
||||
{{ 'now' | date: '%Y' }}
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
|
||||
{% if site.data.locales[include.lang].copyright.brief %}
|
||||
<span
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ site.data.locales[include.lang].copyright.verbose }}"
|
||||
>
|
||||
{{- site.data.locales[include.lang].copyright.brief -}}
|
||||
</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
|
||||
</p>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
{% if relate_posts.size > 0 %}
|
||||
<div id="related-posts" class="mb-2 mb-sm-4">
|
||||
<h3 class="pt-2 mb-4 ms-1" data-toc-skip>
|
||||
<h3 class="pt-2 mb-4" data-toc-skip>
|
||||
{{ site.data.locales[include.lang].post.relate_posts }}
|
||||
</h3>
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
|
||||
|
|
|
|||
|
|
@ -30,8 +30,6 @@ layout: compress
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{% include_cached footer.html lang=lang %}
|
||||
|
||||
<div id="mask"></div>
|
||||
|
||||
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ refactor: true
|
|||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div id="post-list">
|
||||
<div id="post-list" class="pe-xl-2">
|
||||
{% for post in posts %}
|
||||
<a href="{{ post.url | relative_url }}" class="card-wrapper">
|
||||
<div class="card post-preview flex-md-row-reverse">
|
||||
|
|
|
|||
|
|
@ -9,21 +9,21 @@ layout: default
|
|||
{% assign has_tail = true %}
|
||||
{% endif %}
|
||||
|
||||
<div class="row{% unless has_tail %} mb-5{% endunless %}">
|
||||
<div class="row">
|
||||
<!-- core -->
|
||||
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
|
||||
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
|
||||
{% capture padding %}
|
||||
{% unless page.layout == 'home' %}px-1{% endunless %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="post {{ padding | strip }} px-md-2">
|
||||
<div class="post {{ padding | strip }} {% unless has_tail %} flex-grow-1 mb-5{% endunless %}">
|
||||
{% capture _content %}
|
||||
{% if layout.refactor or page.layout == 'page' %}
|
||||
{% include refactor-content.html content=content lang=lang %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
{% endcapture %}
|
||||
{% if layout.refactor or page.layout == 'page' %}
|
||||
{% include refactor-content.html content=content lang=lang %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
{% endcapture %}
|
||||
|
||||
{% if page.layout == 'page' or page.collection == 'tabs' %}
|
||||
{% assign tab_key = page.title | downcase %}
|
||||
|
|
@ -55,14 +55,16 @@ layout: default
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tail -->
|
||||
{% if has_tail %}
|
||||
<div class="row">
|
||||
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
|
||||
<div class="row">
|
||||
<!-- tail -->
|
||||
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4{% if has_tail%} mt-5{% endif %}">
|
||||
{% if has_tail %}
|
||||
{% for _include in layout.tail_includes %}
|
||||
{% assign _include_path = _include | append: '.html' %}
|
||||
{% include {{ _include_path }} lang=lang %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% include_cached footer.html lang=lang %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -175,17 +175,11 @@ kbd {
|
|||
footer {
|
||||
font-size: 0.8rem;
|
||||
background-color: var(--main-bg);
|
||||
height: $footer-height;
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
|
||||
@extend %text-color;
|
||||
|
||||
div.d-flex {
|
||||
height: $footer-height;
|
||||
line-height: 1.2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %text-highlight;
|
||||
|
||||
|
|
@ -195,7 +189,7 @@ footer {
|
|||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
line-height: 1.75;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -1081,6 +1075,7 @@ $btn-mb: 0.5rem;
|
|||
|
||||
#core-wrapper {
|
||||
line-height: 1.75;
|
||||
min-height: calc(100vh - $topbar-height - $footer-height);
|
||||
|
||||
.categories,
|
||||
#tags,
|
||||
|
|
@ -1108,7 +1103,6 @@ $btn-mb: 0.5rem;
|
|||
|
||||
#main-wrapper {
|
||||
position: relative;
|
||||
min-height: calc(100vh - $footer-height-mobile);
|
||||
|
||||
@include pl-pr(0);
|
||||
}
|
||||
|
|
@ -1122,19 +1116,17 @@ $btn-mb: 0.5rem;
|
|||
/* --- button back-to-top --- */
|
||||
|
||||
#back-to-top {
|
||||
$size: 3rem;
|
||||
|
||||
display: none;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 2rem;
|
||||
bottom: calc($footer-height-large - $back2top-size / 2);
|
||||
background: var(--button-bg);
|
||||
color: var(--btn-backtotop-color);
|
||||
padding: 0;
|
||||
width: $size;
|
||||
height: $size;
|
||||
width: $back2top-size;
|
||||
height: $back2top-size;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--btn-backtotop-border-color);
|
||||
transition: transform 0.2s ease-out;
|
||||
|
|
@ -1146,7 +1138,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
i {
|
||||
line-height: $size;
|
||||
line-height: $back2top-size;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
|
@ -1212,14 +1204,12 @@ $btn-mb: 0.5rem;
|
|||
*/
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#main-wrapper {
|
||||
min-height: calc(100vh - #{$footer-height-mobile});
|
||||
}
|
||||
|
||||
#core-wrapper {
|
||||
min-height: calc(100vh - $topbar-height - $footer-height-large);
|
||||
|
||||
.post-content {
|
||||
> blockquote[class^='prompt-'] {
|
||||
@include ml-mr(-1.25rem);
|
||||
@include ml-mr(-1rem);
|
||||
|
||||
border-radius: 0;
|
||||
max-width: none;
|
||||
|
|
@ -1260,21 +1250,11 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include slide;
|
||||
|
||||
height: $footer-height-mobile;
|
||||
|
||||
div.d-flex {
|
||||
padding: 1.5rem 0;
|
||||
line-height: 1.65;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
height: $footer-height-large;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
[#{$sidebar-display}] {
|
||||
|
|
@ -1282,8 +1262,7 @@ $btn-mb: 0.5rem;
|
|||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#main-wrapper,
|
||||
footer {
|
||||
#main-wrapper {
|
||||
transform: translateX(#{$sidebar-width});
|
||||
}
|
||||
|
||||
|
|
@ -1304,8 +1283,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
#topbar,
|
||||
#main,
|
||||
footer > .container {
|
||||
#main {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1352,13 +1330,6 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
} /* max-width: 849px */
|
||||
|
||||
/* Phone & Pad */
|
||||
@media all and (min-width: 577px) and (max-width: 1199px) {
|
||||
footer .d-flex > div {
|
||||
width: 312px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar is visible */
|
||||
@media all and (min-width: 850px) {
|
||||
/* Solved jumping scrollbar */
|
||||
|
|
@ -1366,26 +1337,8 @@ $btn-mb: 0.5rem;
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#main-wrapper,
|
||||
footer {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
min-height: calc(100vh - $footer-height);
|
||||
}
|
||||
|
||||
footer {
|
||||
p {
|
||||
width: auto;
|
||||
&:last-child {
|
||||
&::before {
|
||||
content: '-';
|
||||
margin: 0 0.75rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
|
|
@ -1419,8 +1372,8 @@ $btn-mb: 0.5rem;
|
|||
|
||||
/* button 'back-to-Top' position */
|
||||
#back-to-top {
|
||||
bottom: 5.5rem;
|
||||
right: 5%;
|
||||
bottom: calc($footer-height - $back2top-size / 2);
|
||||
}
|
||||
|
||||
#topbar-title {
|
||||
|
|
@ -1465,10 +1418,6 @@ $btn-mb: 0.5rem;
|
|||
/* --- desktop mode, both sidebar and panel are visible --- */
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
#back-to-top {
|
||||
bottom: 6.5rem;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
|
@ -1497,12 +1446,6 @@ $btn-mb: 0.5rem;
|
|||
.post-content {
|
||||
font-size: 1.03rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
div.d-felx {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
|
|
@ -1514,8 +1457,7 @@ $btn-mb: 0.5rem;
|
|||
@media all and (min-width: 1650px) {
|
||||
$icon-gap: 1rem;
|
||||
|
||||
#main-wrapper,
|
||||
footer {
|
||||
#main-wrapper {
|
||||
margin-left: $sidebar-width-large;
|
||||
}
|
||||
|
||||
|
|
@ -1529,8 +1471,7 @@ $btn-mb: 0.5rem;
|
|||
);
|
||||
}
|
||||
|
||||
#main,
|
||||
footer > .container {
|
||||
#main {
|
||||
max-width: $main-content-max-width;
|
||||
padding-left: 1.75rem !important;
|
||||
padding-right: 1.75rem !important;
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ div[class^='language-'] {
|
|||
box-shadow: var(--language-border-color) 0 0 0 1px;
|
||||
|
||||
.post-content > & {
|
||||
@include ml-mr(-1.25rem);
|
||||
@include ml-mr(-1rem);
|
||||
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,20 +12,21 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
|
|||
$topbar-height: 3rem !default;
|
||||
$search-max-width: 210px !default;
|
||||
$footer-height: 5rem !default;
|
||||
$footer-height-mobile: 6rem !default; /* screen width: < 850px */
|
||||
$footer-height-large: 6rem !default; /* screen width: < 850px */
|
||||
$main-content-max-width: 1250px !default;
|
||||
$bottom-min-height: 35rem !default;
|
||||
$base-radius: 0.5rem;
|
||||
$base-radius: 0.5rem !default;
|
||||
$back2top-size: 2.75rem !default;
|
||||
|
||||
/* syntax highlight */
|
||||
|
||||
$code-font-size: 0.85rem !default;
|
||||
$code-header-height: 2.25rem;
|
||||
$code-dot-size: 0.75rem;
|
||||
$code-dot-gap: 0.5rem;
|
||||
$code-icon-width: 1.75rem;
|
||||
$code-header-height: 2.25rem !default;
|
||||
$code-dot-size: 0.75rem !default;
|
||||
$code-dot-gap: 0.5rem !default;
|
||||
$code-icon-width: 1.75rem !default;
|
||||
|
||||
/* fonts */
|
||||
|
||||
$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
|
||||
$font-family-heading: Lato, 'Microsoft Yahei', sans-serif;
|
||||
$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
|
||||
$font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;
|
||||
|
|
|
|||
|
|
@ -199,10 +199,3 @@
|
|||
}
|
||||
} /* .pagination */
|
||||
}
|
||||
|
||||
/* Panel is visible */
|
||||
@media all and (min-width: 1200px) {
|
||||
#post-list {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue