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

perf: refactor using semantic HTML (#1207)

Browse source 
Fixes #1196
This commit is contained in:
Cotes Chung 2023-09-08 22:48:37 +08:00 committed by GitHub
parent 41b8f9f519
commit 505e314a31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 412 additions and 399 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
_includes/comments/disqus.html
View file

@ -1,5 +1,6 @@
<!-- The Disqus lazy loading. --> <!-- The Disqus lazy loading. -->
<div id="disqus_thread" class="pt-2 pb-2">
<div id="disqus_thread" class="mb-5">
<p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p> <p class="text-center text-muted small">Comments powered by <a href="https://disqus.com/">Disqus</a>.</p>
</div> </div>

9
_includes/datetime.html
View file

@ -3,12 +3,13 @@
See: ${JS_ROOT}/utils/locale-dateime.js See: ${JS_ROOT}/utils/locale-dateime.js
--> -->
{% assign wrap_elem = include.wrap | default: 'em' %}
{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %} {% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %} {% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
<{{ wrap_elem }} <time
class="{% if include.class %}{{ include.class }}{% endif %}" {% if include.class %}
class="{{ include.class }}"
{% endif %}
data-ts="{{ include.date | date: '%s' }}" data-ts="{{ include.date | date: '%s' }}"
data-df="{{ df_dayjs }}" data-df="{{ df_dayjs }}"
{% if include.tooltip %} {% if include.tooltip %}
@ -16,4 +17,4 @@
{% endif %} {% endif %}
> >
{{ include.date | date: df_strftime }} {{ include.date | date: df_strftime }}
</{{ wrap_elem }}> </time>

3
_includes/footer.html
View file

@ -1,6 +1,7 @@
<!-- The Footer --> <!-- The Footer -->
<footer <footer
aria-label="Site Info"
class=" class="
d-flex flex-column justify-content-center text-muted d-flex flex-column justify-content-center text-muted
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3 flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
@ -8,7 +9,7 @@
> >
<p> <p>
{{ '©' }} {{ '©' }}
{{ 'now' | date: '%Y' }} <time>{{ 'now' | date: '%Y' }}</time>
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>. <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
{% if site.data.locales[include.lang].copyright.brief %} {% if site.data.locales[include.lang].copyright.brief %}
<span <span

24
_includes/notification.html Normal file
View file

@ -0,0 +1,24 @@
<aside
id="notification"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<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="px-2 mb-3">{{ site.data.locales[include.lang].notification.update_found }}</p>
<button type="button" class="btn btn-primary" aria-label="Update">
{{ site.data.locales[include.lang].notification.update }}
</button>
</div>
</aside>

21
_includes/post-nav.html
View file

@ -1,19 +1,19 @@
<!-- Navigation buttons at the bottom of the post. --> <!-- Navigation buttons at the bottom of the post. -->
<div class="post-navigation d-flex justify-content-between"> <nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation">
{% assign previous = site.data.locales[include.lang].post.button.previous %}
{% assign next = site.data.locales[include.lang].post.button.next %}
{% if page.previous.url %} {% if page.previous.url %}
<a <a
href="{{ site.baseurl }}{{ page.previous.url }}" href="{{ site.baseurl }}{{ page.previous.url }}"
class="btn btn-outline-primary" class="btn btn-outline-primary"
prompt="{{ site.data.locales[include.lang].post.button.previous }}" aria-label="{{ previous }}"
> >
<p>{{ page.previous.title }}</p> <p>{{ page.previous.title }}</p>
</a> </a>
{% else %} {% else %}
<div <div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
class="btn btn-outline-primary disabled"
prompt="{{ site.data.locales[include.lang].post.button.previous }}"
>
<p>-</p> <p>-</p>
</div> </div>
{% endif %} {% endif %}
@ -22,16 +22,13 @@
<a <a
href="{{ site.baseurl }}{{page.next.url}}" href="{{ site.baseurl }}{{page.next.url}}"
class="btn btn-outline-primary" class="btn btn-outline-primary"
prompt="{{ site.data.locales[include.lang].post.button.next }}" aria-label="{{ next }}"
> >
<p>{{ page.next.title }}</p> <p>{{ page.next.title }}</p>
</a> </a>
{% else %} {% else %}
<div <div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
class="btn btn-outline-primary disabled"
prompt="{{ site.data.locales[include.lang].post.button.next }}"
>
<p>-</p> <p>-</p>
</div> </div>
{% endif %} {% endif %}
</div> </nav>

21
_includes/related-posts.html
View file

@ -69,17 +69,17 @@
{% endfor %} {% endfor %}
{% if relate_posts.size > 0 %} {% if relate_posts.size > 0 %}
<div id="related-posts" class="mb-2 mb-sm-4"> <aside id="related-posts" aria-labelledby="related-label">
<h3 class="pt-2 mb-4" data-toc-skip> <h3 class="mb-4" id="related-label">
{{ 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"> <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
{% for post in relate_posts %} {% for post in relate_posts %}
<div class="col"> <article class="col">
<a href="{{ post.url | relative_url }}" class="card post-preview h-100"> <a href="{{ post.url | relative_url }}" class="post-preview card h-100">
<div class="card-body"> <div class="card-body">
{% include datetime.html date=post.date class="small" lang=include.lang %} {% include datetime.html date=post.date class="small" lang=include.lang %}
<h4 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h4> <h4 class="pt-0 my-2">{{ post.title }}</h4>
<div class="text-muted small"> <div class="text-muted small">
<p> <p>
{% include no-linenos.html content=post.content %} {% include no-linenos.html content=post.content %}
@ -88,10 +88,9 @@
</div> </div>
</div> </div>
</a> </a>
</div> </article>
{% endfor %} {% endfor %}
</div> </nav>
<!-- .card-deck --> </aside>
</div>
<!-- #related-posts --> <!-- #related-posts -->
{% endif %} {% endif %}

18
_includes/search-loader.html
View file

@ -4,14 +4,16 @@
--> -->
{% capture result_elem %} {% capture result_elem %}
<div class="px-1 px-sm-2 px-lg-4 px-xl-0"> <article class="px-1 px-sm-2 px-lg-4 px-xl-0">
<a href="{url}">{title}</a> <header>
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> <h2><a href="{url}">{title}</a></h2>
{categories} <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
{tags} {categories}
</div> {tags}
<p>{snippet}</p> </div>
</div> </header>
<p>{snippet}</p>
</article>
{% endcapture %} {% endcapture %}
{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %} {% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}

2
_includes/search-results.html
View file

@ -1,7 +1,7 @@
<!-- The Search results --> <!-- The Search results -->
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded"> <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
<div class="col-11 post-content"> <div class="col-11 content">
<div id="search-hints"> <div id="search-hints">
{% include_cached trending-tags.html %} {% include_cached trending-tags.html %}
</div> </div>

123
_includes/sidebar.html
View file

@ -1,7 +1,7 @@
<!-- The Side Bar --> <!-- The Side Bar -->
<div id="sidebar" class="d-flex flex-column align-items-end"> <aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
<div class="profile-wrapper"> <header class="profile-wrapper">
<a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle"> <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
{% if site.avatar != empty and site.avatar %} {% if site.avatar != empty and site.avatar %}
{% capture avatar_url %} {% capture avatar_url %}
@ -17,39 +17,40 @@
{% endif %} {% endif %}
</a> </a>
<div class="site-title"> <h1 class="site-title">
<a href="{{ '/' | relative_url }}">{{ site.title }}</a> <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
</div> </h1>
<div class="site-subtitle fst-italic">{{ site.tagline }}</div> <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
</div> </header>
<!-- .profile-wrapper --> <!-- .profile-wrapper -->
<ul class="nav flex-column flex-grow-1 w-100 ps-0"> <nav class="flex-column flex-grow-1 w-100 ps-0">
<!-- home --> <ul class="nav">
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}"> <!-- home -->
<a href="{{ '/' | relative_url }}" class="nav-link"> <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
<i class="fa-fw fas fa-home"></i> <a href="{{ '/' | relative_url }}" class="nav-link">
<span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span> <i class="fa-fw fas fa-home"></i>
</a> <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
</li>
<!-- the real tabs -->
{% for tab in site.tabs %}
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
<a href="{{ tab.url | relative_url }}" class="nav-link">
<i class="fa-fw {{ tab.icon }}"></i>
{% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
<span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
</a> </a>
</li> </li>
<!-- .nav-item --> <!-- the real tabs -->
{% endfor %} {% for tab in site.tabs %}
</ul> <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
<!-- ul.nav.flex-column --> <a href="{{ tab.url | relative_url }}" class="nav-link">
<i class="fa-fw {{ tab.icon }}"></i>
{% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
<span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
</a>
</li>
<!-- .nav-item -->
{% endfor %}
</ul>
</nav>
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"> <div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
{% unless site.theme_mode %} {% unless site.theme_mode %}
<button class="mode-toggle btn" aria-label="Switch Mode"> <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
<i class="fas fa-adjust"></i> <i class="fas fa-adjust"></i>
</button> </button>
@ -58,47 +59,49 @@
{% endif %} {% endif %}
{% endunless %} {% endunless %}
{% for entry in site.data.contact %} <address class="d-flex mb-0">
{% case entry.type %} {% for entry in site.data.contact %}
{% when 'github', 'twitter' %} {% case entry.type %}
{%- capture url -%} {% when 'github', 'twitter' %}
{%- capture url -%}
https://{{ entry.type }}.com/{{ site[entry.type].username }} https://{{ entry.type }}.com/{{ site[entry.type].username }}
{%- endcapture -%} {%- endcapture -%}
{% when 'email' %} {% when 'email' %}
{% assign email = site.social.email | split: '@' %} {% assign email = site.social.email | split: '@' %}
{%- capture url -%} {%- capture url -%}
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@') javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
{%- endcapture -%} {%- endcapture -%}
{% when 'rss' %} {% when 'rss' %}
{% assign url = '/feed.xml' | relative_url %} {% assign url = '/feed.xml' | relative_url %}
{% else %} {% else %}
{% assign url = entry.url %} {% assign url = entry.url %}
{% endcase %} {% endcase %}
{% if url %} {% if url %}
<a <a
href="{{ url }}" href="{{ url }}"
aria-label="{{ entry.type }}" aria-label="{{ entry.type }}"
{% assign link_types = '' %} {% assign link_types = '' %}
{% unless entry.noblank %} {% unless entry.noblank %}
target="_blank" target="_blank"
{% assign link_types = 'noopener noreferrer' %} {% assign link_types = 'noopener noreferrer' %}
{% endunless %} {% endunless %}
{% if entry.type == 'mastodon' %} {% if entry.type == 'mastodon' %}
{% assign link_types = link_types | append: ' me' | strip %} {% assign link_types = link_types | append: ' me' | strip %}
{% endif %} {% endif %}
{% unless link_types == empty %} {% unless link_types == empty %}
rel="{{ link_types }}" rel="{{ link_types }}"
{% endunless %} {% endunless %}
> >
<i class="{{ entry.icon }}"></i> <i class="{{ entry.icon }}"></i>
</a> </a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</address>
</div> </div>
<!-- .sidebar-bottom --> <!-- .sidebar-bottom -->
</div> </aside>
<!-- #sidebar --> <!-- #sidebar -->

6
_includes/toc.html
View file

@ -6,8 +6,8 @@
{% endif %} {% endif %}
{% if enable_toc %} {% if enable_toc %}
<div id="toc-wrapper" class="ps-0 pe-4 mb-5"> <section 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> <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
<nav id="toc"></nav> <nav id="toc"></nav>
</div> </section>
{% endif %} {% endif %}

27
_includes/topbar.html
View file

@ -1,11 +1,11 @@
<!-- The Top Bar --> <!-- The Top Bar -->
<div id="topbar-wrapper"> <header id="topbar-wrapper" aria-label="Top Bar">
<div <div
id="topbar" id="topbar"
class="container d-flex align-items-center justify-content-between h-100" class="d-flex align-items-center justify-content-between px-lg-3 h-100"
> >
<span id="breadcrumb"> <nav id="breadcrumb" aria-label="Breadcrumb">
{% assign paths = page.url | split: '/' %} {% assign paths = page.url | split: '/' %}
{% if paths.size == 0 or page.layout == 'home' %} {% if paths.size == 0 or page.layout == 'home' %}
@ -37,10 +37,12 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</span> </nav>
<!-- endof #breadcrumb --> <!-- endof #breadcrumb -->
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i> <button type="button" id="sidebar-trigger" class="btn btn-link">
<i class="fas fa-bars fa-fw"></i>
</button>
<div id="topbar-title"> <div id="topbar-title">
{% if page.layout == 'home' %} {% if page.layout == 'home' %}
@ -53,8 +55,11 @@
{% endif %} {% endif %}
</div> </div>
<i id="search-trigger" class="fas fa-search fa-fw"></i> <button type="button" id="search-trigger" class="btn btn-link">
<span id="search-wrapper" class="align-items-center"> <i class="fas fa-search fa-fw"></i>
</button>
<search class="align-items-center ms-3 ms-lg-0">
<i class="fas fa-search fa-fw"></i> <i class="fas fa-search fa-fw"></i>
<input <input
class="form-control" class="form-control"
@ -64,7 +69,9 @@
autocomplete="off" autocomplete="off"
placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..." placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
> >
</span> </search>
<span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span> <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
{{- site.data.locales[include.lang].search.cancel -}}
</button>
</div> </div>
</div> </header>

6
_includes/trending-tags.html
View file

@ -34,13 +34,13 @@
{% endfor %} {% endfor %}
{% if trending_tags.size > 0 %} {% if trending_tags.size > 0 %}
<div id="access-tags"> <section>
<div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div> <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
<div class="d-flex flex-wrap mt-3 mb-1 me-3"> <div class="d-flex flex-wrap mt-3 mb-1 me-3">
{% for tag_name in trending_tags %} {% for tag_name in trending_tags %}
{% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %} {% 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> <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </section>
{% endif %} {% endif %}

8
_includes/update-list.html
View file

@ -22,9 +22,9 @@
{% endfor %} {% endfor %}
{% if update_list.size > 0 %} {% if update_list.size > 0 %}
<div id="access-lastmod" class="post"> <section id="access-lastmod">
<div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div> <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
<ul class="post-content list-unstyled ps-0 pb-1 ms-1 mt-2"> <ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2">
{% for item in update_list %} {% for item in update_list %}
{% assign index = item | split: '::' | last | plus: 0 %} {% assign index = item | split: '::' | last | plus: 0 %}
{% assign post = site.posts[index] %} {% assign post = site.posts[index] %}
@ -34,6 +34,6 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </section>
<!-- #access-lastmod --> <!-- #access-lastmod -->
{% endif %} {% endif %}

2
_javascript/modules/components/img-lazyload.js
View file

@ -7,7 +7,7 @@ function stopShimmer($node) {
} }
export function imgLazy() { export function imgLazy() {
const $images = $('#core-wrapper img[data-src]'); const $images = $('main img[data-src]');
if ($images.length <= 0) { if ($images.length <= 0) {
return; return;

16
_javascript/modules/components/search-display.js
View file

@ -4,9 +4,9 @@
const $btnSbTrigger = $('#sidebar-trigger'); const $btnSbTrigger = $('#sidebar-trigger');
const $btnSearchTrigger = $('#search-trigger'); const $btnSearchTrigger = $('#search-trigger');
const $btnCancel = $('#search-cancel'); const $btnCancel = $('#search-cancel');
const $content = $('#main>.row'); const $content = $('#main-wrapper>.container>.row');
const $topbarTitle = $('#topbar-title'); const $topbarTitle = $('#topbar-title');
const $searchWrapper = $('#search-wrapper'); const $search = $('search');
const $resultWrapper = $('#search-result-wrapper'); const $resultWrapper = $('#search-result-wrapper');
const $results = $('#search-results'); const $results = $('#search-results');
const $input = $('#search-input'); const $input = $('#search-input');
@ -39,13 +39,13 @@ class MobileSearchBar {
$btnSbTrigger.addClass(C_UNLOADED); $btnSbTrigger.addClass(C_UNLOADED);
$topbarTitle.addClass(C_UNLOADED); $topbarTitle.addClass(C_UNLOADED);
$btnSearchTrigger.addClass(C_UNLOADED); $btnSearchTrigger.addClass(C_UNLOADED);
$searchWrapper.addClass(C_FLEX); $search.addClass(C_FLEX);
$btnCancel.addClass(C_LOADED); $btnCancel.addClass(C_LOADED);
} }
static off() { static off() {
$btnCancel.removeClass(C_LOADED); $btnCancel.removeClass(C_LOADED);
$searchWrapper.removeClass(C_FLEX); $search.removeClass(C_FLEX);
$btnSbTrigger.removeClass(C_UNLOADED); $btnSbTrigger.removeClass(C_UNLOADED);
$topbarTitle.removeClass(C_UNLOADED); $topbarTitle.removeClass(C_UNLOADED);
$btnSearchTrigger.removeClass(C_UNLOADED); $btnSearchTrigger.removeClass(C_UNLOADED);
@ -55,7 +55,7 @@ class MobileSearchBar {
class ResultSwitch { class ResultSwitch {
static on() { static on() {
if (!ScrollBlocker.resultVisible) { if (!ScrollBlocker.resultVisible) {
// the block method must be called before $(#main) unloaded. // the block method must be called before $(#main-wrapper>.container) unloaded.
ScrollBlocker.on(); ScrollBlocker.on();
$resultWrapper.removeClass(C_UNLOADED); $resultWrapper.removeClass(C_UNLOADED);
$content.addClass(C_UNLOADED); $content.addClass(C_UNLOADED);
@ -72,7 +72,7 @@ class ResultSwitch {
$resultWrapper.addClass(C_UNLOADED); $resultWrapper.addClass(C_UNLOADED);
$content.removeClass(C_UNLOADED); $content.removeClass(C_UNLOADED);
// now the release method must be called after $(#main) display // now the release method must be called after $(#main-wrapper>.container) display
ScrollBlocker.off(); ScrollBlocker.off();
$input.val(''); $input.val('');
@ -98,11 +98,11 @@ export function displaySearch() {
}); });
$input.on('focus', function () { $input.on('focus', function () {
$searchWrapper.addClass(C_FOCUS); $search.addClass(C_FOCUS);
}); });
$input.on('focusout', function () { $input.on('focusout', function () {
$searchWrapper.removeClass(C_FOCUS); $search.removeClass(C_FOCUS);
}); });
$input.on('input', () => { $input.on('input', () => {

4
_javascript/modules/components/toc.js
View file

@ -1,9 +1,9 @@
export function toc() { export function toc() {
if (document.querySelector('#core-wrapper h2')) { if (document.querySelector('main h2')) {
// see: https://github.com/tscanlin/tocbot#usage // see: https://github.com/tscanlin/tocbot#usage
tocbot.init({ tocbot.init({
tocSelector: '#toc', tocSelector: '#toc',
contentSelector: '.post-content', contentSelector: '.content',
ignoreSelector: '[data-toc-skip]', ignoreSelector: '[data-toc-skip]',
headingSelector: 'h2, h3, h4', headingSelector: 'h2, h3, h4',
orderedList: false, orderedList: false,

37
_layouts/archives.html
View file

@ -9,28 +9,27 @@ layout: page
{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %} {% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
<div id="archives" class="pl-xl-3"> <div id="archives" class="pl-xl-3">
{% for post in site.posts %}
{% assign cur_year = post.date | date: '%Y' %}
{% for post in site.posts %} {% if cur_year != last_year %}
{% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %} {% unless forloop.first %}</ul>{% endunless %}
{% if cur_year != last_year %} <time class="year lead d-block">{{ cur_year }}</time>
{% unless forloop.first %}</ul>{% endunless %} {{ '<ul class="list-unstyled">' }}
<div class="year lead">{{ cur_year }}</div>
<ul class="list-unstyled">
{% assign last_year = cur_year %}
{% endif %}
<li> {% assign last_year = cur_year %}
{% assign ts = post.date | date: '%s' %} {% endif %}
<span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
<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>
</li>
{% if forloop.last %}</ul>{% endif %} <li>
{% assign ts = post.date | date: '%s' %}
{% endfor %} <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: '%d' }}</span>
<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>
</li>
{% if forloop.last %}</ul>{% endif %}
{% endfor %}
</div> </div>

4
_layouts/category.html
View file

@ -12,12 +12,12 @@ layout: page
<span class="lead text-muted ps-2">{{ page.posts | size }}</span> <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
</h1> </h1>
<ul class="post-content ps-0"> <ul class="content ps-0">
{% for post in page.posts %} {% for post in page.posts %}
<li class="d-flex justify-content-between px-md-3"> <li class="d-flex justify-content-between px-md-3">
<a href="{{ post.url | relative_url }}">{{ post.title }}</a> <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
<span class="dash flex-grow-1"></span> <span class="dash flex-grow-1"></span>
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %} {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

81
_layouts/default.html
View file

@ -15,6 +15,10 @@ layout: compress
{% endif %} {% endif %}
{% endcapture %} {% endcapture %}
{% if layout.tail_includes %}
{% assign has_tail = true %}
{% endif %}
<!-- `site.alt_lang` can specify a language different from the UI --> <!-- `site.alt_lang` can specify a language different from the UI -->
<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}> <html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
{% include head.html %} {% include head.html %}
@ -23,46 +27,63 @@ layout: compress
{% include sidebar.html lang=lang %} {% include sidebar.html lang=lang %}
<div id="main-wrapper" class="d-flex justify-content-center"> <div id="main-wrapper" class="d-flex justify-content-center">
<div id="main" class="container px-xxl-5"> <div class="container px-xxl-5">
{% include topbar.html lang=lang %} {% include topbar.html lang=lang %}
{{ content }}
<div class="row">
<main
aria-label="Main Content"
class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
>
{{ content }}
</main>
<!-- panel -->
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
<div class="access">
{% include_cached update-list.html lang=lang %}
{% include_cached trending-tags.html lang=lang %}
</div>
{% for _include in layout.panel_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}
</aside>
</div>
<div class="row">
<!-- tail -->
<div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
{% if has_tail %}
{% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}
{% endif %}
{% include_cached footer.html lang=lang %}
</div>
</div>
{% include_cached search-results.html lang=lang %} {% include_cached search-results.html lang=lang %}
</div> </div>
<aside aria-label="Scroll to Top">
<button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow">
<i class="fas fa-angle-up"></i>
</button>
</aside>
</div> </div>
<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">
<i class="fas fa-angle-up"></i>
</button>
{% if site.pwa.enabled %} {% if site.pwa.enabled %}
<div {% include_cached notification.html lang=lang %}
id="notification"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<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="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>
</div>
</div>
{% endif %} {% endif %}
<!-- JavaScripts -->
{% include js-selector.html %} {% include js-selector.html %}
{% if page.mermaid %} {% if page.mermaid %}

23
_layouts/home.html
View file

@ -1,6 +1,5 @@
--- ---
layout: page layout: default
refactor: true
--- ---
{% include lang.html %} {% include lang.html %}
@ -40,10 +39,10 @@ refactor: true
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<div id="post-list" class="pe-xl-2"> {% capture content %}
{% for post in posts %} {% for post in posts %}
<a href="{{ post.url | relative_url }}" class="card-wrapper"> <article class="card-wrapper">
<div class="card post-preview flex-md-row-reverse"> <a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
{% if post.image %} {% if post.image %}
{% if post.image.lqip %} {% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
@ -60,11 +59,9 @@ refactor: true
{% endif %} {% endif %}
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0"> <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
{{ post.title }}
</h1>
<div class="card-text post-content mt-0 mb-2"> <div class="card-text content mt-0 mb-2">
<p> <p>
{% include no-linenos.html content=post.content %} {% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }} {{ content | markdownify | strip_html | truncate: 200 | escape }}
@ -99,9 +96,13 @@ refactor: true
<!-- .post-meta --> <!-- .post-meta -->
</div> </div>
<!-- .card-body --> <!-- .card-body -->
</div> </a>
</a> </article>
{% endfor %} {% endfor %}
{% endcapture %}
<div id="post-list" class="flex-grow-1 pe-xl-2">
{% include refactor-content.html content=content lang=lang %}
</div> </div>
<!-- #post-list --> <!-- #post-list -->

84
_layouts/page.html
View file

@ -2,69 +2,25 @@
layout: default layout: default
--- ---
{% include lang.html %} {% capture _content %}
{% include origin-type.html %} {% if layout.refactor or page.layout == 'page' %}
{% include refactor-content.html content=content lang=lang %}
{% else %}
{{ content }}
{% endif %}
{% endcapture %}
{% if layout.tail_includes %} <article class="px-1">
{% assign has_tail = true %} {% if page.layout == 'page' or page.collection == 'tabs' %}
{% endif %} {% assign tab_key = page.title | downcase %}
{% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
<div class="row"> <h1 class="dynamic-title">
<!-- core --> {{ title }}
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4"> </h1>
{% capture padding %} <div class="content">
{% unless page.layout == 'home' %}px-1{% endunless %} {{ _content }}
{% endcapture %}
<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 page.layout == 'page' or page.collection == 'tabs' %}
{% assign tab_key = page.title | downcase %}
{% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %}
<h1 class="dynamic-title">
{{ title }}
</h1>
<div class="post-content">
{{ _content }}
</div>
{% else %}
{{ _content }}
{% endif %}
</div> </div>
</div> {% else %}
<!-- #core-wrapper --> {{ _content }}
{% endif %}
<!-- panel --> </article>
<div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
<div class="access">
{% include_cached update-list.html lang=lang %}
{% include_cached trending-tags.html lang=lang %}
</div>
{% for _include in layout.panel_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} lang=lang %}
{% endfor %}
</div>
</div>
<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 %}
{% endif %}
{% include_cached footer.html lang=lang %}
</div>
</div>

138
_layouts/post.html
View file

@ -11,9 +11,10 @@ tail_includes:
{% include lang.html %} {% include lang.html %}
<h1 data-toc-skip>{{ page.title }}</h1> <header>
<h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted"> <div class="post-meta text-muted">
<!-- published date --> <!-- published date -->
<span> <span>
{{ site.data.locales[lang].post.posted }} {{ site.data.locales[lang].post.posted }}
@ -22,99 +23,101 @@ tail_includes:
<!-- lastmod date --> <!-- lastmod date -->
{% if page.last_modified_at and page.last_modified_at != page.date %} {% if page.last_modified_at and page.last_modified_at != page.date %}
<span> <span>
{{ site.data.locales[lang].post.updated }} {{ site.data.locales[lang].post.updated }}
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %} {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
</span> </span>
{% endif %} {% endif %}
{% if page.image %} {% if page.image %}
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %} {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %} {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
{% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %} {% capture alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
{% capture lqip %} {% capture lqip %}
{% if page.image.lqip %} {% if page.image.lqip %}
lqip="{{ page.image.lqip }}" lqip="{{ page.image.lqip }}"
{% endif %} {% endif %}
{% endcapture %} {% endcapture %}
<div class="mt-3 mb-3"> <div class="mt-3 mb-3">
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}> <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
{%- if page.image.alt -%} {%- if page.image.alt -%}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption> <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
{%- endif -%} {%- endif -%}
</div> </div>
{% endif %} {% endif %}
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<!-- author(s) --> <!-- author(s) -->
<span> <span>
{% if page.author %} {% if page.author %}
{% assign authors = page.author %} {% assign authors = page.author %}
{% elsif page.authors %} {% elsif page.authors %}
{% assign authors = page.authors %} {% assign authors = page.authors %}
{% endif %} {% endif %}
{{ site.data.locales[lang].post.written_by }} {{ site.data.locales[lang].post.written_by }}
<em> <em>
{% if authors %} {% if authors %}
{% for author in authors %} {% for author in authors %}
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a> <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
{% unless forloop.last %}</em>, <em>{% endunless %} {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
{% endfor %} {% endfor %}
{% else %} {% else %}
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a> <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
{% endif %} {% endif %}
</em> </em>
</span> </span>
<div>
<!-- read time --> <!-- read time -->
{% include read-time.html content=content prompt=true lang=lang %} {% include read-time.html content=content prompt=true lang=lang %}
</div> </div>
<!-- .d-flex -->
</div>
<!-- .post-meta -->
</header>
</div> <!-- .d-flex --> <div class="content">
</div> <!-- .post-meta -->
<div class="post-content">
{{ content }} {{ content }}
</div> </div>
<div class="post-tail-wrapper text-muted"> <div class="post-tail-wrapper text-muted">
<!-- categories --> <!-- categories -->
{% if page.categories.size > 0 %} {% if page.categories.size > 0 %}
<div class="post-meta mb-3"> <div class="post-meta mb-3">
<i class="far fa-folder-open fa-fw me-1"></i> <i class="far fa-folder-open fa-fw me-1"></i>
{% for category in page.categories %} {% for category in page.categories %}
<a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a> <a href="{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/">{{ category }}</a>
{%- unless forloop.last -%}, {%- endunless -%} {%- unless forloop.last -%},{%- endunless -%}
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<!-- tags --> <!-- tags -->
{% if page.tags.size > 0 %} {% if page.tags.size > 0 %}
<div class="post-tags"> <div class="post-tags">
<i class="fa fa-tags fa-fw me-1"></i> <i class="fa fa-tags fa-fw me-1"></i>
{% for tag in page.tags %} {% for tag in page.tags %}
<a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/" <a
class="post-tag no-text-decoration" > href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
{{- tag -}} class="post-tag no-text-decoration"
</a> >
{{- tag -}}
</a>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<div class="post-tail-bottom <div
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2"> class="
post-tail-bottom
d-flex justify-content-between align-items-center mt-5 pb-2
"
>
<div class="license-wrapper"> <div class="license-wrapper">
{% if site.data.locales[lang].copyright.license.template %} {% if site.data.locales[lang].copyright.license.template %}
{% capture _replacement %} {% capture _replacement %}
<a href="{{ site.data.locales[lang].copyright.license.link }}"> <a href="{{ site.data.locales[lang].copyright.license.link }}">
{{ site.data.locales[lang].copyright.license.name }} {{ site.data.locales[lang].copyright.license.name }}
@ -122,12 +125,11 @@ tail_includes:
{% endcapture %} {% endcapture %}
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
{% endif %} {% endif %}
</div> </div>
{% include post-sharing.html lang=lang %} {% include post-sharing.html lang=lang %}
</div>
</div><!-- .post-tail-bottom --> <!-- .post-tail-bottom -->
</div>
</div><!-- div.post-tail-wrapper --> <!-- div.post-tail-wrapper -->

4
_layouts/tag.html
View file

@ -11,12 +11,12 @@ layout: page
{{ page.title }} {{ page.title }}
<span class="lead text-muted ps-2">{{ page.posts | size }}</span> <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
</h1> </h1>
<ul class="post-content ps-0"> <ul class="content ps-0">
{% for post in page.posts %} {% for post in page.posts %}
<li class="d-flex justify-content-between px-md-3"> <li class="d-flex justify-content-between px-md-3">
<a href="{{ post.url | relative_url }}">{{ post.title }}</a> <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
<span class="dash flex-grow-1"></span> <span class="dash flex-grow-1"></span>
{% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %} {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

98
_sass/addon/commons.scss
View file

@ -216,7 +216,7 @@ i {
position: sticky; position: sticky;
} }
> div { > section {
padding-left: 1rem; padding-left: 1rem;
border-left: 1px solid var(--main-border-color); border-left: 1px solid var(--main-border-color);
@ -225,7 +225,7 @@ i {
} }
} }
.post-content { .content {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
@ -233,6 +233,9 @@ i {
#panel-wrapper { #panel-wrapper {
/* the headings */ /* the headings */
.panel-heading { .panel-heading {
font-family: inherit;
line-height: inherit;
@include label(inherit); @include label(inherit);
} }
@ -367,7 +370,10 @@ i {
} }
} }
.post { main {
line-height: 1.75;
min-height: calc(100vh - $topbar-height - $footer-height);
h1 { h1 {
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -381,6 +387,14 @@ i {
} }
} }
} }
.categories,
#tags,
#archives {
a:not(:hover) {
@extend %no-bottom-border;
}
}
} }
.post-meta { .post-meta {
@ -397,7 +411,7 @@ i {
} }
} }
.post-content { .content {
font-size: 1.08rem; font-size: 1.08rem;
margin-top: 2rem; margin-top: 2rem;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -479,7 +493,7 @@ i {
::marker { ::marker {
color: var(--text-muted-color); color: var(--text-muted-color);
} }
} /* .post-content */ } /* .content */
.tag:hover { .tag:hover {
@extend %tag-hover; @extend %tag-hover;
@ -738,6 +752,7 @@ $btn-mb: 0.5rem;
} }
.site-title { .site-title {
font-family: inherit;
font-weight: 900; font-weight: 900;
font-size: 1.75rem; font-size: 1.75rem;
line-height: 1.2; line-height: 1.2;
@ -894,7 +909,7 @@ $btn-mb: 0.5rem;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
.post-content { .content {
margin-top: 2rem; margin-top: 2rem;
} }
} }
@ -907,8 +922,7 @@ $btn-mb: 0.5rem;
} }
#topbar { #topbar {
/* icons */ button i {
i {
color: #999999; color: #999999;
} }
@ -937,11 +951,11 @@ $btn-mb: 0.5rem;
display: none; display: none;
} }
#search-wrapper { search {
display: flex; display: flex;
width: 100%; width: 100%;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid var(--search-wrapper-border-color); border: 1px solid var(--search-border-color);
background: var(--main-bg); background: var(--main-bg);
padding: 0 0.5rem; padding: 0 0.5rem;
@ -955,7 +969,6 @@ $btn-mb: 0.5rem;
/* 'Cancel' link */ /* 'Cancel' link */
#search-cancel { #search-cancel {
color: var(--link-color); color: var(--link-color);
margin-left: 0.75rem;
display: none; display: none;
white-space: nowrap; white-space: nowrap;
@ -1035,7 +1048,7 @@ $btn-mb: 0.5rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
> div { > article {
width: 100%; width: 100%;
&:not(:last-child) { &:not(:last-child) {
@ -1073,19 +1086,6 @@ $btn-mb: 0.5rem;
white-space: nowrap; white-space: nowrap;
} }
#core-wrapper {
line-height: 1.75;
min-height: calc(100vh - $topbar-height - $footer-height);
.categories,
#tags,
#archives {
a:not(:hover) {
@extend %no-bottom-border;
}
}
}
#mask { #mask {
display: none; display: none;
position: fixed; position: fixed;
@ -1108,7 +1108,7 @@ $btn-mb: 0.5rem;
} }
#topbar-wrapper.row, #topbar-wrapper.row,
#main > .row, #main-wrapper > .container > .row,
#search-result-wrapper > .row { #search-result-wrapper > .row {
@include ml-mr(0); @include ml-mr(0);
} }
@ -1204,10 +1204,8 @@ $btn-mb: 0.5rem;
*/ */
@media all and (max-width: 576px) { @media all and (max-width: 576px) {
#core-wrapper { main {
min-height: calc(100vh - $topbar-height - $footer-height-large); .content {
.post-content {
> blockquote[class^='prompt-'] { > blockquote[class^='prompt-'] {
@include ml-mr(-1rem); @include ml-mr(-1rem);
@ -1232,7 +1230,7 @@ $btn-mb: 0.5rem;
@extend %full-width; @extend %full-width;
} }
#main { #main-wrapper > .container {
@extend %full-width; @extend %full-width;
@include pl-pr(0); @include pl-pr(0);
} }
@ -1250,6 +1248,10 @@ $btn-mb: 0.5rem;
} }
} }
main {
min-height: calc(100vh - $topbar-height - $footer-height-large);
}
footer { footer {
@include slide; @include slide;
@ -1283,7 +1285,7 @@ $btn-mb: 0.5rem;
} }
#topbar, #topbar,
#main { #main-wrapper > .container {
max-width: 100%; max-width: 100%;
} }
@ -1292,7 +1294,7 @@ $btn-mb: 0.5rem;
} }
#breadcrumb, #breadcrumb,
#search-wrapper { search {
display: none; display: none;
} }
@ -1302,7 +1304,7 @@ $btn-mb: 0.5rem;
left: 0; left: 0;
} }
#core-wrapper, main,
#panel-wrapper { #panel-wrapper {
margin-top: 0; margin-top: 0;
} }
@ -1313,7 +1315,7 @@ $btn-mb: 0.5rem;
display: block; display: block;
} }
#search-result-wrapper .post-content { #search-result-wrapper .content {
letter-spacing: 0; letter-spacing: 0;
} }
@ -1324,7 +1326,7 @@ $btn-mb: 0.5rem;
h1.dynamic-title { h1.dynamic-title {
display: none; display: none;
~ .post-content { ~ .content {
margin-top: 2.5rem; margin-top: 2.5rem;
} }
} }
@ -1351,7 +1353,7 @@ $btn-mb: 0.5rem;
display: none; display: none;
} }
#search-wrapper { search {
max-width: $search-max-width; max-width: $search-max-width;
} }
@ -1360,13 +1362,13 @@ $btn-mb: 0.5rem;
justify-content: start !important; justify-content: start !important;
} }
.post { main {
h1 { h1 {
margin-top: 3rem; margin-top: 3rem;
} }
} }
div.post-content .table-wrapper > table { div.content .table-wrapper > table {
min-width: 70%; min-width: 70%;
} }
@ -1383,7 +1385,7 @@ $btn-mb: 0.5rem;
/* Pad horizontal */ /* Pad horizontal */
@media all and (min-width: 992px) and (max-width: 1199px) { @media all and (min-width: 992px) and (max-width: 1199px) {
#main .col-lg-11 { #main-wrapper > .container .col-lg-11 {
flex: 0 0 96%; flex: 0 0 96%;
max-width: 96%; max-width: 96%;
} }
@ -1410,7 +1412,7 @@ $btn-mb: 0.5rem;
display: none; display: none;
} }
#main > div.row { #main-wrapper > .container > div.row {
justify-content: center !important; justify-content: center !important;
} }
} }
@ -1418,7 +1420,7 @@ $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) {
#search-wrapper { search {
margin-right: 4rem; margin-right: 4rem;
} }
@ -1426,8 +1428,8 @@ $btn-mb: 0.5rem;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
#search-results > div { #search-results > article {
width: 46%; width: 45%;
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 1.5rem; margin-right: 1.5rem;
@ -1443,7 +1445,7 @@ $btn-mb: 0.5rem;
} }
} }
.post-content { .content {
font-size: 1.03rem; font-size: 1.03rem;
} }
} }
@ -1465,19 +1467,19 @@ $btn-mb: 0.5rem;
left: $sidebar-width-large; left: $sidebar-width-large;
} }
#search-wrapper { search {
margin-right: calc( margin-right: calc(
#{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
); );
} }
#main { #main-wrapper > .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;
} }
#core-wrapper, main.col-12,
#tail-wrapper { #tail-wrapper {
padding-right: 4.5rem !important; padding-right: 4.5rem !important;
} }

