Cotes Chung
GitHub
parent
41b8f9f519
commit
505e314a31
33 changed files with 412 additions and 399 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<!-- 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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
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_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
|
||||
|
||||
<{{ wrap_elem }}
|
||||
class="{% if include.class %}{{ include.class }}{% endif %}"
|
||||
<time
|
||||
{% if include.class %}
|
||||
class="{{ include.class }}"
|
||||
{% endif %}
|
||||
data-ts="{{ include.date | date: '%s' }}"
|
||||
data-df="{{ df_dayjs }}"
|
||||
{% if include.tooltip %}
|
||||
|
|
@ -16,4 +17,4 @@
|
|||
{% endif %}
|
||||
>
|
||||
{{ include.date | date: df_strftime }}
|
||||
</{{ wrap_elem }}>
|
||||
</time>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!-- The Footer -->
|
||||
|
||||
<footer
|
||||
aria-label="Site Info"
|
||||
class="
|
||||
d-flex flex-column justify-content-center text-muted
|
||||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3
|
||||
|
|
@ -8,7 +9,7 @@
|
|||
>
|
||||
<p>
|
||||
{{ '©' }}
|
||||
{{ 'now' | date: '%Y' }}
|
||||
<time>{{ 'now' | date: '%Y' }}</time>
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
|
||||
{% if site.data.locales[include.lang].copyright.brief %}
|
||||
<span
|
||||
|
|
|
|||
24
_includes/notification.html
Normal file
24
_includes/notification.html
Normal 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>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
<!-- 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 %}
|
||||
<a
|
||||
href="{{ site.baseurl }}{{ page.previous.url }}"
|
||||
class="btn btn-outline-primary"
|
||||
prompt="{{ site.data.locales[include.lang].post.button.previous }}"
|
||||
aria-label="{{ previous }}"
|
||||
>
|
||||
<p>{{ page.previous.title }}</p>
|
||||
</a>
|
||||
{% else %}
|
||||
<div
|
||||
class="btn btn-outline-primary disabled"
|
||||
prompt="{{ site.data.locales[include.lang].post.button.previous }}"
|
||||
>
|
||||
<div class="btn btn-outline-primary disabled" aria-label="{{ previous }}">
|
||||
<p>-</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -22,16 +22,13 @@
|
|||
<a
|
||||
href="{{ site.baseurl }}{{page.next.url}}"
|
||||
class="btn btn-outline-primary"
|
||||
prompt="{{ site.data.locales[include.lang].post.button.next }}"
|
||||
aria-label="{{ next }}"
|
||||
>
|
||||
<p>{{ page.next.title }}</p>
|
||||
</a>
|
||||
{% else %}
|
||||
<div
|
||||
class="btn btn-outline-primary disabled"
|
||||
prompt="{{ site.data.locales[include.lang].post.button.next }}"
|
||||
>
|
||||
<div class="btn btn-outline-primary disabled" aria-label="{{ next }}">
|
||||
<p>-</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -69,17 +69,17 @@
|
|||
{% endfor %}
|
||||
|
||||
{% if relate_posts.size > 0 %}
|
||||
<div id="related-posts" class="mb-2 mb-sm-4">
|
||||
<h3 class="pt-2 mb-4" data-toc-skip>
|
||||
{{ site.data.locales[include.lang].post.relate_posts }}
|
||||
<aside id="related-posts" aria-labelledby="related-label">
|
||||
<h3 class="mb-4" id="related-label">
|
||||
{{- site.data.locales[include.lang].post.relate_posts -}}
|
||||
</h3>
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
|
||||
<nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
|
||||
{% for post in relate_posts %}
|
||||
<div class="col">
|
||||
<a href="{{ post.url | relative_url }}" class="card post-preview h-100">
|
||||
<article class="col">
|
||||
<a href="{{ post.url | relative_url }}" class="post-preview card h-100">
|
||||
<div class="card-body">
|
||||
{% 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">
|
||||
<p>
|
||||
{% include no-linenos.html content=post.content %}
|
||||
|
|
@ -88,10 +88,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- .card-deck -->
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<!-- #related-posts -->
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,16 @@
|
|||
-->
|
||||
|
||||
{% capture result_elem %}
|
||||
<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}
|
||||
{tags}
|
||||
</div>
|
||||
<p>{snippet}</p>
|
||||
</div>
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="{url}">{title}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
{categories}
|
||||
{tags}
|
||||
</div>
|
||||
</header>
|
||||
<p>{snippet}</p>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- The Search results -->
|
||||
|
||||
<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">
|
||||
{% include_cached trending-tags.html %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- The Side Bar -->
|
||||
|
||||
<div id="sidebar" class="d-flex flex-column align-items-end">
|
||||
<div class="profile-wrapper">
|
||||
<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
|
||||
<header class="profile-wrapper">
|
||||
<a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
|
||||
{% if site.avatar != empty and site.avatar %}
|
||||
{% capture avatar_url %}
|
||||
|
|
@ -17,39 +17,40 @@
|
|||
{% endif %}
|
||||
</a>
|
||||
|
||||
<div class="site-title">
|
||||
<h1 class="site-title">
|
||||
<a href="{{ '/' | relative_url }}">{{ site.title }}</a>
|
||||
</div>
|
||||
<div class="site-subtitle fst-italic">{{ site.tagline }}</div>
|
||||
</div>
|
||||
</h1>
|
||||
<p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
|
||||
</header>
|
||||
<!-- .profile-wrapper -->
|
||||
|
||||
<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">
|
||||
<i class="fa-fw fas fa-home"></i>
|
||||
<span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
|
||||
</a>
|
||||
</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>
|
||||
<nav class="flex-column flex-grow-1 w-100 ps-0">
|
||||
<ul class="nav">
|
||||
<!-- home -->
|
||||
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
|
||||
<a href="{{ '/' | relative_url }}" class="nav-link">
|
||||
<i class="fa-fw fas fa-home"></i>
|
||||
<span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- .nav-item -->
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<!-- ul.nav.flex-column -->
|
||||
<!-- 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>
|
||||
</li>
|
||||
<!-- .nav-item -->
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
|
||||
{% 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>
|
||||
</button>
|
||||
|
||||
|
|
@ -58,47 +59,49 @@
|
|||
{% endif %}
|
||||
{% endunless %}
|
||||
|
||||
{% for entry in site.data.contact %}
|
||||
{% case entry.type %}
|
||||
{% when 'github', 'twitter' %}
|
||||
{%- capture url -%}
|
||||
<address class="d-flex mb-0">
|
||||
{% for entry in site.data.contact %}
|
||||
{% case entry.type %}
|
||||
{% when 'github', 'twitter' %}
|
||||
{%- capture url -%}
|
||||
https://{{ entry.type }}.com/{{ site[entry.type].username }}
|
||||
{%- endcapture -%}
|
||||
{% when 'email' %}
|
||||
{% assign email = site.social.email | split: '@' %}
|
||||
{%- capture url -%}
|
||||
{% when 'email' %}
|
||||
{% assign email = site.social.email | split: '@' %}
|
||||
{%- capture url -%}
|
||||
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
|
||||
{%- endcapture -%}
|
||||
{% when 'rss' %}
|
||||
{% assign url = '/feed.xml' | relative_url %}
|
||||
{% else %}
|
||||
{% assign url = entry.url %}
|
||||
{% endcase %}
|
||||
{% when 'rss' %}
|
||||
{% assign url = '/feed.xml' | relative_url %}
|
||||
{% else %}
|
||||
{% assign url = entry.url %}
|
||||
{% endcase %}
|
||||
|
||||
{% if url %}
|
||||
<a
|
||||
href="{{ url }}"
|
||||
aria-label="{{ entry.type }}"
|
||||
{% assign link_types = '' %}
|
||||
{% if url %}
|
||||
<a
|
||||
href="{{ url }}"
|
||||
aria-label="{{ entry.type }}"
|
||||
{% assign link_types = '' %}
|
||||
|
||||
{% unless entry.noblank %}
|
||||
target="_blank"
|
||||
{% assign link_types = 'noopener noreferrer' %}
|
||||
{% endunless %}
|
||||
{% unless entry.noblank %}
|
||||
target="_blank"
|
||||
{% assign link_types = 'noopener noreferrer' %}
|
||||
{% endunless %}
|
||||
|
||||
{% if entry.type == 'mastodon' %}
|
||||
{% assign link_types = link_types | append: ' me' | strip %}
|
||||
{% endif %}
|
||||
{% if entry.type == 'mastodon' %}
|
||||
{% assign link_types = link_types | append: ' me' | strip %}
|
||||
{% endif %}
|
||||
|
||||
{% unless link_types == empty %}
|
||||
rel="{{ link_types }}"
|
||||
{% endunless %}
|
||||
>
|
||||
<i class="{{ entry.icon }}"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% unless link_types == empty %}
|
||||
rel="{{ link_types }}"
|
||||
{% endunless %}
|
||||
>
|
||||
<i class="{{ entry.icon }}"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</address>
|
||||
</div>
|
||||
<!-- .sidebar-bottom -->
|
||||
</div>
|
||||
</aside>
|
||||
<!-- #sidebar -->
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
{% endif %}
|
||||
|
||||
{% if enable_toc %}
|
||||
<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>
|
||||
<section id="toc-wrapper" class="ps-0 pe-4 mb-5">
|
||||
<h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
|
||||
<nav id="toc"></nav>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<!-- The Top Bar -->
|
||||
|
||||
<div id="topbar-wrapper">
|
||||
<header id="topbar-wrapper" aria-label="Top Bar">
|
||||
<div
|
||||
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: '/' %}
|
||||
|
||||
{% if paths.size == 0 or page.layout == 'home' %}
|
||||
|
|
@ -37,10 +37,12 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</span>
|
||||
</nav>
|
||||
<!-- 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">
|
||||
{% if page.layout == 'home' %}
|
||||
|
|
@ -53,8 +55,11 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
|
||||
<i id="search-trigger" class="fas fa-search fa-fw"></i>
|
||||
<span id="search-wrapper" class="align-items-center">
|
||||
<button type="button" id="search-trigger" class="btn btn-link">
|
||||
<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>
|
||||
<input
|
||||
class="form-control"
|
||||
|
|
@ -64,7 +69,9 @@
|
|||
autocomplete="off"
|
||||
placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
|
||||
>
|
||||
</span>
|
||||
<span id="search-cancel">{{ site.data.locales[include.lang].search.cancel }}</span>
|
||||
</search>
|
||||
<button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
|
||||
{{- site.data.locales[include.lang].search.cancel -}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -34,13 +34,13 @@
|
|||
{% endfor %}
|
||||
|
||||
{% if trending_tags.size > 0 %}
|
||||
<div id="access-tags">
|
||||
<div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
|
||||
<section>
|
||||
<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">
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@
|
|||
{% endfor %}
|
||||
|
||||
{% 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 list-unstyled ps-0 pb-1 ms-1 mt-2">
|
||||
<section id="access-lastmod">
|
||||
<h2 class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</h2>
|
||||
<ul class="content list-unstyled 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] %}
|
||||
|
|
@ -34,6 +34,6 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<!-- #access-lastmod -->
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ function stopShimmer($node) {
|
|||
}
|
||||
|
||||
export function imgLazy() {
|
||||
const $images = $('#core-wrapper img[data-src]');
|
||||
const $images = $('main img[data-src]');
|
||||
|
||||
if ($images.length <= 0) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
const $btnSbTrigger = $('#sidebar-trigger');
|
||||
const $btnSearchTrigger = $('#search-trigger');
|
||||
const $btnCancel = $('#search-cancel');
|
||||
const $content = $('#main>.row');
|
||||
const $content = $('#main-wrapper>.container>.row');
|
||||
const $topbarTitle = $('#topbar-title');
|
||||
const $searchWrapper = $('#search-wrapper');
|
||||
const $search = $('search');
|
||||
const $resultWrapper = $('#search-result-wrapper');
|
||||
const $results = $('#search-results');
|
||||
const $input = $('#search-input');
|
||||
|
|
@ -39,13 +39,13 @@ class MobileSearchBar {
|
|||
$btnSbTrigger.addClass(C_UNLOADED);
|
||||
$topbarTitle.addClass(C_UNLOADED);
|
||||
$btnSearchTrigger.addClass(C_UNLOADED);
|
||||
$searchWrapper.addClass(C_FLEX);
|
||||
$search.addClass(C_FLEX);
|
||||
$btnCancel.addClass(C_LOADED);
|
||||
}
|
||||
|
||||
static off() {
|
||||
$btnCancel.removeClass(C_LOADED);
|
||||
$searchWrapper.removeClass(C_FLEX);
|
||||
$search.removeClass(C_FLEX);
|
||||
$btnSbTrigger.removeClass(C_UNLOADED);
|
||||
$topbarTitle.removeClass(C_UNLOADED);
|
||||
$btnSearchTrigger.removeClass(C_UNLOADED);
|
||||
|
|
@ -55,7 +55,7 @@ class MobileSearchBar {
|
|||
class ResultSwitch {
|
||||
static on() {
|
||||
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();
|
||||
$resultWrapper.removeClass(C_UNLOADED);
|
||||
$content.addClass(C_UNLOADED);
|
||||
|
|
@ -72,7 +72,7 @@ class ResultSwitch {
|
|||
$resultWrapper.addClass(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();
|
||||
|
||||
$input.val('');
|
||||
|
|
@ -98,11 +98,11 @@ export function displaySearch() {
|
|||
});
|
||||
|
||||
$input.on('focus', function () {
|
||||
$searchWrapper.addClass(C_FOCUS);
|
||||
$search.addClass(C_FOCUS);
|
||||
});
|
||||
|
||||
$input.on('focusout', function () {
|
||||
$searchWrapper.removeClass(C_FOCUS);
|
||||
$search.removeClass(C_FOCUS);
|
||||
});
|
||||
|
||||
$input.on('input', () => {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
export function toc() {
|
||||
if (document.querySelector('#core-wrapper h2')) {
|
||||
if (document.querySelector('main h2')) {
|
||||
// see: https://github.com/tscanlin/tocbot#usage
|
||||
tocbot.init({
|
||||
tocSelector: '#toc',
|
||||
contentSelector: '.post-content',
|
||||
contentSelector: '.content',
|
||||
ignoreSelector: '[data-toc-skip]',
|
||||
headingSelector: 'h2, h3, h4',
|
||||
orderedList: false,
|
||||
|
|
|
|||
|
|
@ -9,28 +9,27 @@ layout: page
|
|||
{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %}
|
||||
|
||||
<div id="archives" class="pl-xl-3">
|
||||
{% for post in site.posts %}
|
||||
{% assign cur_year = post.date | date: '%Y' %}
|
||||
|
||||
{% for post in site.posts %}
|
||||
{% capture cur_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||
{% if cur_year != last_year %}
|
||||
{% unless forloop.first %}</ul>{% endunless %}
|
||||
|
||||
{% if cur_year != last_year %}
|
||||
{% unless forloop.first %}</ul>{% endunless %}
|
||||
<div class="year lead">{{ cur_year }}</div>
|
||||
<ul class="list-unstyled">
|
||||
{% assign last_year = cur_year %}
|
||||
{% endif %}
|
||||
<time class="year lead d-block">{{ cur_year }}</time>
|
||||
{{ '<ul class="list-unstyled">' }}
|
||||
|
||||
<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 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>
|
||||
{% assign last_year = cur_year %}
|
||||
{% endif %}
|
||||
|
||||
{% if forloop.last %}</ul>{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
<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 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>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ layout: page
|
|||
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
|
||||
</h1>
|
||||
|
||||
<ul class="post-content ps-0">
|
||||
<ul class="content ps-0">
|
||||
{% for post in page.posts %}
|
||||
<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 %}
|
||||
{% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ layout: compress
|
|||
{% endif %}
|
||||
{% endcapture %}
|
||||
|
||||
{% if layout.tail_includes %}
|
||||
{% assign has_tail = true %}
|
||||
{% endif %}
|
||||
|
||||
<!-- `site.alt_lang` can specify a language different from the UI -->
|
||||
<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
|
||||
{% include head.html %}
|
||||
|
|
@ -23,46 +27,63 @@ layout: compress
|
|||
{% include sidebar.html lang=lang %}
|
||||
|
||||
<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 %}
|
||||
{{ 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 %}
|
||||
</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 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 %}
|
||||
<div
|
||||
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>
|
||||
{% include_cached notification.html lang=lang %}
|
||||
{% endif %}
|
||||
|
||||
<!-- JavaScripts -->
|
||||
|
||||
{% include js-selector.html %}
|
||||
|
||||
{% if page.mermaid %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
layout: page
|
||||
refactor: true
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% include lang.html %}
|
||||
|
|
@ -40,10 +39,10 @@ refactor: true
|
|||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div id="post-list" class="pe-xl-2">
|
||||
{% capture content %}
|
||||
{% for post in posts %}
|
||||
<a href="{{ post.url | relative_url }}" class="card-wrapper">
|
||||
<div class="card post-preview flex-md-row-reverse">
|
||||
<article class="card-wrapper">
|
||||
<a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
|
||||
{% if post.image %}
|
||||
{% if post.image.lqip %}
|
||||
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
|
||||
|
|
@ -60,11 +59,9 @@ refactor: true
|
|||
{% endif %}
|
||||
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h1 class="card-title my-2 mt-md-0">
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
|
||||
|
||||
<div class="card-text post-content mt-0 mb-2">
|
||||
<div class="card-text content mt-0 mb-2">
|
||||
<p>
|
||||
{% include no-linenos.html content=post.content %}
|
||||
{{ content | markdownify | strip_html | truncate: 200 | escape }}
|
||||
|
|
@ -99,9 +96,13 @@ refactor: true
|
|||
<!-- .post-meta -->
|
||||
</div>
|
||||
<!-- .card-body -->
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
<div id="post-list" class="flex-grow-1 pe-xl-2">
|
||||
{% include refactor-content.html content=content lang=lang %}
|
||||
</div>
|
||||
<!-- #post-list -->
|
||||
|
||||
|
|
|
|||
|
|
@ -2,69 +2,25 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
{% include lang.html %}
|
||||
{% include origin-type.html %}
|
||||
{% capture _content %}
|
||||
{% if layout.refactor or page.layout == 'page' %}
|
||||
{% include refactor-content.html content=content lang=lang %}
|
||||
{% else %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
{% endcapture %}
|
||||
|
||||
{% if layout.tail_includes %}
|
||||
{% assign has_tail = true %}
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<!-- core -->
|
||||
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
|
||||
{% capture padding %}
|
||||
{% unless page.layout == 'home' %}px-1{% endunless %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="post {{ padding | strip }} {% 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 %}
|
||||
<article class="px-1">
|
||||
{% 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="content">
|
||||
{{ _content }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- #core-wrapper -->
|
||||
|
||||
<!-- panel -->
|
||||
<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>
|
||||
{% else %}
|
||||
{{ _content }}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@ tail_includes:
|
|||
|
||||
{% 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 -->
|
||||
<span>
|
||||
{{ site.data.locales[lang].post.posted }}
|
||||
|
|
@ -22,99 +23,101 @@ tail_includes:
|
|||
|
||||
<!-- lastmod date -->
|
||||
{% if page.last_modified_at and page.last_modified_at != page.date %}
|
||||
<span>
|
||||
{{ site.data.locales[lang].post.updated }}
|
||||
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
|
||||
</span>
|
||||
<span>
|
||||
{{ site.data.locales[lang].post.updated }}
|
||||
{% include datetime.html date=page.last_modified_at tooltip=true lang=lang %}
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if page.image %}
|
||||
{% 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 alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
|
||||
{% if page.image %}
|
||||
{% 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 alt %}alt="{{ page.image.alt | xml_escape | default: "Preview Image" }}"{% endcapture %}
|
||||
|
||||
{% capture lqip %}
|
||||
{% capture lqip %}
|
||||
{% if page.image.lqip %}
|
||||
lqip="{{ page.image.lqip }}"
|
||||
{% endif %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="mt-3 mb-3">
|
||||
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
|
||||
{%- if page.image.alt -%}
|
||||
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="mt-3 mb-3">
|
||||
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
|
||||
{%- if page.image.alt -%}
|
||||
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<!-- author(s) -->
|
||||
<span>
|
||||
{% if page.author %}
|
||||
{% assign authors = page.author %}
|
||||
{% elsif page.authors %}
|
||||
{% assign authors = page.authors %}
|
||||
{% endif %}
|
||||
<div class="d-flex justify-content-between">
|
||||
<!-- author(s) -->
|
||||
<span>
|
||||
{% if page.author %}
|
||||
{% assign authors = page.author %}
|
||||
{% elsif page.authors %}
|
||||
{% assign authors = page.authors %}
|
||||
{% endif %}
|
||||
|
||||
{{ site.data.locales[lang].post.written_by }}
|
||||
{{ site.data.locales[lang].post.written_by }}
|
||||
|
||||
<em>
|
||||
{% if authors %}
|
||||
{% for author in authors %}
|
||||
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
|
||||
{% unless forloop.last %}</em>, <em>{% endunless %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
|
||||
{% endif %}
|
||||
</em>
|
||||
</span>
|
||||
<em>
|
||||
{% if authors %}
|
||||
{% for author in authors %}
|
||||
<a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
|
||||
{% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>
|
||||
{% endif %}
|
||||
</em>
|
||||
</span>
|
||||
|
||||
<div>
|
||||
<!-- read time -->
|
||||
{% include read-time.html content=content prompt=true lang=lang %}
|
||||
</div>
|
||||
<!-- .d-flex -->
|
||||
</div>
|
||||
<!-- .post-meta -->
|
||||
</header>
|
||||
|
||||
</div> <!-- .d-flex -->
|
||||
|
||||
</div> <!-- .post-meta -->
|
||||
|
||||
<div class="post-content">
|
||||
<div class="content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<div class="post-tail-wrapper text-muted">
|
||||
|
||||
<!-- categories -->
|
||||
{% if page.categories.size > 0 %}
|
||||
<div class="post-meta mb-3">
|
||||
<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 -%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="post-meta mb-3">
|
||||
<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 -%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- tags -->
|
||||
{% if page.tags.size > 0 %}
|
||||
<div class="post-tags">
|
||||
<i class="fa fa-tags fa-fw me-1"></i>
|
||||
<div class="post-tags">
|
||||
<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" >
|
||||
{{- tag -}}
|
||||
</a>
|
||||
<a
|
||||
href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
|
||||
class="post-tag no-text-decoration"
|
||||
>
|
||||
{{- tag -}}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="post-tail-bottom
|
||||
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
|
||||
<div
|
||||
class="
|
||||
post-tail-bottom
|
||||
d-flex justify-content-between align-items-center mt-5 pb-2
|
||||
"
|
||||
>
|
||||
<div class="license-wrapper">
|
||||
|
||||
{% if site.data.locales[lang].copyright.license.template %}
|
||||
|
||||
{% capture _replacement %}
|
||||
<a href="{{ site.data.locales[lang].copyright.license.link }}">
|
||||
{{ site.data.locales[lang].copyright.license.name }}
|
||||
|
|
@ -122,12 +125,11 @@ tail_includes:
|
|||
{% endcapture %}
|
||||
|
||||
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include post-sharing.html lang=lang %}
|
||||
|
||||
</div><!-- .post-tail-bottom -->
|
||||
|
||||
</div><!-- div.post-tail-wrapper -->
|
||||
</div>
|
||||
<!-- .post-tail-bottom -->
|
||||
</div>
|
||||
<!-- div.post-tail-wrapper -->
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ layout: page
|
|||
{{ page.title }}
|
||||
<span class="lead text-muted ps-2">{{ page.posts | size }}</span>
|
||||
</h1>
|
||||
<ul class="post-content ps-0">
|
||||
<ul class="content ps-0">
|
||||
{% for post in page.posts %}
|
||||
<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 %}
|
||||
{% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ i {
|
|||
position: sticky;
|
||||
}
|
||||
|
||||
> div {
|
||||
> section {
|
||||
padding-left: 1rem;
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
|
||||
|
|
@ -225,7 +225,7 @@ i {
|
|||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
.content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -233,6 +233,9 @@ i {
|
|||
#panel-wrapper {
|
||||
/* the headings */
|
||||
.panel-heading {
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
@include label(inherit);
|
||||
}
|
||||
|
||||
|
|
@ -367,7 +370,10 @@ i {
|
|||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
main {
|
||||
line-height: 1.75;
|
||||
min-height: calc(100vh - $topbar-height - $footer-height);
|
||||
|
||||
h1 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
@ -381,6 +387,14 @@ i {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categories,
|
||||
#tags,
|
||||
#archives {
|
||||
a:not(:hover) {
|
||||
@extend %no-bottom-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
|
|
@ -397,7 +411,7 @@ i {
|
|||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
.content {
|
||||
font-size: 1.08rem;
|
||||
margin-top: 2rem;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -479,7 +493,7 @@ i {
|
|||
::marker {
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
} /* .post-content */
|
||||
} /* .content */
|
||||
|
||||
.tag:hover {
|
||||
@extend %tag-hover;
|
||||
|
|
@ -738,6 +752,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
.site-title {
|
||||
font-family: inherit;
|
||||
font-weight: 900;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.2;
|
||||
|
|
@ -894,7 +909,7 @@ $btn-mb: 0.5rem;
|
|||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.post-content {
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -907,8 +922,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
#topbar {
|
||||
/* icons */
|
||||
i {
|
||||
button i {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
|
|
@ -937,11 +951,11 @@ $btn-mb: 0.5rem;
|
|||
display: none;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
search {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--search-wrapper-border-color);
|
||||
border: 1px solid var(--search-border-color);
|
||||
background: var(--main-bg);
|
||||
padding: 0 0.5rem;
|
||||
|
||||
|
|
@ -955,7 +969,6 @@ $btn-mb: 0.5rem;
|
|||
/* 'Cancel' link */
|
||||
#search-cancel {
|
||||
color: var(--link-color);
|
||||
margin-left: 0.75rem;
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
@ -1035,7 +1048,7 @@ $btn-mb: 0.5rem;
|
|||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
> div {
|
||||
> article {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
@ -1073,19 +1086,6 @@ $btn-mb: 0.5rem;
|
|||
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 {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
|
@ -1108,7 +1108,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
#topbar-wrapper.row,
|
||||
#main > .row,
|
||||
#main-wrapper > .container > .row,
|
||||
#search-result-wrapper > .row {
|
||||
@include ml-mr(0);
|
||||
}
|
||||
|
|
@ -1204,10 +1204,8 @@ $btn-mb: 0.5rem;
|
|||
*/
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#core-wrapper {
|
||||
min-height: calc(100vh - $topbar-height - $footer-height-large);
|
||||
|
||||
.post-content {
|
||||
main {
|
||||
.content {
|
||||
> blockquote[class^='prompt-'] {
|
||||
@include ml-mr(-1rem);
|
||||
|
||||
|
|
@ -1232,7 +1230,7 @@ $btn-mb: 0.5rem;
|
|||
@extend %full-width;
|
||||
}
|
||||
|
||||
#main {
|
||||
#main-wrapper > .container {
|
||||
@extend %full-width;
|
||||
@include pl-pr(0);
|
||||
}
|
||||
|
|
@ -1250,6 +1248,10 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: calc(100vh - $topbar-height - $footer-height-large);
|
||||
}
|
||||
|
||||
footer {
|
||||
@include slide;
|
||||
|
||||
|
|
@ -1283,7 +1285,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
#topbar,
|
||||
#main {
|
||||
#main-wrapper > .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1292,7 +1294,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
|
||||
#breadcrumb,
|
||||
#search-wrapper {
|
||||
search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -1302,7 +1304,7 @@ $btn-mb: 0.5rem;
|
|||
left: 0;
|
||||
}
|
||||
|
||||
#core-wrapper,
|
||||
main,
|
||||
#panel-wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -1313,7 +1315,7 @@ $btn-mb: 0.5rem;
|
|||
display: block;
|
||||
}
|
||||
|
||||
#search-result-wrapper .post-content {
|
||||
#search-result-wrapper .content {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1324,7 +1326,7 @@ $btn-mb: 0.5rem;
|
|||
h1.dynamic-title {
|
||||
display: none;
|
||||
|
||||
~ .post-content {
|
||||
~ .content {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1351,7 +1353,7 @@ $btn-mb: 0.5rem;
|
|||
display: none;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
search {
|
||||
max-width: $search-max-width;
|
||||
}
|
||||
|
||||
|
|
@ -1360,13 +1362,13 @@ $btn-mb: 0.5rem;
|
|||
justify-content: start !important;
|
||||
}
|
||||
|
||||
.post {
|
||||
main {
|
||||
h1 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.post-content .table-wrapper > table {
|
||||
div.content .table-wrapper > table {
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
|
|
@ -1383,7 +1385,7 @@ $btn-mb: 0.5rem;
|
|||
|
||||
/* Pad horizontal */
|
||||
@media all and (min-width: 992px) and (max-width: 1199px) {
|
||||
#main .col-lg-11 {
|
||||
#main-wrapper > .container .col-lg-11 {
|
||||
flex: 0 0 96%;
|
||||
max-width: 96%;
|
||||
}
|
||||
|
|
@ -1410,7 +1412,7 @@ $btn-mb: 0.5rem;
|
|||
display: none;
|
||||
}
|
||||
|
||||
#main > div.row {
|
||||
#main-wrapper > .container > div.row {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1418,7 +1420,7 @@ $btn-mb: 0.5rem;
|
|||
/* --- desktop mode, both sidebar and panel are visible --- */
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
#search-wrapper {
|
||||
search {
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
|
|
@ -1426,8 +1428,8 @@ $btn-mb: 0.5rem;
|
|||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#search-results > div {
|
||||
width: 46%;
|
||||
#search-results > article {
|
||||
width: 45%;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 1.5rem;
|
||||
|
|
@ -1443,7 +1445,7 @@ $btn-mb: 0.5rem;
|
|||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
.content {
|
||||
font-size: 1.03rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1465,19 +1467,19 @@ $btn-mb: 0.5rem;
|
|||
left: $sidebar-width-large;
|
||||
}
|
||||
|
||||
#search-wrapper {
|
||||
search {
|
||||
margin-right: calc(
|
||||
#{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
|
||||
);
|
||||
}
|
||||
|
||||
#main {
|
||||
#main-wrapper > .container {
|
||||
max-width: $main-content-max-width;
|
||||
padding-left: 1.75rem !important;
|
||||
padding-right: 1.75rem !important;
|
||||
}
|
||||
|
||||
#core-wrapper,
|
||||
main.col-12,
|
||||
#tail-wrapper {
|
||||
padding-right: 4.5rem !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
%section {
|
||||
#core-wrapper & {
|
||||
main & {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ div[class^='language-'] {
|
|||
|
||||
box-shadow: var(--language-border-color) 0 0 0 1px;
|
||||
|
||||
.post-content > & {
|
||||
.content > & {
|
||||
@include ml-mr(-1rem);
|
||||
|
||||
border-radius: 0;
|
||||
|
|
@ -258,7 +258,7 @@ div {
|
|||
|
||||
@media all and (min-width: 576px) {
|
||||
div[class^='language-'] {
|
||||
.post-content > & {
|
||||
.content > & {
|
||||
@include ml-mr(0);
|
||||
|
||||
border-radius: $base-radius;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
|
|||
/* other framework sizes */
|
||||
|
||||
$topbar-height: 3rem !default;
|
||||
$search-max-width: 210px !default;
|
||||
$search-max-width: 200px !default;
|
||||
$footer-height: 5rem !default;
|
||||
$footer-height-large: 6rem !default; /* screen width: < 850px */
|
||||
$main-content-max-width: 1250px !default;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
/* Topbar */
|
||||
--topbar-bg: rgb(27, 27, 30, 0.64);
|
||||
--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);
|
||||
--input-focus-border-color: rgb(112, 114, 115);
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
/* Topbar */
|
||||
--topbar-bg: rgb(255, 255, 255, 0.7);
|
||||
--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;
|
||||
--input-focus-border-color: #b8b8b8;
|
||||
|
||||
|
|
|
|||
|
|
@ -32,11 +32,6 @@
|
|||
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* post's date */
|
||||
> span:last-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
#post-list {
|
||||
margin-top: 2rem;
|
||||
|
||||
a.card-wrapper {
|
||||
.card-wrapper {
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
.card-text.post-content {
|
||||
.card-text.content {
|
||||
@extend %muted;
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -47,13 +47,16 @@
|
|||
}
|
||||
|
||||
h1 + .post-meta {
|
||||
span + span::before {
|
||||
> span + span::before {
|
||||
@include dot;
|
||||
}
|
||||
|
||||
em {
|
||||
em,
|
||||
time {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
em {
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -165,9 +168,6 @@ h1 + .post-meta {
|
|||
}
|
||||
|
||||
.post-navigation {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 4rem;
|
||||
|
||||
.btn {
|
||||
@extend %btn-post-nav;
|
||||
|
||||
|
|
@ -198,7 +198,7 @@ h1 + .post-meta {
|
|||
color: var(--text-muted-color);
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
content: attr(prompt);
|
||||
content: attr(aria-label);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -326,7 +326,7 @@ h1 + .post-meta {
|
|||
@include label(1.1rem, 600);
|
||||
}
|
||||
|
||||
em {
|
||||
time {
|
||||
@extend %normal-font-style;
|
||||
|
||||
color: var(--text-muted-color);
|
||||
|
|
@ -353,8 +353,12 @@ h1 + .post-meta {
|
|||
#tail-wrapper {
|
||||
min-height: 2rem;
|
||||
|
||||
> div:last-of-type {
|
||||
margin-bottom: 2rem;
|
||||
> *:not(:last-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
> *:nth-last-child(2) {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-id-pattern */
|
||||
|
|
@ -391,7 +395,7 @@ h1 + .post-meta {
|
|||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.post-content > p > img {
|
||||
.content > p > img {
|
||||
max-width: calc(100% + 1rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,4 @@ redirect_from:
|
|||
|
||||
{% include lang.html %}
|
||||
|
||||
<div class="lead">
|
||||
<p>{{ site.data.locales[lang].not_found.statment }}</p>
|
||||
</div>
|
||||
<p class="lead">{{ site.data.locales[lang].not_found.statment }}</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue