refactor(deps): upgrade bootstrap from v4.6 to v5.2
- update class name of the spacing, font style, cards and toasts - update attribute names & tooltip usage - remove custom smooth scroll - syntax colors
This commit is contained in:
Cotes Chung
parent
3210c59466
commit
d9e1d84f08
41 changed files with 170 additions and 304 deletions
|
|
@ -19,8 +19,8 @@ jquery:
|
|||
js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
|
||||
|
||||
bootstrap:
|
||||
css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
|
||||
js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
|
||||
css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
|
||||
js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
|
||||
|
||||
toc:
|
||||
css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
data-ts="{{ include.date | date: '%s' }}"
|
||||
data-df="{{ df_dayjs }}"
|
||||
{% if include.tooltip %}
|
||||
data-toggle="tooltip" data-placement="bottom"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
{% endif %}
|
||||
>
|
||||
{{ include.date | date: df_strftime }}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!-- The Footer -->
|
||||
|
||||
<footer>
|
||||
<div class="container pl-lg-4 pr-lg-4">
|
||||
<div class="d-flex justify-content-center align-items-center text-muted ml-md-3 mr-md-3">
|
||||
<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>
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
|
||||
{% if site.data.locales[include.lang].copyright.brief %}
|
||||
<span
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ site.data.locales[include.lang].copyright.verbose }}"
|
||||
>
|
||||
{{- site.data.locales[include.lang].copyright.brief -}}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<!--
|
||||
The paginator for post list on HomgPage.
|
||||
-->
|
||||
<!-- The paginator for post list on HomgPage. -->
|
||||
|
||||
<ul class="pagination align-items-center mt-4 pl-lg-2">
|
||||
<ul class="pagination align-items-center mt-4 ps-lg-2">
|
||||
<!-- left arrow -->
|
||||
{% if paginator.previous_page %}
|
||||
{% assign prev_url = paginator.previous_page_path | relative_url %}
|
||||
{% else %}
|
||||
{% assign prev_url = "#" %}
|
||||
{% assign prev_url = '#' %}
|
||||
{% endif %}
|
||||
|
||||
<li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
|
||||
|
|
@ -21,7 +19,6 @@
|
|||
{% assign right_ellipsis = false %}
|
||||
|
||||
{% for i in (1..paginator.total_pages) %}
|
||||
|
||||
{% assign pre = paginator.page | minus: 1 %}
|
||||
{% assign next = paginator.page | plus: 1 %}
|
||||
{% assign pre_less = pre | minus: 1 %}
|
||||
|
|
@ -37,7 +34,7 @@
|
|||
{% assign show = true %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if i == 1 or i == paginator.total_pages%}
|
||||
{% if i == 1 or i == paginator.total_pages %}
|
||||
{% assign show = true %}
|
||||
{% elsif i >= pre and i <= next %}
|
||||
{% assign show = true %}
|
||||
|
|
@ -47,7 +44,12 @@
|
|||
{% if show %}
|
||||
<!-- show number -->
|
||||
<li class="page-item {% if i == paginator.page %} active{% endif %}">
|
||||
<a class="page-link btn-box-shadow" href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}">{{ i }}</a>
|
||||
<a
|
||||
class="page-link btn-box-shadow"
|
||||
href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
|
||||
>
|
||||
{{- i -}}
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<!-- hide number -->
|
||||
|
|
@ -63,7 +65,6 @@
|
|||
{% assign right_ellipsis = true %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
<!-- mobile pagination -->
|
||||
|
|
@ -76,7 +77,7 @@
|
|||
{% if paginator.next_page_path %}
|
||||
{% assign next_url = paginator.next_page_path | relative_url %}
|
||||
{% else %}
|
||||
{% assign next_url = "#" %}
|
||||
{% assign next_url = '#' %}
|
||||
{% endif %}
|
||||
|
||||
<li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
|
||||
|
|
@ -84,5 +85,5 @@
|
|||
<i class="fas fa-angle-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul> <!-- .pagination -->
|
||||
</ul>
|
||||
<!-- .pagination -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- Post sharing snippet -->
|
||||
|
||||
<div class="share-wrapper">
|
||||
<span class="share-label text-muted mr-1">{{ site.data.locales[include.lang].post.share }}</span>
|
||||
<span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
|
||||
<span class="share-icons">
|
||||
{% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
|
||||
{% assign title = title | uri_escape %}
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
{% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
|
||||
<a
|
||||
href="{{ link }}"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ share.type }}"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
<i
|
||||
id="copy-link"
|
||||
class="fa-fw fas fa-link small"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
|
||||
data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
<!-- return element -->
|
||||
<span
|
||||
class="readtime"
|
||||
data-toggle="tooltip"
|
||||
data-placement="bottom"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
title="{{ words }} {{ site.data.locales[include.lang].post.words }}"
|
||||
>
|
||||
<em>
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@
|
|||
|
||||
{% assign left = snippet | split: mark_end | first %}
|
||||
{% assign right = snippet | slice: left.size, snippet.size %}
|
||||
{% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}
|
||||
{% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
|
||||
|
||||
{% assign _new_content = _new_content | append: mark_start
|
||||
| append: left | append: anchor | append: right
|
||||
|
|
|
|||
|
|
@ -75,28 +75,27 @@
|
|||
|
||||
{% if index_list.size > 0 %}
|
||||
<div id="related-posts" class="mb-2 mb-sm-4">
|
||||
<h3
|
||||
class="pt-2 mb-4 ml-1"
|
||||
data-toc-skip
|
||||
>
|
||||
<h3 class="pt-2 mb-4 ms-1" data-toc-skip>
|
||||
{{ site.data.locales[include.lang].post.relate_posts }}
|
||||
</h3>
|
||||
<div class="card-deck mb-4">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
|
||||
{% for entry in index_list %}
|
||||
{% assign index = entry | plus: 0 %}
|
||||
{% assign post = site.posts[index] %}
|
||||
<a href="{{ post.url | relative_url }}" class="card post-preview">
|
||||
<div class="card-body">
|
||||
{% include datetime.html date=post.date class="small" lang=include.lang %}
|
||||
<h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
|
||||
<div class="text-muted small">
|
||||
<p>
|
||||
{% include no-linenos.html content=post.content %}
|
||||
{{ content | markdownify | strip_html | truncate: 200 | escape }}
|
||||
</p>
|
||||
<div class="col">
|
||||
<a href="{{ post.url | relative_url }}" class="card post-preview h-100">
|
||||
<div class="card-body">
|
||||
{% include datetime.html date=post.date class="small" lang=include.lang %}
|
||||
<h3 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h3>
|
||||
<div class="text-muted small">
|
||||
<p>
|
||||
{% include no-linenos.html content=post.content %}
|
||||
{{ content | markdownify | strip_html | truncate: 200 | escape }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- .card-deck -->
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
-->
|
||||
|
||||
{% capture result_elem %}
|
||||
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
|
||||
<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<a href="{url}">{title}</a>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
{categories}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
<script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
|
||||
|
||||
<script>
|
||||
|
||||
SimpleJekyllSearch({
|
||||
searchInput: document.getElementById('search-input'),
|
||||
resultsContainer: document.getElementById('search-results'),
|
||||
|
|
@ -30,7 +31,7 @@ SimpleJekyllSearch({
|
|||
if (value === '') {
|
||||
return `${value}`;
|
||||
} else {
|
||||
return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
|
||||
return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -43,4 +44,5 @@ SimpleJekyllSearch({
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<!--
|
||||
The Search results
|
||||
-->
|
||||
<!-- The Search results -->
|
||||
|
||||
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
|
||||
<div class="col-12 col-sm-11 post-content">
|
||||
<div class="col-11 post-content">
|
||||
<div id="search-hints">
|
||||
{% include trending-tags.html %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
<div class="site-title">
|
||||
<a href="{{ '/' | relative_url }}">{{ site.title }}</a>
|
||||
</div>
|
||||
<div class="site-subtitle font-italic">{{ site.tagline }}</div>
|
||||
<div class="site-subtitle fst-italic">{{ site.tagline }}</div>
|
||||
</div>
|
||||
<!-- .profile-wrapper -->
|
||||
|
||||
<ul class="flex-grow-1 w-100 pl-0">
|
||||
<ul class="nav flex-column flex-grow-1 w-100 ps-0">
|
||||
<!-- home -->
|
||||
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
|
||||
<a href="{{ '/' | relative_url }}" class="nav-link">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
{% endif %}
|
||||
|
||||
{% if enable_toc %}
|
||||
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
|
||||
<div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
|
||||
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
|
||||
<div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
|
||||
<nav id="toc"></nav>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<!-- The Top Bar -->
|
||||
|
||||
<div id="topbar-wrapper">
|
||||
<div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
|
||||
<div
|
||||
id="topbar"
|
||||
class="container d-flex align-items-center justify-content-between h-100 px-3 px-md-4 px-xxl-5"
|
||||
>
|
||||
<span id="breadcrumb">
|
||||
{% assign paths = page.url | split: '/' %}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
{% if trending_tags.size > 0 %}
|
||||
<div id="access-tags">
|
||||
<div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
|
||||
<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
|
||||
<div class="d-flex flex-wrap mt-3 mb-1 me-3">
|
||||
{% for tag_name in trending_tags %}
|
||||
{% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
|
||||
<a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
{% if update_list.size > 0 %}
|
||||
<div id="access-lastmod" class="post">
|
||||
<div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
|
||||
<ul class="post-content pl-0 pb-1 ml-1 mt-2">
|
||||
<ul class="post-content ps-0 pb-1 ms-1 mt-2">
|
||||
{% for item in update_list %}
|
||||
{% assign index = item | split: '::' | last | plus: 0 %}
|
||||
{% assign post = site.posts[index] %}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,6 @@ export function back2top() {
|
|||
});
|
||||
|
||||
$('#back-to-top').on('click', () => {
|
||||
$('body,html').animate(
|
||||
{
|
||||
scrollTop: 0
|
||||
},
|
||||
800
|
||||
);
|
||||
return false;
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
* - clipboard.js (https://github.com/zenorocha/clipboard.js)
|
||||
*/
|
||||
|
||||
const btnSelector = '.code-header>button';
|
||||
const clipboardSelector = '.code-header>button';
|
||||
const ICON_SUCCESS = 'fas fa-check';
|
||||
const ATTR_TIMEOUT = 'timeout';
|
||||
const ATTR_TITLE_SUCCEED = 'data-title-succeed';
|
||||
const ATTR_TITLE_ORIGIN = 'data-original-title';
|
||||
const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
|
||||
const TIMEOUT = 2000; // in milliseconds
|
||||
|
||||
function isLocked(node) {
|
||||
|
|
@ -36,7 +36,7 @@ function getIcon(btn) {
|
|||
return iconNode.attr('class');
|
||||
}
|
||||
|
||||
const ICON_DEFAULT = getIcon(btnSelector);
|
||||
const ICON_DEFAULT = getIcon(clipboardSelector);
|
||||
|
||||
function showTooltip(btn) {
|
||||
const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
|
||||
|
|
@ -61,36 +61,41 @@ function resumeIcon(btn) {
|
|||
|
||||
export function initClipboard() {
|
||||
// Initial the clipboard.js object
|
||||
const clipboard = new ClipboardJS(btnSelector, {
|
||||
target(trigger) {
|
||||
let codeBlock = trigger.parentNode.nextElementSibling;
|
||||
return codeBlock.querySelector('code .rouge-code');
|
||||
}
|
||||
});
|
||||
if ($(clipboardSelector).length) {
|
||||
const clipboard = new ClipboardJS(clipboardSelector, {
|
||||
target(trigger) {
|
||||
let codeBlock = trigger.parentNode.nextElementSibling;
|
||||
return codeBlock.querySelector('code .rouge-code');
|
||||
}
|
||||
});
|
||||
|
||||
$(btnSelector).tooltip({
|
||||
trigger: 'hover',
|
||||
placement: 'left'
|
||||
});
|
||||
const clipboardList = document.querySelectorAll(clipboardSelector);
|
||||
[...clipboardList].map(
|
||||
(elem) =>
|
||||
new bootstrap.Tooltip(elem, {
|
||||
placement: 'left'
|
||||
})
|
||||
);
|
||||
|
||||
clipboard.on('success', (e) => {
|
||||
e.clearSelection();
|
||||
clipboard.on('success', (e) => {
|
||||
e.clearSelection();
|
||||
|
||||
const trigger = e.trigger;
|
||||
if (isLocked(trigger)) {
|
||||
return;
|
||||
}
|
||||
const trigger = e.trigger;
|
||||
if (isLocked(trigger)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSuccessIcon(trigger);
|
||||
showTooltip(trigger);
|
||||
lock(trigger);
|
||||
setSuccessIcon(trigger);
|
||||
showTooltip(trigger);
|
||||
lock(trigger);
|
||||
|
||||
setTimeout(() => {
|
||||
hideTooltip(trigger);
|
||||
resumeIcon(trigger);
|
||||
unlock(trigger);
|
||||
}, TIMEOUT);
|
||||
});
|
||||
setTimeout(() => {
|
||||
hideTooltip(trigger);
|
||||
resumeIcon(trigger);
|
||||
unlock(trigger);
|
||||
}, TIMEOUT);
|
||||
});
|
||||
}
|
||||
|
||||
/* --- Post link sharing --- */
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,5 @@ export function convertTitle() {
|
|||
observer.observe(document.querySelector(titleSelector));
|
||||
|
||||
/* Click title will scroll to top */
|
||||
$topbarTitle.on('click', function () {
|
||||
$('body,html').animate({ scrollTop: 0 }, 800);
|
||||
});
|
||||
$topbarTitle.on('click', () => window.scrollTo(0, 0));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,12 +39,13 @@ export function initLocaleDatetime() {
|
|||
$(this).removeAttr(LocaleHelper.attrDateFormat);
|
||||
|
||||
// setup tooltips
|
||||
const tooltip = $(this).attr('data-toggle');
|
||||
const tooltip = $(this).attr('data-bs-toggle');
|
||||
if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
|
||||
return;
|
||||
}
|
||||
|
||||
const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
|
||||
$(this).attr('data-original-title', tooltipText);
|
||||
$(this).attr('data-bs-title', tooltipText);
|
||||
new bootstrap.Tooltip($(this));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,109 +0,0 @@
|
|||
/**
|
||||
Safari doesn't support CSS `scroll-behavior: smooth`,
|
||||
so here is a compatible solution for all browser to smooth scrolling
|
||||
|
||||
See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
|
||||
|
||||
Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
|
||||
*/
|
||||
import ScrollHelper from './utils/scroll-helper';
|
||||
|
||||
export function smoothScroll() {
|
||||
const $topbarTitle = $('#topbar-title');
|
||||
const REM = 16; // in pixels
|
||||
const ATTR_SCROLL_FOCUS = 'scroll-focus';
|
||||
const SCOPE = "a[href*='#']:not([href='#']):not([href='#0'])";
|
||||
|
||||
$(SCOPE).on('click', function (event) {
|
||||
if (
|
||||
this.pathname.replace(/^\//, '') !== location.pathname.replace(/^\//, '')
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (location.hostname !== this.hostname) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hash = decodeURI(this.hash);
|
||||
let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
|
||||
let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
|
||||
let selector = '#' + $.escapeSelector(hash.substring(1));
|
||||
let $target = $(selector);
|
||||
|
||||
let isMobileViews = $topbarTitle.is(':visible');
|
||||
let isPortrait = $(window).width() < $(window).height();
|
||||
|
||||
if (typeof $target === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (history.pushState) {
|
||||
/* add hash to URL */
|
||||
history.pushState(null, null, hash);
|
||||
}
|
||||
|
||||
let curOffset = $(window).scrollTop();
|
||||
let destOffset = ($target.offset().top -= REM / 2);
|
||||
|
||||
if (destOffset < curOffset) {
|
||||
// scroll up
|
||||
ScrollHelper.hideTopbar();
|
||||
ScrollHelper.addScrollUpTask();
|
||||
|
||||
if (isMobileViews && isPortrait) {
|
||||
destOffset -= ScrollHelper.getTopbarHeight();
|
||||
}
|
||||
} else {
|
||||
// scroll down
|
||||
if (isMobileViews && isPortrait) {
|
||||
destOffset -= ScrollHelper.getTopbarHeight();
|
||||
}
|
||||
}
|
||||
|
||||
$('html').animate(
|
||||
{
|
||||
scrollTop: destOffset
|
||||
},
|
||||
500,
|
||||
() => {
|
||||
$target.trigger('focus');
|
||||
|
||||
/* clean up old scroll mark */
|
||||
const $scroll_focus = $(`[${ATTR_SCROLL_FOCUS}=true]`);
|
||||
if ($scroll_focus.length) {
|
||||
$scroll_focus.attr(ATTR_SCROLL_FOCUS, 'false');
|
||||
}
|
||||
|
||||
/* Clean :target links */
|
||||
const $target_links = $(':target');
|
||||
if ($target_links.length) {
|
||||
/* element that visited by the URL with hash */
|
||||
$target_links.attr(ATTR_SCROLL_FOCUS, 'false');
|
||||
}
|
||||
|
||||
/* set scroll mark to footnotes */
|
||||
if (toFootnote || toFootnoteRef) {
|
||||
$target.attr(ATTR_SCROLL_FOCUS, 'true');
|
||||
}
|
||||
|
||||
if ($target.is(':focus')) {
|
||||
/* Checking if the target was focused */
|
||||
return false;
|
||||
} else {
|
||||
$target.attr(
|
||||
'tabindex',
|
||||
'-1'
|
||||
); /* Adding tabindex for elements not focusable */
|
||||
$target.trigger('focus'); /* Set focus again */
|
||||
}
|
||||
|
||||
if (ScrollHelper.hasScrollUpTask()) {
|
||||
ScrollHelper.popScrollUpTask();
|
||||
}
|
||||
}
|
||||
);
|
||||
}); /* click() */
|
||||
}
|
||||
|
|
@ -2,5 +2,11 @@
|
|||
* Initial Bootstrap Tooltip.
|
||||
*/
|
||||
export function loadTooptip() {
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
const tooltipTriggerList = document.querySelectorAll(
|
||||
'[data-bs-toggle="tooltip"]'
|
||||
);
|
||||
|
||||
[...tooltipTriggerList].map(
|
||||
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,4 @@ export { imgLazy } from './components/img-lazyload';
|
|||
export { imgPopup } from './components/img-popup';
|
||||
export { initLocaleDatetime } from './components/locale-datetime';
|
||||
export { initPageviews } from './components/pageviews';
|
||||
export { smoothScroll } from './components/smooth-scroll';
|
||||
export { toc } from './components/toc';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
import { basic, initSidebar, initTopbar } from './modules/layouts';
|
||||
import {
|
||||
imgLazy,
|
||||
imgPopup,
|
||||
initClipboard,
|
||||
smoothScroll
|
||||
} from './modules/plugins';
|
||||
import { imgLazy, imgPopup, initClipboard } from './modules/plugins';
|
||||
|
||||
basic();
|
||||
initSidebar();
|
||||
|
|
@ -12,4 +7,3 @@ initTopbar();
|
|||
imgLazy();
|
||||
imgPopup();
|
||||
initClipboard();
|
||||
smoothScroll();
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import {
|
|||
imgPopup,
|
||||
initLocaleDatetime,
|
||||
initClipboard,
|
||||
smoothScroll,
|
||||
initPageviews,
|
||||
toc
|
||||
} from './modules/plugins';
|
||||
|
|
@ -17,5 +16,4 @@ imgPopup();
|
|||
initLocaleDatetime();
|
||||
initClipboard();
|
||||
toc();
|
||||
smoothScroll(); // must be called after toc is created
|
||||
initPageviews();
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ layout: page
|
|||
<li>
|
||||
{% assign ts = post.date | date: '%s' %}
|
||||
<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
|
||||
<span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
|
||||
<span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
|
||||
{{ post.date | date: df_strftime_m }}
|
||||
</span>
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@ layout: page
|
|||
id="{{ HEAD_PREFIX }}{{ group_index }}"
|
||||
class="card-header d-flex justify-content-between hide-border-bottom"
|
||||
>
|
||||
<span>
|
||||
<span class="ms-2">
|
||||
<i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
|
||||
|
||||
{% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
|
||||
<a href="{{ _category_url | relative_url }}" class="ml-1 mr-2">{{ category_name }}</a>
|
||||
<a href="{{ _category_url | relative_url }}" class="mx-2">{{ category_name }}</a>
|
||||
|
||||
<!-- content count -->
|
||||
{% assign top_posts_size = site.categories[category_name] | size %}
|
||||
|
|
@ -83,7 +83,7 @@ layout: page
|
|||
{% if sub_categories_size > 0 %}
|
||||
<a
|
||||
href="#{{ LIST_PREFIX }}{{ group_index }}"
|
||||
data-toggle="collapse"
|
||||
data-bs-toggle="collapse"
|
||||
aria-expanded="true"
|
||||
aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
|
||||
class="category-trigger hide-border-bottom"
|
||||
|
|
@ -91,7 +91,7 @@ layout: page
|
|||
<i class="fas fa-fw fa-angle-down"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
|
||||
<span data-bs-toggle="collapse" class="category-trigger hide-border-bottom disabled">
|
||||
<i class="fas fa-fw fa-angle-right"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
|
@ -107,7 +107,7 @@ layout: page
|
|||
<i class="far fa-folder fa-fw"></i>
|
||||
|
||||
{% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
|
||||
<a href="{{ _sub_ctg_url | relative_url }}" class="ml-1 mr-2">{{ sub_category }}</a>
|
||||
<a href="{{ _sub_ctg_url | relative_url }}" class="mx-2">{{ sub_category }}</a>
|
||||
|
||||
{% assign posts_size = site.categories[sub_category] | size %}
|
||||
<span class="text-muted small font-weight-light">
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@ layout: page
|
|||
{% include lang.html %}
|
||||
|
||||
<div id="page-category">
|
||||
<h1 class="pl-lg-2">
|
||||
<h1 class="ps-lg-2">
|
||||
<i class="far fa-folder-open fa-fw text-muted"></i>
|
||||
{{ page.title }}
|
||||
<span class="lead text-muted pl-2">{{ page.posts | size }}</span>
|
||||
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
|
||||
</h1>
|
||||
|
||||
<ul class="post-content pl-0">
|
||||
<ul class="post-content ps-0">
|
||||
{% for post in page.posts %}
|
||||
<li class="d-flex justify-content-between pl-md-3 pr-md-3">
|
||||
<li class="d-flex justify-content-between px-md-3">
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
<span class="dash flex-grow-1"></span>
|
||||
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ layout: compress
|
|||
{% include topbar.html lang=lang %}
|
||||
|
||||
<div id="main-wrapper" class="d-flex justify-content-center">
|
||||
<div id="main" class="container pl-xl-4 pr-xl-4">
|
||||
<div id="main" class="container px-xxl-5">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
|
|
@ -52,16 +52,19 @@ layout: compress
|
|||
role="alert"
|
||||
aria-live="assertive"
|
||||
aria-atomic="true"
|
||||
data-animation="true"
|
||||
data-autohide="false"
|
||||
data-bs-animation="true"
|
||||
data-bs-autohide="false"
|
||||
>
|
||||
<div class="toast-header">
|
||||
<button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close ms-auto"
|
||||
data-bs-dismiss="toast"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="toast-body text-center pt-0">
|
||||
<p class="pl-2 pr-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
|
||||
<p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
|
||||
<button type="button" class="btn btn-primary" aria-label="Update">
|
||||
{{ site.data.locales[lang].notification.update }}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -52,11 +52,11 @@ refactor: true
|
|||
{% endif %}
|
||||
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h1 class="card-title">
|
||||
<h1 class="card-title my-2 mt-md-0">
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
|
||||
<div class="card-text post-content">
|
||||
<div class="card-text post-content mt-0 mb-2">
|
||||
<p>
|
||||
{% include no-linenos.html content=post.content %}
|
||||
{{ content | markdownify | strip_html | truncate: 200 | escape }}
|
||||
|
|
@ -64,14 +64,14 @@ refactor: true
|
|||
</div>
|
||||
|
||||
<div class="post-meta flex-grow-1 d-flex align-items-end">
|
||||
<div class="mr-auto">
|
||||
<div class="me-auto">
|
||||
<!-- posted date -->
|
||||
<i class="far fa-calendar fa-fw mr-1"></i>
|
||||
<i class="far fa-calendar fa-fw me-1"></i>
|
||||
{% include datetime.html date=post.date lang=lang %}
|
||||
|
||||
<!-- categories -->
|
||||
{% if post.categories.size > 0 %}
|
||||
<i class="far fa-folder-open fa-fw mr-1"></i>
|
||||
<i class="far fa-folder-open fa-fw me-1"></i>
|
||||
<span class="categories">
|
||||
{% for category in post.categories %}
|
||||
{{ category }}
|
||||
|
|
@ -82,7 +82,7 @@ refactor: true
|
|||
</div>
|
||||
|
||||
{% if post.pin %}
|
||||
<div class="pin ml-1">
|
||||
<div class="pin ms-1">
|
||||
<i class="fas fa-thumbtack fa-fw"></i>
|
||||
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ layout: default
|
|||
|
||||
<div class="row">
|
||||
<!-- core -->
|
||||
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
|
||||
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
|
||||
{% capture padding %}
|
||||
{% unless page.layout == 'home' %}pl-1 pr-1{% endunless %}
|
||||
{% unless page.layout == 'home' %}px-1{% endunless %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="post {{ padding | strip }} pl-md-2 pr-md-2">
|
||||
<div class="post {{ padding | strip }} px-md-2">
|
||||
{% capture _content %}
|
||||
{% if layout.refactor or page.layout == 'page' %}
|
||||
{% include refactor-content.html content=content lang=lang %}
|
||||
|
|
@ -38,7 +38,7 @@ layout: default
|
|||
<!-- #core-wrapper -->
|
||||
|
||||
<!-- panel -->
|
||||
<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
|
||||
<div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
|
||||
<div class="access">
|
||||
{% include update-list.html lang=lang %}
|
||||
{% include trending-tags.html lang=lang %}
|
||||
|
|
@ -54,7 +54,7 @@ layout: default
|
|||
<!-- tail -->
|
||||
{% if layout.tail_includes %}
|
||||
<div class="row">
|
||||
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4 mt-5">
|
||||
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
|
||||
{% for _include in layout.tail_includes %}
|
||||
{% assign _include_path = _include | append: '.html' %}
|
||||
{% include {{ _include_path }} lang=lang %}
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ tail_includes:
|
|||
<!-- categories -->
|
||||
{% if page.categories.size > 0 %}
|
||||
<div class="post-meta mb-3">
|
||||
<i class="far fa-folder-open fa-fw mr-1"></i>
|
||||
<i class="far fa-folder-open fa-fw me-1"></i>
|
||||
{% for category in page.categories %}
|
||||
<a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
|
||||
{%- unless forloop.last -%}, {%- endunless -%}
|
||||
|
|
@ -109,7 +109,7 @@ tail_includes:
|
|||
<!-- tags -->
|
||||
{% if page.tags.size > 0 %}
|
||||
<div class="post-tags">
|
||||
<i class="fa fa-tags fa-fw mr-1"></i>
|
||||
<i class="fa fa-tags fa-fw me-1"></i>
|
||||
{% for tag in page.tags %}
|
||||
<a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
|
||||
class="post-tag no-text-decoration" >
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@ layout: page
|
|||
{% include lang.html %}
|
||||
|
||||
<div id="page-tag">
|
||||
<h1 class="pl-lg-2">
|
||||
<h1 class="ps-lg-2">
|
||||
<i class="fa fa-tag fa-fw text-muted"></i>
|
||||
{{ page.title }}
|
||||
<span class="lead text-muted pl-2">{{ page.posts | size }}</span>
|
||||
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
|
||||
</h1>
|
||||
<ul class="post-content pl-0">
|
||||
<ul class="post-content ps-0">
|
||||
{% for post in page.posts %}
|
||||
<li class="d-flex justify-content-between pl-md-3 pr-md-3">
|
||||
<li class="d-flex justify-content-between px-md-3">
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
<span class="dash flex-grow-1"></span>
|
||||
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,8 @@ layout: page
|
|||
# All the Tags of posts.
|
||||
---
|
||||
|
||||
<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
|
||||
|
||||
{% assign tags = "" | split: "" %}
|
||||
<div id="tags" class="d-flex flex-wrap mx-xl-2">
|
||||
{% assign tags = '' | split: '' %}
|
||||
{% for t in site.tags %}
|
||||
{% assign tags = tags | push: t[0] %}
|
||||
{% endfor %}
|
||||
|
|
@ -15,9 +14,9 @@ layout: page
|
|||
{% for t in sorted_tags %}
|
||||
<div>
|
||||
<a class="tag" href="{{ t | slugify | url_encode | prepend: '/tags/' | append: '/' | relative_url }}">
|
||||
{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span>
|
||||
{{ t -}}
|
||||
<span class="text-muted">{{ site.tags[t].size }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,6 +79,8 @@ h5 {
|
|||
|
||||
a {
|
||||
@extend %link-color;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -200,13 +202,8 @@ footer {
|
|||
a {
|
||||
@extend %text-color;
|
||||
|
||||
&:link {
|
||||
@extend %no-decoration;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
@extend %no-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -657,10 +654,6 @@ i {
|
|||
box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
|
||||
}
|
||||
|
||||
.no-text-decoration {
|
||||
@extend %no-decoration;
|
||||
}
|
||||
|
||||
/* overwrite bootstrap muted */
|
||||
.text-muted {
|
||||
color: var(--text-muted-color) !important;
|
||||
|
|
@ -763,10 +756,6 @@ $btn-mb: 0.5rem;
|
|||
|
||||
a {
|
||||
@extend %sidebar-links;
|
||||
|
||||
&:hover {
|
||||
@extend %no-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
#avatar {
|
||||
|
|
@ -1263,8 +1252,6 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
&.toast {
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
min-width: 20rem;
|
||||
|
|
@ -1615,7 +1602,7 @@ $btn-mb: 0.5rem;
|
|||
|
||||
#search-wrapper {
|
||||
margin-right: calc(
|
||||
#{$main-content-max-width} * 0.25 - #{$search-max-width}
|
||||
#{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1623,6 +1610,8 @@ $btn-mb: 0.5rem;
|
|||
#main,
|
||||
footer > .container {
|
||||
max-width: $main-content-max-width;
|
||||
padding-left: 1.75rem !important;
|
||||
padding-right: 1.75rem !important;
|
||||
}
|
||||
|
||||
#core-wrapper,
|
||||
|
|
|
|||
|
|
@ -122,10 +122,6 @@
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
%no-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ---------- scss mixin --------- */
|
||||
|
||||
@mixin mt-mb($value) {
|
||||
|
|
|
|||
|
|
@ -117,10 +117,6 @@ code {
|
|||
blockquote & {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.highlight > & {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
td.rouge-code {
|
||||
|
|
@ -176,7 +172,7 @@ div {
|
|||
align-items: center;
|
||||
height: $code-header-height;
|
||||
margin-left: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
/* the label block */
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -115,10 +115,6 @@
|
|||
}
|
||||
|
||||
.categories {
|
||||
&.card {
|
||||
border-color: var(--main-border-color);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: var(--card-header-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@
|
|||
}
|
||||
|
||||
/* Categories */
|
||||
--categories-border: rgba(0, 0, 0, 0.125);
|
||||
--categories-hover-bg: var(--btn-border-color);
|
||||
--categories-icon-hover-color: darkslategray;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
.categories {
|
||||
margin-bottom: 2rem;
|
||||
border-color: var(--categories-border);
|
||||
|
||||
&.card,
|
||||
.list-group {
|
||||
|
|
@ -15,8 +16,16 @@
|
|||
}
|
||||
|
||||
.card-header {
|
||||
padding-right: 12px;
|
||||
border-radius: $base-radius $base-radius 0 0;
|
||||
$radius: calc($base-radius - 1px);
|
||||
|
||||
padding: 0.75rem;
|
||||
border-radius: $radius;
|
||||
border-bottom: 0;
|
||||
|
||||
&.hide-border-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
@ -34,6 +43,10 @@
|
|||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
} /* .categories */
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
|
||||
.card-title {
|
||||
@extend %text-clip;
|
||||
@include mt-mb(0.5rem);
|
||||
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
|
@ -53,9 +52,6 @@
|
|||
}
|
||||
|
||||
.card-text.post-content {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@extend %muted;
|
||||
|
||||
p {
|
||||
|
|
@ -160,11 +156,6 @@
|
|||
width: 60%;
|
||||
padding: 1.75rem 1.75rem 1.25rem 1.75rem;
|
||||
|
||||
.card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
display: inherit !important;
|
||||
}
|
||||
|
|
@ -183,11 +174,6 @@
|
|||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 830px) {
|
||||
#post-list .card {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: space-evenly;
|
||||
|
||||
|
|
|
|||
|
|
@ -347,13 +347,10 @@ h1 + .post-meta {
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@extend %no-decoration;
|
||||
}
|
||||
|
||||
.card {
|
||||
h3 {
|
||||
@extend %text-color;
|
||||
@extend %text-clip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue