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

feat(layout): center the footer

Browse source
This commit is contained in:
Cotes Chung 2023-09-07 01:58:03 +08:00
parent 62bcd601fc
commit 41b8f9f519
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
9 changed files with 77 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
_includes/footer.html
View file

@ -1,34 +1,35 @@
<!-- The Footer --> <!-- The Footer -->
<footer> <footer
<div class="container px-lg-4"> class="
<div class="d-flex justify-content-center align-items-center text-muted mx-md-3"> d-flex flex-column justify-content-center text-muted
<p> flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
{%- capture _platform -%} "
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</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>
{%- capture _theme -%} <p>
<a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a> {%- capture _platform -%}
{%- endcapture -%} <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
{%- endcapture -%}
{{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }} {%- capture _theme -%}
</p> <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
{%- endcapture -%}
<p> {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
{{- '©' }} </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>
</footer> </footer>

2
_includes/related-posts.html
View file

@ -70,7 +70,7 @@
{% if relate_posts.size > 0 %} {% if relate_posts.size > 0 %}
<div id="related-posts" class="mb-2 mb-sm-4"> <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 }} {{ site.data.locales[include.lang].post.relate_posts }}
</h3> </h3>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"> <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">

2
_layouts/default.html
View file

@ -30,8 +30,6 @@ layout: compress
</div> </div>
</div> </div>
{% include_cached footer.html lang=lang %}
<div id="mask"></div> <div id="mask"></div>
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow"> <button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">

2
_layouts/home.html
View file

@ -40,7 +40,7 @@ refactor: true
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<div id="post-list"> <div id="post-list" class="pe-xl-2">
{% for post in posts %} {% for post in posts %}
<a href="{{ post.url | relative_url }}" class="card-wrapper"> <a href="{{ post.url | relative_url }}" class="card-wrapper">
<div class="card post-preview flex-md-row-reverse"> <div class="card post-preview flex-md-row-reverse">

32
_layouts/page.html
View file

@ -9,21 +9,21 @@ layout: default
{% assign has_tail = true %} {% assign has_tail = true %}
{% endif %} {% endif %}
<div class="row{% unless has_tail %} mb-5{% endunless %}"> <div class="row">
<!-- core --> <!-- 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 %} {% capture padding %}
{% unless page.layout == 'home' %}px-1{% endunless %} {% unless page.layout == 'home' %}px-1{% endunless %}
{% endcapture %} {% 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 %} {% capture _content %}
{% if layout.refactor or page.layout == 'page' %} {% if layout.refactor or page.layout == 'page' %}
{% include refactor-content.html content=content lang=lang %} {% include refactor-content.html content=content lang=lang %}
{% else %} {% else %}
{{ content }} {{ content }}
{% endif %} {% endif %}
{% endcapture %} {% endcapture %}
{% if page.layout == 'page' or page.collection == 'tabs' %} {% if page.layout == 'page' or page.collection == 'tabs' %}
{% assign tab_key = page.title | downcase %} {% assign tab_key = page.title | downcase %}
@ -55,14 +55,16 @@ layout: default
</div> </div>
</div> </div>
<!-- tail --> <div class="row">
{% if has_tail %} <!-- tail -->
<div class="row"> <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4{% if has_tail%} mt-5{% endif %}">
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5"> {% if has_tail %}
{% for _include in layout.tail_includes %} {% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %} {% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %} {% include {{ _include_path }} lang=lang %}
{% endfor %} {% endfor %}
</div> {% endif %}
{% include_cached footer.html lang=lang %}
</div> </div>
{% endif %} </div>

97
_sass/addon/commons.scss
View file

