Joseph Hale's Technical Blog
perf: refactor using semantic HTML (#1207)
Fixes #1196
authored by
Cotes Chung
and committed by
GitHub
(Sep 8, 2023, 10:48 PM +0800)
505e314a
41b8f9f5
+412
-399
+2
-1
_includes/comments/disqus.html
+2
-1
_includes/comments/disqus.html
+5
-4
_includes/datetime.html
+5
-4
_includes/datetime.html
···
3
3
See: ${JS_ROOT}/utils/locale-dateime.js
4
4
-->
5
5
6
-
{% assign wrap_elem = include.wrap | default: 'em' %}
7
6
{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
8
7
{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
9
8
10
-
<{{ wrap_elem }}
11
-
class="{% if include.class %}{{ include.class }}{% endif %}"
9
+
<time
10
+
{% if include.class %}
11
+
class="{{ include.class }}"
12
+
{% endif %}
12
13
data-ts="{{ include.date | date: '%s' }}"
13
14
data-df="{{ df_dayjs }}"
14
15
{% if include.tooltip %}
···
16
17
{% endif %}
17
18
>
18
19
{{ include.date | date: df_strftime }}
19
-
</{{ wrap_elem }}>
20
+
</time>
+24
_includes/notification.html
+24
_includes/notification.html
···
1
+
<aside
2
+
id="notification"
3
+
class="toast"
4
+
role="alert"
5
+
aria-live="assertive"
6
+
aria-atomic="true"
7
+
data-bs-animation="true"
8
+
data-bs-autohide="false"
9
+
>
10
+
<div class="toast-header">
11
+
<button
12
+
type="button"
13
+
class="btn-close ms-auto"
14
+
data-bs-dismiss="toast"
15
+
aria-label="Close"
16
+
></button>
17
+
</div>
18
+
<div class="toast-body text-center pt-0">
19
+
<p class="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
20
+
<button type="button" class="btn btn-primary" aria-label="Update">
21
+
{{ site.data.locales[include.lang].notification.update }}
22
+
</button>
23
+
</div>
24
+
</aside>
+10
-8
_includes/search-loader.html
+10
-8
_includes/search-loader.html
···
4
4
-->
5
5
6
6
{% capture result_elem %}
7
-
<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
8
-
<a href="{url}">{title}</a>
9
-
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
10
-
{categories}
11
-
{tags}
12
-
</div>
13
-
<p>{snippet}</p>
14
-
</div>
7
+
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
8
+
<header>
9
+
<h2><a href="{url}">{title}</a></h2>
10
+
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
11
+
{categories}
12
+
{tags}
13
+
</div>
14
+
</header>
15
+
<p>{snippet}</p>
16
+
</article>
15
17
{% endcapture %}
16
18
17
19
{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
+1
-1
_includes/search-results.html
+1
-1
_includes/search-results.html
+3
-3
_includes/toc.html
+3
-3
_includes/toc.html
···
6
6
{% endif %}
7
7
8
8
{% if enable_toc %}
9
-
<div id="toc-wrapper" class="ps-0 pe-4 mb-5">
10
-
<div class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</div>
9
+
<section id="toc-wrapper" class="ps-0 pe-4 mb-5">
10
+
<h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
11
11
<nav id="toc"></nav>
12
-
</div>
12
+
</section>
13
13
{% endif %}
+17
-10
_includes/topbar.html
+17
-10
_includes/topbar.html
···
1
1
<!-- The Top Bar -->
2
2
3
-
<div id="topbar-wrapper">
3
+
<header id="topbar-wrapper" aria-label="Top Bar">
4
4
<div
5
5
id="topbar"
6
-
class="container d-flex align-items-center justify-content-between h-100"
6
+
class="d-flex align-items-center justify-content-between px-lg-3 h-100"
7
7
>
8
-
<span id="breadcrumb">
8
+
<nav id="breadcrumb" aria-label="Breadcrumb">
9
9
{% assign paths = page.url | split: '/' %}
10
10
11
11
{% if paths.size == 0 or page.layout == 'home' %}
···
37
37
{% endif %}
38
38
{% endfor %}
39
39
{% endif %}
40
-
</span>
40
+
</nav>
41
41
<!-- endof #breadcrumb -->
42
42
43
-
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
43
+
<button type="button" id="sidebar-trigger" class="btn btn-link">
44
+
<i class="fas fa-bars fa-fw"></i>
45
+
</button>
44
46
45
47
<div id="topbar-title">
46
48
{% if page.layout == 'home' %}
···
53
55
{% endif %}
54
56
</div>
55
57
56
-
<i id="search-trigger" class="fas fa-search fa-fw"></i>
57
-
<span id="search-wrapper" class="align-items-center">
58
+
<button type="button" id="search-trigger" class="btn btn-link">
59
+
<i class="fas fa-search fa-fw"></i>
60
+
</button>
61
+
62
+
<search class="align-items-center ms-3 ms-lg-0">
58
63
<i class="fas fa-search fa-fw"></i>
59
64
<input
60
65
class="form-control"
···
64
69
autocomplete="off"
65
70
placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
66
71
>
67
-
</span>
68
-
<span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
72
+
</search>
73
+
<button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
74
+
{{- site.data.locales[include.lang].search.cancel -}}
75
+
</button>
69
76
</div>
70
-
</div>
77
+
</header>
+4
-4
_includes/update-list.html
+4
-4
_includes/update-list.html
···
22
22
{% endfor %}
23
23
24
24
{% if update_list.size > 0 %}
25
-
<div id="access-lastmod" class="post">
26
-
<div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
27
-
<ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2">
25
+
<section id="access-lastmod">
26
+
<h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
27
+
<ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
28
28
{% for item in update_list %}
29
29
{% assign index = item | split: '::' | last | plus: 0 %}
30
30
{% assign post = site.posts[index] %}
···
34
34
</li>
35
35
{% endfor %}
36
36
</ul>
37
-
</div>
37
+
</section>
38
38
<!-- #access-lastmod -->
39
39
{% endif %}
+1
-1
_javascript/modules/components/img-lazyload.js
+1
-1
_javascript/modules/components/img-lazyload.js
+8
-8
_javascript/modules/components/search-display.js
+8
-8
_javascript/modules/components/search-display.js
···
4
4
const $btnSbTrigger = $('#sidebar-trigger');
5
5
const $btnSearchTrigger = $('#search-trigger');
6
6
const $btnCancel = $('#search-cancel');
7
-
const $content = $('#main>.row');
7
+
const $content = $('#main-wrapper>.container>.row');
8
8
const $topbarTitle = $('#topbar-title');
9
-
const $searchWrapper = $('#search-wrapper');
9
+
const $search = $('search');
10
10
const $resultWrapper = $('#search-result-wrapper');
11
11
const $results = $('#search-results');
12
12
const $input = $('#search-input');
···
39
39
$btnSbTrigger.addClass(C_UNLOADED);
40
40
$topbarTitle.addClass(C_UNLOADED);
41
41
$btnSearchTrigger.addClass(C_UNLOADED);
42
-
$searchWrapper.addClass(C_FLEX);
42
+
$search.addClass(C_FLEX);
43
43
$btnCancel.addClass(C_LOADED);
44
44
}
45
45
46
46
static off() {
47
47
$btnCancel.removeClass(C_LOADED);
48
-
$searchWrapper.removeClass(C_FLEX);
48
+
$search.removeClass(C_FLEX);
49
49
$btnSbTrigger.removeClass(C_UNLOADED);
50
50
$topbarTitle.removeClass(C_UNLOADED);
51
51
$btnSearchTrigger.removeClass(C_UNLOADED);
···
55
55
class ResultSwitch {
56
56
static on() {
57
57
if (!ScrollBlocker.resultVisible) {
58
-
// the block method must be called before $(#main) unloaded.
58
+
// the block method must be called before $(#main-wrapper>.container) unloaded.
59
59
ScrollBlocker.on();
60
60
$resultWrapper.removeClass(C_UNLOADED);
61
61
$content.addClass(C_UNLOADED);
···
72
72
$resultWrapper.addClass(C_UNLOADED);
73
73
$content.removeClass(C_UNLOADED);
74
74
75
-
// now the release method must be called after $(#main) display
75
+
// now the release method must be called after $(#main-wrapper>.container) display
76
76
ScrollBlocker.off();
77
77
78
78
$input.val('');
···
98
98
});
99
99
100
100
$input.on('focus', function () {
101
-
$searchWrapper.addClass(C_FOCUS);
101
+
$search.addClass(C_FOCUS);
102
102
});
103
103
104
104
$input.on('focusout', function () {
105
-
$searchWrapper.removeClass(C_FOCUS);
105
+
$search.removeClass(C_FOCUS);
106
106
});
107
107
108
108
$input.on('input', () => {
+2
-2
_javascript/modules/components/toc.js
+2
-2
_javascript/modules/components/toc.js
···
1
1
export function toc() {
2
-
if (document.querySelector('#core-wrapper h2')) {
2
+
if (document.querySelector('main h2')) {
3
3
// see: https://github.com/tscanlin/tocbot#usage
4
4
tocbot.init({
5
5
tocSelector: '#toc',
6
-
contentSelector: '.post-content',
6
+
contentSelector: '.content',
7
7
ignoreSelector: '[data-toc-skip]',
8
8
headingSelector: 'h2, h3, h4',
9
9
orderedList: false,
+18
-19
_layouts/archives.html
+18
-19
_layouts/archives.html
···
9
9
{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
10
10
11
11
<div id="archives" class="pl-xl-3">
12
+
{% for post in site.posts %}
13
+
{% assign cur_year = post.date | date: '%Y' %}
12
14
13
-
{% for post in site.posts %}
14
-
{% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
15
+
{% if cur_year != last_year %}
16
+
{% unless forloop.first %}</ul>{% endunless %}
15
17
16
-
{% if cur_year != last_year %}
17
-
{% unless forloop.first %}</ul>{% endunless %}
18
-
<div class="year lead">{{ cur_year }}</div>
19
-
<ul class="list-unstyled">
20
-
{% assign last_year = cur_year %}
21
-
{% endif %}
18
+
<time class="year lead d-block">{{ cur_year }}</time>
19
+
{{ '<ul class="list-unstyled">' }}
22
20
23
-
<li>
24
-
{% assign ts = post.date | date: '%s' %}
25
-
<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
26
-
<span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
27
-
{{ post.date | date: df_strftime_m }}
28
-
</span>
29
-
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
30
-
</li>
21
+
{% assign last_year = cur_year %}
22
+
{% endif %}
31
23
32
-
{% if forloop.last %}</ul>{% endif %}
33
-
34
-
{% endfor %}
24
+
<li>
25
+
{% assign ts = post.date | date: '%s' %}
26
+
<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
27
+
<span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
28
+
{{ post.date | date: df_strftime_m }}
29
+
</span>
30
+
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
31
+
</li>
35
32
33
+
{% if forloop.last %}</ul>{% endif %}
34
+
{% endfor %}
36
35
</div>
+2
-2
_layouts/category.html
+2
-2
_layouts/category.html
···
12
12
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
13
13
</h1>
14
14
15
-
<ul class="post-content ps-0">
15
+
<ul class="content ps-0">
16
16
{% for post in page.posts %}
17
17
<li class="d-flex justify-content-between px-md-3">
18
18
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
19
19
<span class="dash flex-grow-1"></span>
20
-
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
20
+
{% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
21
21
</li>
22
22
{% endfor %}
23
23
</ul>
+51
-30
_layouts/default.html
+51
-30
_layouts/default.html
···
15
15
{% endif %}
16
16
{% endcapture %}
17
17
18
+
{% if layout.tail_includes %}
19
+
{% assign has_tail = true %}
20
+
{% endif %}
21
+
18
22
<!-- `site.alt_lang` can specify a language different from the UI -->
19
23
<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
20
24
{% include head.html %}
···
23
27
{% include sidebar.html lang=lang %}
24
28
25
29
<div id="main-wrapper" class="d-flex justify-content-center">
26
-
<div id="main" class="container px-xxl-5">
30
+
<div class="container px-xxl-5">
27
31
{% include topbar.html lang=lang %}
28
-
{{ content }}
32
+
33
+
<div class="row">
34
+
<main
35
+
aria-label="Main Content"
36
+
class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
37
+
>
38
+
{{ content }}
39
+
</main>
40
+
41
+
<!-- panel -->
42
+
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
43
+
<div class="access">
44
+
{% include_cached update-list.html lang=lang %}
45
+
{% include_cached trending-tags.html lang=lang %}
46
+
</div>
47
+
48
+
{% for _include in layout.panel_includes %}
49
+
{% assign _include_path = _include | append: '.html' %}
50
+
{% include {{ _include_path }} lang=lang %}
51
+
{% endfor %}
52
+
</aside>
53
+
</div>
54
+
55
+
<div class="row">
56
+
<!-- tail -->
57
+
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
58
+
{% if has_tail %}
59
+
{% for _include in layout.tail_includes %}
60
+
{% assign _include_path = _include | append: '.html' %}
61
+
{% include {{ _include_path }} lang=lang %}
62
+
{% endfor %}
63
+
{% endif %}
64
+
65
+
{% include_cached footer.html lang=lang %}
66
+
</div>
67
+
</div>
68
+
29
69
{% include_cached search-results.html lang=lang %}
30
70
</div>
71
+
72
+
<aside aria-label="Scroll to Top">
73
+
<button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
74
+
<i class="fas fa-angle-up"></i>
75
+
</button>
76
+
</aside>
31
77
</div>
32
78
33
79
<div id="mask"></div>
34
80
35
-
<button id="back-to-top" aria-label="back-to-top" class="btn btn-lg btn-box-shadow">
36
-
<i class="fas fa-angle-up"></i>
37
-
</button>
38
-
39
81
{% if site.pwa.enabled %}
40
-
<div
41
-
id="notification"
42
-
class="toast"
43
-
role="alert"
44
-
aria-live="assertive"
45
-
aria-atomic="true"
46
-
data-bs-animation="true"
47
-
data-bs-autohide="false"
48
-
>
49
-
<div class="toast-header">
50
-
<button
51
-
type="button"
52
-
class="btn-close ms-auto"
53
-
data-bs-dismiss="toast"
54
-
aria-label="Close"
55
-
></button>
56
-
</div>
57
-
<div class="toast-body text-center pt-0">
58
-
<p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
59
-
<button type="button" class="btn btn-primary" aria-label="Update">
60
-
{{ site.data.locales[lang].notification.update }}
61
-
</button>
62
-
</div>
63
-
</div>
82
+
{% include_cached notification.html lang=lang %}
64
83
{% endif %}
84
+
85
+
<!-- JavaScripts -->
65
86
66
87
{% include js-selector.html %}
67
88
+12
-11
_layouts/home.html
+12
-11
_layouts/home.html
···
1
1
---
2
-
layout: page
3
-
refactor: true
2
+
layout: default
4
3
---
5
4
6
5
{% include lang.html %}
···
40
39
{% endfor %}
41
40
{% endif %}
42
41
43
-
<div id="post-list" class="pe-xl-2">
42
+
{% capture content %}
44
43
{% for post in posts %}
45
-
<a href="{{ post.url | relative_url }}" class="card-wrapper">
46
-
<div class="card post-preview flex-md-row-reverse">
44
+
<article class="card-wrapper">
45
+
<a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
47
46
{% if post.image %}
48
47
{% if post.image.lqip %}
49
48
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
···
60
59
{% endif %}
61
60
62
61
<div class="card-body d-flex flex-column">
63
-
<h1 class="card-title my-2 mt-md-0">
64
-
{{ post.title }}
65
-
</h1>
62
+
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
66
63
67
-
<div class="card-text post-content mt-0 mb-2">
64
+
<div class="card-text content mt-0 mb-2">
68
65
<p>
69
66
{% include no-linenos.html content=post.content %}
70
67
{{ content | markdownify | strip_html | truncate: 200 | escape }}
···
99
96
<!-- .post-meta -->
100
97
</div>
101
98
<!-- .card-body -->
102
-
</div>
103
-
</a>
99
+
</a>
100
+
</article>
104
101
{% endfor %}
102
+
{% endcapture %}
103
+
104
+
<div id="post-list" class="flex-grow-1 pe-xl-2">
105
+
{% include refactor-content.html content=content lang=lang %}
105
106
</div>
106
107
<!-- #post-list -->
107
108
+20
-64
_layouts/page.html
+20
-64
_layouts/page.html
···
2
2
layout: default
3
3
---
4
4
5
-
{% include lang.html %}
6
-
{% include origin-type.html %}
7
-
8
-
{% if layout.tail_includes %}
9
-
{% assign has_tail = true %}
10
-
{% endif %}
11
-
12
-
<div class="row">
13
-
<!-- core -->
14
-
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
15
-
{% capture padding %}
16
-
{% unless page.layout == 'home' %}px-1{% endunless %}
17
-
{% endcapture %}
18
-
19
-
<div class="post {{ padding | strip }} {% unless has_tail %} flex-grow-1 mb-5{% endunless %}">
20
-
{% capture _content %}
21
-
{% if layout.refactor or page.layout == 'page' %}
22
-
{% include refactor-content.html content=content lang=lang %}
23
-
{% else %}
24
-
{{ content }}
25
-
{% endif %}
26
-
{% endcapture %}
27
-
28
-
{% if page.layout == 'page' or page.collection == 'tabs' %}
29
-
{% assign tab_key = page.title | downcase %}
30
-
{% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
31
-
<h1 class="dynamic-title">
32
-
{{ title }}
33
-
</h1>
34
-
<div class="post-content">
35
-
{{ _content }}
36
-
</div>
37
-
{% else %}
38
-
{{ _content }}
39
-
{% endif %}
40
-
</div>
41
-
</div>
42
-
<!-- #core-wrapper -->
5
+
{% capture _content %}
6
+
{% if layout.refactor or page.layout == 'page' %}
7
+
{% include refactor-content.html content=content lang=lang %}
8
+
{% else %}
9
+
{{ content }}
10
+
{% endif %}
11
+
{% endcapture %}
43
12
44
-
<!-- panel -->
45
-
<div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
46
-
<div class="access">
47
-
{% include_cached update-list.html lang=lang %}
48
-
{% include_cached trending-tags.html lang=lang %}
13
+
<article class="px-1">
14
+
{% if page.layout == 'page' or page.collection == 'tabs' %}
15
+
{% assign tab_key = page.title | downcase %}
16
+
{% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
17
+
<h1 class="dynamic-title">
18
+
{{ title }}
19
+
</h1>
20
+
<div class="content">
21
+
{{ _content }}
49
22
</div>
50
-
51
-
{% for _include in layout.panel_includes %}
52
-
{% assign _include_path = _include | append: '.html' %}
53
-
{% include {{ _include_path }} lang=lang %}
54
-
{% endfor %}
55
-
</div>
56
-
</div>
57
-
58
-
<div class="row">
59
-
<!-- tail -->
60
-
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4{% if has_tail%} mt-5{% endif %}">
61
-
{% if has_tail %}
62
-
{% for _include in layout.tail_includes %}
63
-
{% assign _include_path = _include | append: '.html' %}
64
-
{% include {{ _include_path }} lang=lang %}
65
-
{% endfor %}
66
-
{% endif %}
67
-
68
-
{% include_cached footer.html lang=lang %}
69
-
</div>
70
-
</div>
23
+
{% else %}
24
+
{{ _content }}
25
+
{% endif %}
26
+
</article>
+70
-68
_layouts/post.html
+70
-68
_layouts/post.html
···
11
11
12
12
{% include lang.html %}
13
13
14
-
<h1 data-toc-skip>{{ page.title }}</h1>
14
+
<header>
15
+
<h1 data-toc-skip>{{ page.title }}</h1>
15
16
16
-
<div class="post-meta text-muted">
17
+
<div class="post-meta text-muted">
17
18
<!-- published date -->
18
19
<span>
19
20
{{ site.data.locales[lang].post.posted }}
···
22
23
23
24
<!-- lastmod date -->
24
25
{% if page.last_modified_at and page.last_modified_at != page.date %}
25
-
<span>
26
-
{{ site.data.locales[lang].post.updated }}
27
-
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
28
-
</span>
26
+
<span>
27
+
{{ site.data.locales[lang].post.updated }}
28
+
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
29
+
</span>
29
30
{% endif %}
30
31
31
-
{% if page.image %}
32
-
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
33
-
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
34
-
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
32
+
{% if page.image %}
33
+
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
34
+
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
35
+
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
35
36
36
-
{% capture lqip %}
37
+
{% capture lqip %}
37
38
{% if page.image.lqip %}
38
39
lqip="{{ page.image.lqip }}"
39
40
{% endif %}
40
41
{% endcapture %}
41
42
42
-
<div class="mt-3 mb-3">
43
-
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
44
-
{%- if page.image.alt -%}
45
-
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
46
-
{%- endif -%}
47
-
</div>
48
-
{% endif %}
43
+
<div class="mt-3 mb-3">
44
+
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
45
+
{%- if page.image.alt -%}
46
+
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
47
+
{%- endif -%}
48
+
</div>
49
+
{% endif %}
49
50
50
-
<div class="d-flex justify-content-between">
51
-
<!-- author(s) -->
52
-
<span>
53
-
{% if page.author %}
54
-
{% assign authors = page.author %}
55
-
{% elsif page.authors %}
56
-
{% assign authors = page.authors %}
57
-
{% endif %}
51
+
<div class="d-flex justify-content-between">
52
+
<!-- author(s) -->
53
+
<span>
54
+
{% if page.author %}
55
+
{% assign authors = page.author %}
56
+
{% elsif page.authors %}
57
+
{% assign authors = page.authors %}
58
+
{% endif %}
58
59
59
-
{{ site.data.locales[lang].post.written_by }}
60
+
{{ site.data.locales[lang].post.written_by }}
60
61
61
-
<em>
62
-
{% if authors %}
63
-
{% for author in authors %}
64
-
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
65
-
{% unless forloop.last %}</em>, <em>{% endunless %}
66
-
{% endfor %}
67
-
{% else %}
68
-
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
69
-
{% endif %}
70
-
</em>
71
-
</span>
62
+
<em>
63
+
{% if authors %}
64
+
{% for author in authors %}
65
+
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
66
+
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
67
+
{% endfor %}
68
+
{% else %}
69
+
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
70
+
{% endif %}
71
+
</em>
72
+
</span>
72
73
73
-
<div>
74
74
<!-- read time -->
75
75
{% include read-time.html content=content prompt=true lang=lang %}
76
76
</div>
77
+
<!-- .d-flex -->
78
+
</div>
79
+
<!-- .post-meta -->
80
+
</header>
77
81
78
-
</div> <!-- .d-flex -->
79
-
80
-
</div> <!-- .post-meta -->
81
-
82
-
<div class="post-content">
82
+
<div class="content">
83
83
{{ content }}
84
84
</div>
85
85
86
86
<div class="post-tail-wrapper text-muted">
87
-
88
87
<!-- categories -->
89
88
{% if page.categories.size > 0 %}
90
-
<div class="post-meta mb-3">
91
-
<i class="far fa-folder-open fa-fw me-1"></i>
92
-
{% for category in page.categories %}
93
-
<a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
94
-
{%- unless forloop.last -%}, {%- endunless -%}
95
-
{% endfor %}
96
-
</div>
89
+
<div class="post-meta mb-3">
90
+
<i class="far fa-folder-open fa-fw me-1"></i>
91
+
{% for category in page.categories %}
92
+
<a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
93
+
{%- unless forloop.last -%},{%- endunless -%}
94
+
{% endfor %}
95
+
</div>
97
96
{% endif %}
98
97
99
98
<!-- tags -->
100
99
{% if page.tags.size > 0 %}
101
-
<div class="post-tags">
102
-
<i class="fa fa-tags fa-fw me-1"></i>
100
+
<div class="post-tags">
101
+
<i class="fa fa-tags fa-fw me-1"></i>
103
102
{% for tag in page.tags %}
104
-
<a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
105
-
class="post-tag no-text-decoration" >
106
-
{{- tag -}}
107
-
</a>
103
+
<a
104
+
href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
105
+
class="post-tag no-text-decoration"
106
+
>
107
+
{{- tag -}}
108
+
</a>
108
109
{% endfor %}
109
-
</div>
110
+
</div>
110
111
{% endif %}
111
112
112
-
<div class="post-tail-bottom
113
-
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
113
+
<div
114
+
class="
115
+
post-tail-bottom
116
+
d-flex justify-content-between align-items-center mt-5 pb-2
117
+
"
118
+
>
114
119
<div class="license-wrapper">
115
-
116
120
{% if site.data.locales[lang].copyright.license.template %}
117
-
118
121
{% capture _replacement %}
119
122
<a href="{{ site.data.locales[lang].copyright.license.link }}">
120
123
{{ site.data.locales[lang].copyright.license.name }}
···
122
125
{% endcapture %}
123
126
124
127
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
125
-
126
128
{% endif %}
127
129
</div>
128
130
129
131
{% include post-sharing.html lang=lang %}
130
-
131
-
</div><!-- .post-tail-bottom -->
132
-
133
-
</div><!-- div.post-tail-wrapper -->
132
+
</div>
133
+
<!-- .post-tail-bottom -->
134
+
</div>
135
+
<!-- div.post-tail-wrapper -->
+2
-2
_layouts/tag.html
+2
-2
_layouts/tag.html
···
11
11
{{ page.title }}
12
12
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
13
13
</h1>
14
-
<ul class="post-content ps-0">
14
+
<ul class="content ps-0">
15
15
{% for post in page.posts %}
16
16
<li class="d-flex justify-content-between px-md-3">
17
17
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
18
18
<span class="dash flex-grow-1"></span>
19
-
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}
19
+
{% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
20
20
</li>
21
21
{% endfor %}
22
22
</ul>
+50
-48
_sass/addon/commons.scss
+50
-48
_sass/addon/commons.scss
···
216
216
position: sticky;
217
217
}
218
218
219
-
> div {
219
+
> section {
220
220
padding-left: 1rem;
221
221
border-left: 1px solid var(--main-border-color);
222
222
···
225
225
}
226
226
}
227
227
228
-
.post-content {
228
+
.content {
229
229
font-size: 0.9rem;
230
230
}
231
231
}
···
233
233
#panel-wrapper {
234
234
/* the headings */
235
235
.panel-heading {
236
+
font-family: inherit;
237
+
line-height: inherit;
238
+
236
239
@include label(inherit);
237
240
}
238
241
···
367
370
}
368
371
}
369
372
370
-
.post {
373
+
main {
374
+
line-height: 1.75;
375
+
min-height: calc(100vh - $topbar-height - $footer-height);
376
+
371
377
h1 {
372
378
margin-top: 2rem;
373
379
margin-bottom: 1.5rem;
···
381
387
}
382
388
}
383
389
}
390
+
391
+
.categories,
392
+
#tags,
393
+
#archives {
394
+
a:not(:hover) {
395
+
@extend %no-bottom-border;
396
+
}
397
+
}
384
398
}
385
399
386
400
.post-meta {
···
397
411
}
398
412
}
399
413
400
-
.post-content {
414
+
.content {
401
415
font-size: 1.08rem;
402
416
margin-top: 2rem;
403
417
overflow-wrap: break-word;
···
479
493
::marker {
480
494
color: var(--text-muted-color);
481
495
}
482
-
} /* .post-content */
496
+
} /* .content */
483
497
484
498
.tag:hover {
485
499
@extend %tag-hover;
···
738
752
}
739
753
740
754
.site-title {
755
+
font-family: inherit;
741
756
font-weight: 900;
742
757
font-size: 1.75rem;
743
758
line-height: 1.2;
···
894
909
width: 100%;
895
910
overflow: auto;
896
911
897
-
.post-content {
912
+
.content {
898
913
margin-top: 2rem;
899
914
}
900
915
}
···
907
922
}
908
923
909
924
#topbar {
910
-
/* icons */
911
-
i {
925
+
button i {
912
926
color: #999999;
913
927
}
914
928
···
937
951
display: none;
938
952
}
939
953
940
-
#search-wrapper {
954
+
search {
941
955
display: flex;
942
956
width: 100%;
943
957
border-radius: 1rem;
944
-
border: 1px solid var(--search-wrapper-border-color);
958
+
border: 1px solid var(--search-border-color);
945
959
background: var(--main-bg);
946
960
padding: 0 0.5rem;
947
961
···
955
969
/* 'Cancel' link */
956
970
#search-cancel {
957
971
color: var(--link-color);
958
-
margin-left: 0.75rem;
959
972
display: none;
960
973
white-space: nowrap;
961
974
···
1035
1048
line-height: 2.5rem;
1036
1049
}
1037
1050
1038
-
> div {
1051
+
> article {
1039
1052
width: 100%;
1040
1053
1041
1054
&:not(:last-child) {
···
1073
1086
white-space: nowrap;
1074
1087
}
1075
1088
1076
-
#core-wrapper {
1077
-
line-height: 1.75;
1078
-
min-height: calc(100vh - $topbar-height - $footer-height);
1079
-
1080
-
.categories,
1081
-
#tags,
1082
-
#archives {
1083
-
a:not(:hover) {
1084
-
@extend %no-bottom-border;
1085
-
}
1086
-
}
1087
-
}
1088
-
1089
1089
#mask {
1090
1090
display: none;
1091
1091
position: fixed;
···
1108
1108
}
1109
1109
1110
1110
#topbar-wrapper.row,
1111
-
#main > .row,
1111
+
#main-wrapper > .container > .row,
1112
1112
#search-result-wrapper > .row {
1113
1113
@include ml-mr(0);
1114
1114
}
···
1204
1204
*/
1205
1205
1206
1206
@media all and (max-width: 576px) {
1207
-
#core-wrapper {
1208
-
min-height: calc(100vh - $topbar-height - $footer-height-large);
1209
-
1210
-
.post-content {
1207
+
main {
1208
+
.content {
1211
1209
> blockquote[class^='prompt-'] {
1212
1210
@include ml-mr(-1rem);
1213
1211
···
1232
1230
@extend %full-width;
1233
1231
}
1234
1232
1235
-
#main {
1233
+
#main-wrapper > .container {
1236
1234
@extend %full-width;
1237
1235
@include pl-pr(0);
1238
1236
}
···
1250
1248
}
1251
1249
}
1252
1250
1251
+
main {
1252
+
min-height: calc(100vh - $topbar-height - $footer-height-large);
1253
+
}
1254
+
1253
1255
footer {
1254
1256
@include slide;
1255
1257
···
1283
1285
}
1284
1286
1285
1287
#topbar,
1286
-
#main {
1288
+
#main-wrapper > .container {
1287
1289
max-width: 100%;
1288
1290
}
1289
1291
···
1292
1294
}
1293
1295
1294
1296
#breadcrumb,
1295
-
#search-wrapper {
1297
+
search {
1296
1298
display: none;
1297
1299
}
1298
1300
···
1302
1304
left: 0;
1303
1305
}
1304
1306
1305
-
#core-wrapper,
1307
+
main,
1306
1308
#panel-wrapper {
1307
1309
margin-top: 0;
1308
1310
}
···
1313
1315
display: block;
1314
1316
}
1315
1317
1316
-
#search-result-wrapper .post-content {
1318
+
#search-result-wrapper .content {
1317
1319
letter-spacing: 0;
1318
1320
}
1319
1321
···
1324
1326
h1.dynamic-title {
1325
1327
display: none;
1326
1328
1327
-
~ .post-content {
1329
+
~ .content {
1328
1330
margin-top: 2.5rem;
1329
1331
}
1330
1332
}
···
1351
1353
display: none;
1352
1354
}
1353
1355
1354
-
#search-wrapper {
1356
+
search {
1355
1357
max-width: $search-max-width;
1356
1358
}
1357
1359
···
1360
1362
justify-content: start !important;
1361
1363
}
1362
1364
1363
-
.post {
1365
+
main {
1364
1366
h1 {
1365
1367
margin-top: 3rem;
1366
1368
}
1367
1369
}
1368
1370
1369
-
div.post-content .table-wrapper > table {
1371
+
div.content .table-wrapper > table {
1370
1372
min-width: 70%;
1371
1373
}
1372
1374
···
1383
1385
1384
1386
/* Pad horizontal */
1385
1387
@media all and (min-width: 992px) and (max-width: 1199px) {
1386
-
#main .col-lg-11 {
1388
+
#main-wrapper > .container .col-lg-11 {
1387
1389
flex: 0 0 96%;
1388
1390
max-width: 96%;
1389
1391
}
···
1410
1412
display: none;
1411
1413
}
1412
1414
1413
-
#main > div.row {
1415
+
#main-wrapper > .container > div.row {
1414
1416
justify-content: center !important;
1415
1417
}
1416
1418
}
···
1418
1420
/* --- desktop mode, both sidebar and panel are visible --- */
1419
1421
1420
1422
@media all and (min-width: 1200px) {
1421
-
#search-wrapper {
1423
+
search {
1422
1424
margin-right: 4rem;
1423
1425
}
1424
1426
···
1426
1428
transition: all 0.3s ease-in-out;
1427
1429
}
1428
1430
1429
-
#search-results > div {
1430
-
width: 46%;
1431
+
#search-results > article {
1432
+
width: 45%;
1431
1433
1432
1434
&:nth-child(odd) {
1433
1435
margin-right: 1.5rem;
···
1443
1445
}
1444
1446
}
1445
1447
1446
-
.post-content {
1448
+
.content {
1447
1449
font-size: 1.03rem;
1448
1450
}
1449
1451
}
···
1465
1467
left: $sidebar-width-large;
1466
1468
}
1467
1469
1468
-
#search-wrapper {
1470
+
search {
1469
1471
margin-right: calc(
1470
1472
#{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
1471
1473
);
1472
1474
}
1473
1475
1474
-
#main {
1476
+
#main-wrapper > .container {
1475
1477
max-width: $main-content-max-width;
1476
1478
padding-left: 1.75rem !important;
1477
1479
padding-right: 1.75rem !important;
1478
1480
}
1479
1481
1480
-
#core-wrapper,
1482
+
main.col-12,
1481
1483
#tail-wrapper {
1482
1484
padding-right: 4.5rem !important;
1483
1485
}
+1
-1
_sass/addon/module.scss
+1
-1
_sass/addon/module.scss
+2
-2
_sass/addon/syntax.scss
+2
-2
_sass/addon/syntax.scss
···
149
149
150
150
box-shadow: var(--language-border-color) 0 0 0 1px;
151
151
152
-
.post-content > & {
152
+
.content > & {
153
153
@include ml-mr(-1rem);
154
154
155
155
border-radius: 0;
···
258
258
259
259
@media all and (min-width: 576px) {
260
260
div[class^='language-'] {
261
-
.post-content > & {
261
+
.content > & {
262
262
@include ml-mr(0);
263
263
264
264
border-radius: $base-radius;
+1
-1
_sass/addon/variables.scss
+1
-1
_sass/addon/variables.scss
···
10
10
/* other framework sizes */
11
11
12
12
$topbar-height: 3rem !default;
13
-
$search-max-width: 210px !default;
13
+
$search-max-width: 200px !default;
14
14
$footer-height: 5rem !default;
15
15
$footer-height-large: 6rem !default; /* screen width: < 850px */
16
16
$main-content-max-width: 1250px !default;
+1
-1
_sass/colors/typography-dark.scss
+1
-1
_sass/colors/typography-dark.scss
···
48
48
/* Topbar */
49
49
--topbar-bg: rgb(27, 27, 30, 0.64);
50
50
--topbar-text-color: var(--text-color);
51
-
--search-wrapper-border-color: rgb(55, 55, 55);
51
+
--search-border-color: rgb(55, 55, 55);
52
52
--search-icon-color: rgb(100, 102, 105);
53
53
--input-focus-border-color: rgb(112, 114, 115);
54
54
+1
-1
_sass/colors/typography-light.scss
+1
-1
_sass/colors/typography-light.scss
-5
_sass/layout/category-tag.scss
-5
_sass/layout/category-tag.scss
+2
-2
_sass/layout/home.scss
+2
-2
_sass/layout/home.scss
+14
-10
_sass/layout/post.scss
+14
-10
_sass/layout/post.scss
···
47
47
}
48
48
49
49
h1 + .post-meta {
50
-
span + span::before {
50
+
> span + span::before {
51
51
@include dot;
52
52
}
53
53
54
-
em {
54
+
em,
55
+
time {
55
56
color: var(--text-color);
57
+
}
56
58
59
+
em {
57
60
a {
58
61
color: inherit;
59
62
}
···
165
168
}
166
169
167
170
.post-navigation {
168
-
padding-top: 3rem;
169
-
padding-bottom: 4rem;
170
-
171
171
.btn {
172
172
@extend %btn-post-nav;
173
173
···
198
198
color: var(--text-muted-color);
199
199
font-size: 0.65rem;
200
200
text-transform: uppercase;
201
-
content: attr(prompt);
201
+
content: attr(aria-label);
202
202
}
203
203
204
204
&:first-child {
···
326
326
@include label(1.1rem, 600);
327
327
}
328
328
329
-
em {
329
+
time {
330
330
@extend %normal-font-style;
331
331
332
332
color: var(--text-muted-color);
···
353
353
#tail-wrapper {
354
354
min-height: 2rem;
355
355
356
-
> div:last-of-type {
357
-
margin-bottom: 2rem;
356
+
> *:not(:last-child) {
357
+
margin-top: 3rem;
358
+
}
359
+
360
+
> *:nth-last-child(2) {
361
+
margin-bottom: 3rem;
358
362
}
359
363
360
364
/* stylelint-disable-next-line selector-id-pattern */
···
391
395
}
392
396
393
397
@media all and (max-width: 768px) {
394
-
.post-content > p > img {
398
+
.content > p > img {
395
399
max-width: calc(100% + 1rem);
396
400
}
397
401
}