2
_sass/addon/module.scss
View file

@ -11,7 +11,7 @@
} }
%section { %section {
#core-wrapper & { main & {
margin-top: 2.5rem; margin-top: 2.5rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;

4
_sass/addon/syntax.scss
View file

@ -149,7 +149,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 > & { .content > & {
@include ml-mr(-1rem); @include ml-mr(-1rem);
border-radius: 0; border-radius: 0;
@ -258,7 +258,7 @@ div {
@media all and (min-width: 576px) { @media all and (min-width: 576px) {
div[class^='language-'] { div[class^='language-'] {
.post-content > & { .content > & {
@include ml-mr(0); @include ml-mr(0);
border-radius: $base-radius; border-radius: $base-radius;

2
_sass/addon/variables.scss
View file

@ -10,7 +10,7 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
/* other framework sizes */ /* other framework sizes */
$topbar-height: 3rem !default; $topbar-height: 3rem !default;
$search-max-width: 210px !default; $search-max-width: 200px !default;
$footer-height: 5rem !default; $footer-height: 5rem !default;
$footer-height-large: 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;

2
_sass/colors/typography-dark.scss
View file

@ -48,7 +48,7 @@
/* Topbar */ /* Topbar */
--topbar-bg: rgb(27, 27, 30, 0.64); --topbar-bg: rgb(27, 27, 30, 0.64);
--topbar-text-color: var(--text-color); --topbar-text-color: var(--text-color);
--search-wrapper-border-color: rgb(55, 55, 55); --search-border-color: rgb(55, 55, 55);
--search-icon-color: rgb(100, 102, 105); --search-icon-color: rgb(100, 102, 105);
--input-focus-border-color: rgb(112, 114, 115); --input-focus-border-color: rgb(112, 114, 115);

2
_sass/colors/typography-light.scss
View file

@ -51,7 +51,7 @@
/* Topbar */ /* Topbar */
--topbar-bg: rgb(255, 255, 255, 0.7); --topbar-bg: rgb(255, 255, 255, 0.7);
--topbar-text-color: rgb(78, 78, 78); --topbar-text-color: rgb(78, 78, 78);
--search-wrapper-border-color: rgb(240, 240, 240); --search-border-color: rgb(240, 240, 240);
--search-icon-color: #c2c6cc; --search-icon-color: #c2c6cc;
--input-focus-border-color: #b8b8b8; --input-focus-border-color: #b8b8b8;

5
_sass/layout/category-tag.scss
View file

@ -32,11 +32,6 @@
font-size: 1.1rem; font-size: 1.1rem;
} }
/* post's date */
> span:last-child {
white-space: nowrap;
}
} }
} }

4
_sass/layout/home.scss
View file

@ -5,7 +5,7 @@
#post-list { #post-list {
margin-top: 2rem; margin-top: 2rem;
a.card-wrapper { .card-wrapper {
display: block; display: block;
&:hover { &:hover {
@ -51,7 +51,7 @@
color: var(--text-muted-color) !important; color: var(--text-muted-color) !important;
} }
.card-text.post-content { .card-text.content {
@extend %muted; @extend %muted;
p { p {

24
_sass/layout/post.scss
View file

@ -47,13 +47,16 @@
} }
h1 + .post-meta { h1 + .post-meta {
span + span::before { > span + span::before {
@include dot; @include dot;
} }
em { em,
time {
color: var(--text-color); color: var(--text-color);
}
em {
a { a {
color: inherit; color: inherit;
} }
@ -165,9 +168,6 @@ h1 + .post-meta {
} }
.post-navigation { .post-navigation {
padding-top: 3rem;
padding-bottom: 4rem;
.btn { .btn {
@extend %btn-post-nav; @extend %btn-post-nav;
@ -198,7 +198,7 @@ h1 + .post-meta {
color: var(--text-muted-color); color: var(--text-muted-color);
font-size: 0.65rem; font-size: 0.65rem;
text-transform: uppercase; text-transform: uppercase;
content: attr(prompt); content: attr(aria-label);
} }
&:first-child { &:first-child {
@ -326,7 +326,7 @@ h1 + .post-meta {
@include label(1.1rem, 600); @include label(1.1rem, 600);
} }
em { time {
@extend %normal-font-style; @extend %normal-font-style;
color: var(--text-muted-color); color: var(--text-muted-color);
@ -353,8 +353,12 @@ h1 + .post-meta {
#tail-wrapper { #tail-wrapper {
min-height: 2rem; min-height: 2rem;
> div:last-of-type { > *:not(:last-child) {
margin-bottom: 2rem; margin-top: 3rem;
}
> *:nth-last-child(2) {
margin-bottom: 3rem;
} }
/* stylelint-disable-next-line selector-id-pattern */ /* stylelint-disable-next-line selector-id-pattern */
@ -391,7 +395,7 @@ h1 + .post-meta {
} }
@media all and (max-width: 768px) { @media all and (max-width: 768px) {
.post-content > p > img { .content > p > img {
max-width: calc(100% + 1rem); max-width: calc(100% + 1rem);
} }
} }

4
assets/404.html
View file

@ -11,6 +11,4 @@ redirect_from:
{% include lang.html %} {% include lang.html %}
<div class="lead"> <p class="lead">{{ site.data.locales[lang].not_found.statment }}</p>
<p>{{ site.data.locales[lang].not_found.statment }}</p>
</div>