@ -175,17 +175,11 @@ kbd {
footer { footer {
font-size: 0.8rem; font-size: 0.8rem;
background-color: var(--main-bg); background-color: var(--main-bg);
height: $footer-height;
border-top: 1px solid var(--main-border-color);
@extend %text-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 { a {
@extend %text-highlight; @extend %text-highlight;
@ -195,7 +189,7 @@ footer {
} }
p { p {
width: 100%; line-height: 1.75;
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
} }
@ -1081,6 +1075,7 @@ $btn-mb: 0.5rem;
#core-wrapper { #core-wrapper {
line-height: 1.75; line-height: 1.75;
min-height: calc(100vh - $topbar-height - $footer-height);
.categories, .categories,
#tags, #tags,
@ -1108,7 +1103,6 @@ $btn-mb: 0.5rem;
#main-wrapper { #main-wrapper {
position: relative; position: relative;
min-height: calc(100vh - $footer-height-mobile);
@include pl-pr(0); @include pl-pr(0);
} }
@ -1122,19 +1116,17 @@ $btn-mb: 0.5rem;
/* --- button back-to-top --- */ /* --- button back-to-top --- */
#back-to-top { #back-to-top {
$size: 3rem;
display: none; display: none;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
right: 1rem; right: 1rem;
bottom: 2rem; bottom: calc($footer-height-large - $back2top-size / 2);
background: var(--button-bg); background: var(--button-bg);
color: var(--btn-backtotop-color); color: var(--btn-backtotop-color);
padding: 0; padding: 0;
width: $size; width: $back2top-size;
height: $size; height: $back2top-size;
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--btn-backtotop-border-color); border: 1px solid var(--btn-backtotop-border-color);
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
@ -1146,7 +1138,7 @@ $btn-mb: 0.5rem;
} }
i { i {
line-height: $size; line-height: $back2top-size;
position: relative; position: relative;
bottom: 2px; bottom: 2px;
} }
@ -1212,14 +1204,12 @@ $btn-mb: 0.5rem;
*/ */
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
#main-wrapper {
min-height: calc(100vh - #{$footer-height-mobile});
}
#core-wrapper { #core-wrapper {
min-height: calc(100vh - $topbar-height - $footer-height-large);
.post-content { .post-content {
> blockquote[class^='prompt-'] { > blockquote[class^='prompt-'] {
@include ml-mr(-1.25rem); @include ml-mr(-1rem);
border-radius: 0; border-radius: 0;
max-width: none; max-width: none;
@ -1260,21 +1250,11 @@ $btn-mb: 0.5rem;
} }
} }
html,
body {
overflow-x: hidden;
}
footer { footer {
@include slide; @include slide;
height: $footer-height-mobile; height: $footer-height-large;
padding: 1.5rem 0;
div.d-flex {
padding: 1.5rem 0;
line-height: 1.65;
flex-wrap: wrap;
}
} }
[#{$sidebar-display}] { [#{$sidebar-display}] {
@ -1282,8 +1262,7 @@ $btn-mb: 0.5rem;
transform: translateX(0); transform: translateX(0);
} }
#main-wrapper, #main-wrapper {
footer {
transform: translateX(#{$sidebar-width}); transform: translateX(#{$sidebar-width});
} }
@ -1304,8 +1283,7 @@ $btn-mb: 0.5rem;
} }
#topbar, #topbar,
#main, #main {
footer > .container {
max-width: 100%; max-width: 100%;
} }
@ -1352,13 +1330,6 @@ $btn-mb: 0.5rem;
} }
} /* max-width: 849px */ } /* max-width: 849px */
/* Phone & Pad */
@media all and (min-width: 577px) and (max-width: 1199px) {
footer .d-flex > div {
width: 312px;
}
}
/* Sidebar is visible */ /* Sidebar is visible */
@media all and (min-width: 850px) { @media all and (min-width: 850px) {
/* Solved jumping scrollbar */ /* Solved jumping scrollbar */
@ -1366,26 +1337,8 @@ $btn-mb: 0.5rem;
overflow-y: scroll; overflow-y: scroll;
} }
#main-wrapper,
footer {
margin-left: $sidebar-width;
}
#main-wrapper { #main-wrapper {
min-height: calc(100vh - $footer-height); margin-left: $sidebar-width;
}
footer {
p {
width: auto;
&:last-child {
&::before {
content: '-';
margin: 0 0.75rem;
opacity: 0.8;
}
}
}
} }
#sidebar { #sidebar {
@ -1419,8 +1372,8 @@ $btn-mb: 0.5rem;
/* button 'back-to-Top' position */ /* button 'back-to-Top' position */
#back-to-top { #back-to-top {
bottom: 5.5rem;
right: 5%; right: 5%;
bottom: calc($footer-height - $back2top-size / 2);
} }
#topbar-title { #topbar-title {
@ -1465,10 +1418,6 @@ $btn-mb: 0.5rem;
/* --- desktop mode, both sidebar and panel are visible --- */ /* --- desktop mode, both sidebar and panel are visible --- */
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
#back-to-top {
bottom: 6.5rem;
}
#search-wrapper { #search-wrapper {
margin-right: 4rem; margin-right: 4rem;
} }
@ -1497,12 +1446,6 @@ $btn-mb: 0.5rem;
.post-content { .post-content {
font-size: 1.03rem; font-size: 1.03rem;
} }
footer {
div.d-felx {
width: 85%;
}
}
} }
@media all and (min-width: 1400px) { @media all and (min-width: 1400px) {
@ -1514,8 +1457,7 @@ $btn-mb: 0.5rem;
@media all and (min-width: 1650px) { @media all and (min-width: 1650px) {
$icon-gap: 1rem; $icon-gap: 1rem;
#main-wrapper, #main-wrapper {
footer {
margin-left: $sidebar-width-large; margin-left: $sidebar-width-large;
} }
@ -1529,8 +1471,7 @@ $btn-mb: 0.5rem;
); );
} }
#main, #main {
footer > .container {
max-width: $main-content-max-width; max-width: $main-content-max-width;
padding-left: 1.75rem !important; padding-left: 1.75rem !important;
padding-right: 1.75rem !important; padding-right: 1.75rem !important;

2
_sass/addon/syntax.scss
View file

@ -150,7 +150,7 @@ div[class^='language-'] {
box-shadow: var(--language-border-color) 0 0 0 1px; box-shadow: var(--language-border-color) 0 0 0 1px;
.post-content > & { .post-content > & {
@include ml-mr(-1.25rem); @include ml-mr(-1rem);
border-radius: 0; border-radius: 0;
} }

17
_sass/addon/variables.scss
View file

@ -12,20 +12,21 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
$topbar-height: 3rem !default; $topbar-height: 3rem !default;
$search-max-width: 210px !default; $search-max-width: 210px !default;
$footer-height: 5rem !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; $main-content-max-width: 1250px !default;
$bottom-min-height: 35rem !default; $bottom-min-height: 35rem !default;
$base-radius: 0.5rem; $base-radius: 0.5rem !default;
$back2top-size: 2.75rem !default;
/* syntax highlight */ /* syntax highlight */
$code-font-size: 0.85rem !default; $code-font-size: 0.85rem !default;
$code-header-height: 2.25rem; $code-header-height: 2.25rem !default;
$code-dot-size: 0.75rem; $code-dot-size: 0.75rem !default;
$code-dot-gap: 0.5rem; $code-dot-gap: 0.5rem !default;
$code-icon-width: 1.75rem; $code-icon-width: 1.75rem !default;
/* fonts */ /* fonts */
$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; $font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif !default;
$font-family-heading: Lato, 'Microsoft Yahei', sans-serif; $font-family-heading: Lato, 'Microsoft Yahei', sans-serif !default;

7
_sass/layout/home.scss
View file

@ -199,10 +199,3 @@
} }
} /* .pagination */ } /* .pagination */
} }
/* Panel is visible */
@media all and (min-width: 1200px) {
#post-list {
padding-right: 0.5rem;
}
}