Bump version to 2.7.2

- Add smooth scrolling to the footnotes
- Add hash to URL

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,6 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-labels: suspect
 ---
 
 <!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->

.github/workflows/issue-pr-interceptor.yml

@@ -2,9 +2,9 @@ name: "Intercept bad issue/PRs"
 
 on:
   issues:
-    types: [opened]
+    types: [opened, reopened]
   pull_request:
-    types: [opened]
+    types: [opened, reopened]
 
 jobs:
   autoclose:

.github/workflows/pages-deploy.yml.hook

@@ -44,28 +44,25 @@ jobs:
         run: |
           baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
           if [[ -n $baseurl ]]; then
-            echo "SPEC_TEST=_site_no_baseurl" >> $GITHUB_ENV
+            echo "BASE_URL=$baseurl" >> $GITHUB_ENV
           fi
 
       - name: Build Site
         env:
           JEKYLL_ENV: production
         run: |
-          bundle exec jekyll b
+          bundle exec jekyll b -d "_site$BASE_URL"
-
-          if [[ -n $SPEC_TEST ]]; then
-            # Bypass the defects of htmlproofer
-            bundle exec jekyll b -b "" -d "$SPEC_TEST"
-          fi
 
       - name: Test Site
         run: |
-          if [[ -n $SPEC_TEST ]]; then
-            bash tools/test.sh -d "$SPEC_TEST"
-          else
           bash tools/test.sh
-          fi
 
       - name: Deploy
         run: |
+          if [[ -n $BASE_URL ]]; then
+            mv _site$BASE_URL _site-rename
+            rm -rf _site
+            mv _site-rename _site
+          fi
+
           bash tools/deploy.sh

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-gem "jekyll", ">= 4.0.0", "< 5.0"
+gem "jekyll", ">= 4.1.0", "< 5.0"
 
 # plugins
 group :jekyll_plugins do

Gemfile.lock

@@ -11,9 +11,9 @@ GEM
     ethon (0.12.0)
       ffi (>= 1.3.0)
     eventmachine (1.2.7)
-    ffi (1.13.1)
+    ffi (1.14.2)
     forwardable-extended (2.6.0)
-    html-proofer (3.17.4)
+    html-proofer (3.18.3)
       addressable (~> 2.3)
       mercenary (~> 0.3)
       nokogumbo (~> 2.0)
@@ -24,21 +24,21 @@ GEM
     http_parser.rb (0.6.0)
     i18n (1.8.5)
       concurrent-ruby (~> 1.0)
-    jekyll (4.1.1)
+    jekyll (4.2.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
       i18n (~> 1.0)
       jekyll-sass-converter (~> 2.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 2.1)
+      kramdown (~> 2.3)
       kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
       mercenary (~> 0.4.0)
       pathutil (~> 0.9)
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
-      terminal-table (~> 1.8)
+      terminal-table (~> 2.0)
     jekyll-archives (2.2.1)
       jekyll (>= 3.6, < 5.0)
     jekyll-paginate (1.1.0)
@@ -75,18 +75,18 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.4)
-    rouge (3.25.0)
+    rouge (3.26.0)
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
-    terminal-table (1.8.0)
+    terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
-    tzinfo (1.2.8)
+    tzinfo (1.2.9)
       thread_safe (~> 0.1)
-    tzinfo-data (1.2020.4)
+    tzinfo-data (1.2020.6)
       tzinfo (>= 1.0.0)
     unicode-display_width (1.7.0)
     wdm (0.1.1)
@@ -97,7 +97,7 @@ PLATFORMS
 
 DEPENDENCIES
   html-proofer
-  jekyll (>= 4.0.0, < 5.0)
+  jekyll (>= 4.1.0, < 5.0)
   jekyll-archives
   jekyll-paginate
   jekyll-redirect-from

_config.yml

@@ -177,7 +177,7 @@ compress_html:
   profile: false
   blanklines: false
   ignore:
-    envs: []
+    envs: [development]
 
 exclude:
   - vendor

_data/meta.yml

@@ -1,3 +1,3 @@
 name: Chirpy
-version: 2.7.0
+version: 2.7.2
 homepage: https://github.com/cotes2020/jekyll-theme-chirpy/

_includes/panel.html

@@ -47,7 +47,7 @@
   {% endif %}
   </div> <!-- .access -->
 
-  {% if page.layout == 'post' and site.toc and page.toc %}
+  {% if include.toc %}
     <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
       <span class="pl-3 pt-2 mb-2">
       {{- site.data.label.panel.toc -}}

_includes/refactor-content.html

@@ -4,7 +4,10 @@
 
 {% assign _content = include.content %}
 
-<!-- Suroundding the markdown table with '<div class="table-wrapper">. and '</div>' -->
+<!--
+  In order to allow a wide table to scroll horizontally,
+  we suround the markdown table with `<div class="table-wrapper">` and `</div>`
+-->
 {% if _content contains '<table>' %}
   {% assign _content = _content
     | replace: '<table>', '<div class="table-wrapper"><table>'

_includes/sidebar.html

@@ -6,11 +6,11 @@
   MIT License
 -->
 
-<div id="nav-wrapper">
+<div id="sidebar" class="d-flex flex-column align-items-end">
 
-  <div id="profile-wrapper" class="d-flex flex-column">
+  <div class="profile-wrapper text-center">
-    <div id="avatar" class="d-flex justify-content-center">
+    <div id="avatar">
-      <a href="{{ site.baseurl }}/" alt="avatar">
+      <a href="{{ site.baseurl }}/" alt="avatar" class="mx-auto">
         {% assign avatar_url = site.avatar %}
         {% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
         {% if start == '/' %}
@@ -20,26 +20,26 @@
       </a>
     </div>
 
-    <div class="profile-text mt-3">
+    <div class="site-title mt-3">
-      <div class="site-title">
       <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
     </div>
-      <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
-    </div>
-  </div><!-- #profile-wrapper -->
 
-  <ul class="nav flex-column">
+    <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
+
+  </div><!-- .profile-wrapper -->
+
+  <ul class="w-100">
     <!-- home -->
-    <li class="nav-item d-flex justify-content-center {% if page.layout == 'home' %}active{% endif %}">
+    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
-      <a href="{{ '/' | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+      <a href="{{ '/' | relative_url }}" class="nav-link">
         <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
         <span>{{ "HOME" }}</span>
       </a>
     </li>
     <!-- the real tabs -->
     {% for tab in site.tabs %}
-    <li class="nav-item d-flex justify-content-center {% if tab.url == page.url %}active{% endif %}">
+    <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-      <a href="{{ tab.url | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
+      <a href="{{ tab.url | relative_url }}" class="nav-link">
         <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
         <span>{{ tab.title | upcase }}</span>
       </a>
@@ -48,16 +48,7 @@
 
   </ul> <!-- ul.nav.flex-column -->
 
-</div><!-- #nav-wrapper -->
+  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
-
-<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
-
-  {% unless site.theme_mode %}
-  <span id="mode-toggle-wrapper">
-    {% include mode-toggle.html %}
-  </span>
-  <span class="icon-border"></span>
-  {% endunless %}
 
     {% for entry in site.data.contact %}
       {% capture url %}
@@ -76,10 +67,25 @@
       {% endcapture %}
 
       {% if url %}
-    <a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+      <a href="{{ url }}" aria-label="{{ entry.type }}"
+        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
+        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
         <i class="{{ entry.icon }}"></i>
       </a>
       {% endif %}
+
     {% endfor %}
 
-</div>
+    {% unless site.theme_mode %}
+      {% if site.data.contact.size > 0 %}
+        <span class="icon-border order-2"></span>
+      {% endif %}
+
+      <span id="mode-toggle-wrapper" class="order-1">
+        {% include mode-toggle.html %}
+      </span>
+    {% endunless %}
+
+  </div> <!-- .sidebar-bottom -->
+
+</div><!-- #sidebar -->

_layouts/default.html

@@ -21,9 +21,7 @@ layout: compress
 
   <body data-spy="scroll" data-target="#toc">
 
-    <div id="sidebar" class="d-flex flex-column">
     {% include sidebar.html %}
-    </div>
 
     {% include topbar.html %}
 

_layouts/home.html

@@ -49,9 +49,9 @@ layout: page
 {% for post in posts %}
 
   <div class="post-preview">
-    <a href="{{ post.url | relative_url }}">
+    <h1>
-      <h1>{{ post.title }}</h1>
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-    </a>
+    </h1>
 
     <div class="post-content">
       <p>

_layouts/post.html

@@ -111,7 +111,15 @@ layout: default
 
   </div> <!-- #post-wrapper -->
 
-  {% include panel.html %}
+  {% assign enable_toc = false %}
+
+  {% if site.toc and page.toc %}
+    {% if content contains '<h2' or content contains '<h3' %}
+      {% assign enable_toc = true %}
+    {% endif %}
+  {% endif %}
+
+  {% include panel.html toc=enable_toc %}
 
 </div> <!-- .row -->
 

_posts/2019-08-08-text-and-typography.md

@@ -38,7 +38,7 @@ Beside the lake, beneath the trees,
 
 Fluttering and dancing in the breeze.
 
-## List
+## Lists
 
 ### Ordered list
 
@@ -52,7 +52,7 @@ Fluttering and dancing in the breeze.
 	- Setcion
       - Paragraph
 
-### Checkbox list
+### Task list
 
 - [ ] TODO
 - [x] Completed
@@ -62,26 +62,35 @@ Fluttering and dancing in the breeze.
   - [ ] Economic recovery
   - [ ] People smile again
 
+### Description list
+
+Sun
+: the star around which the earth orbits
+
+Moon
+: the natural satellite of the earth, visible by reflected light from the sun
+
+
 ## Block Quote
 
 > This line to shows the Block Quote.
 
 ## Tables
 
-| Company                      | contact          | Country |
+| Company                      | Contact          | Country |
 |:-----------------------------|:-----------------|--------:|
 | Alfreds Futterkiste          | Maria Anders     | Germany |
 | Island Trading               | Helen Bennett    | UK      |
 | Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
 
-## Link
+## Links
 
 <http://127.0.0.1:4000>
 
 
 ## Footnote
 
-Click the hook will locate the footnote[^footnote].
+Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
 
 
 ## Images
@@ -130,9 +139,6 @@ _400px image width_
   cherry :active, c, after b a, 1d
 ```
 
-## Inline code
-
-This is an example of `Inline Code`.
 
 ## Mathematics
 
@@ -144,7 +150,13 @@ When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they
 
 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
-## Code Snippet
+
+## Inline code
+
+This is an example of `Inline Code`.
+
+
+## Code block
 
 ### Common
 
@@ -157,14 +169,6 @@ This is a common code snippet, without syntax highlight and line number.
 #### Console
 
 ```console
-$ date
-Sun Nov  3 15:11:12 CST 2019
-```
-
-
-#### Terminal
-
-```terminal
 $ env |grep SHELL
 SHELL=/usr/local/bin/bash
 PYENV_SHELL=bash
@@ -198,23 +202,6 @@ fi;
 ```
 {% endraw %}
 
-#### Html
-
-```html
-<div class="sidenav">
-  <a href="#contact">Contact</a>
-  <button class="dropdown-btn">Dropdown
-    <i class="fa fa-caret-down"></i>
-  </button>
-  <div class="dropdown-container">
-    <a href="#">Link 1</a>
-    <a href="#">Link 2</a>
-    <a href="#">Link 3</a>
-  </div>
-  <a href="#contact">Search</a>
-</div>
-```
-
 #### Java
 
 ```java
@@ -222,20 +209,11 @@ private void writeObject(java.io.ObjectOutputStream s)
   throws java.io.IOException {
   // Write out any hidden serialization magic
   s.defaultWriteObject();
-
+  for (E e: map.keySet()) s.writeObject(e);
-  // Write out HashMap capacity and load factor
-  s.writeInt(map.capacity());
-  s.writeFloat(map.loadFactor());
-
-  // Write out size
-  s.writeInt(map.size());
-
-  // Write out all elements in the proper order.
-  for (E e: map.keySet())
-    s.writeObject(e);
 }
 ```
 
 ## Reverse Footnote
 
-[^footnote]: The footnote source.
+[^footnote]: The footnote source
+[^fn-nth-2]: The 2nd footnote source

_posts/2019-08-08-write-a-new-post.md

@@ -8,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_posts/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
 
 ## Front Matter
 
@@ -78,7 +78,7 @@ mermaid: true
 ---
 ```
 
-Then you can use it like other markdown language: surround the graph code with <code class="highlighter-rouge">```mermaid</code>.
+Then you can use it like other markdown language: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
 
 ## Images
 
@@ -147,7 +147,7 @@ pin: true
 
 ## Code Block
 
-Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
+Markdown symbols ```` ``` ```` can easily create a code block as following examples.
 
 ```
 This is a common code snippet, without syntax highlight and line number.
@@ -155,7 +155,7 @@ This is a common code snippet, without syntax highlight and line number.
 
 ## Specific Language
 
-Using <code class="highlighter-rouge">```language</code> you will get code snippets with line numbers and syntax highlight.
+Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight.
 
 > **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
 

assets/css/_addon/fonts.scss

@@ -1,7 +0,0 @@
-/*
- * The field 'font-display' is added for Google-fonts.
- *
- * See: <https://fonts.google.com/>
- */
-
-@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');

assets/css/_addon/main.scss

@@ -6,12 +6,13 @@
 * MIT Licensed
 */
 
-@import "_addon/fonts";
 @import "_addon/module";
 @import "_addon/variables";
 @import "_colors/light-typography";
 @import "_colors/dark-typography";
 
+@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
+
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
@@ -45,7 +46,7 @@ html[mode=dark] {
   }
 }
 
-html, body {
+:root {
   font-size: 16px;
 }
 
@@ -73,44 +74,45 @@ $sidebar-display: "sidebar-display";
   width: $sidebar-width-medium;
   z-index: 99;
   background: var(--sidebar-bg);
+
   a {
     @include sidebar-links;
+    &:hover {
+      color: #fff;
+      @include no-text-decoration;
+    }
   }
 
   .site-title {
-    text-align: center;
     a {
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: 0.5px;
-      &:hover {
-        color: #fff;
-        text-decoration: none;
-      }
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    text-align: center;
     color: #828282;
     line-height: 1.2rem;
     word-spacing: 1px;
-    margin: 0.5rem 1.5rem 2rem 1.5rem;
+    margin: 0.5rem 1.5rem 0.5rem 1.5rem;
+    min-height: 3rem; // avoid vertical shifting in multi-line words
+    user-select: none;
   }
 
-  .sidebar-bottom {
-    .icon-border + a { // the icon behide mode-toggle
-      margin-left: 0.1rem;
-    }
-  }
   .nav-link {
     border-radius: 0;
     font-size: 0.95rem;
     font-weight: 600;
     letter-spacing: 1px;
+    display: table-cell;
+    vertical-align: middle;
   }
+
   .nav-item {
+    text-align: center;
+    display: table;
     height: $tab-height;
     &:hover {
       .nav-link {
@@ -123,27 +125,38 @@ $sidebar-display: "sidebar-display";
       }
     }
   }
+
   ul {
     height: $tab-height * $tab-count;
-    display: -webkit-box;
+    margin-bottom: 2rem;
-    display: -ms-flexbox;
+    padding-left: 0;
+
+    > li {
+      width: 100%;
+
+      &:last-child {
+        $cursor-width: 3px;
 
-    > li:last-child {
         > a {
-        margin-right: -3px;
+          position: relative;
-        max-width: calc(100% - 3px);
+          left: $cursor-width / 2;
+          width: 100%;
         }
+
         &::after { // the cursor
+          display: table;
           visibility: hidden;
           content: "";
           position: relative;
           right: 1px;
-        width: 3px;
+          width: $cursor-width;
           height: $tab-cursor-height;
+          border-radius: 1px;
           background-color: var(--nav-cursor-color);
           pointer-events: none;
         }
       }
+    } // li
 
     @mixin fix-cursor($top) {
       top: $top;
@@ -174,9 +187,18 @@ $sidebar-display: "sidebar-display";
 
   .sidebar-bottom {
     font-size: 1.2rem;
-    margin: 2rem 2.5rem 1.6rem;
+    margin-bottom: 2.1rem;
+
+    @include ml-mr(auto);
+    @include pl-pr(1rem);
+
+    %icon {
+      width: 2.4rem;
+      text-align: center;
+    }
+
     a {
-      margin-bottom: 0.5rem; // icons may have multi lines
+      @extend %icon;
     }
 
     a:hover, #mode-toggle-wrapper > i:hover {
@@ -184,6 +206,8 @@ $sidebar-display: "sidebar-display";
     }
 
     #mode-toggle-wrapper {
+      @extend %icon;
+
       i {
         @include sidebar-links;
         margin: 0;
@@ -192,16 +216,21 @@ $sidebar-display: "sidebar-display";
         position: relative;
         bottom: 1px;
       }
+
     }
 
     .icon-border {
-      background: #525354;
+      background-color: #525354;
+      content: "";
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      margin-top: 0.75rem;
+      position: relative;
-    }
+      top: 12px;
     }
+
+  } // .sidebar-bottom
+
 } // #sidebar
 
 @media (hover: hover) {
@@ -213,13 +242,9 @@ $sidebar-display: "sidebar-display";
   }
 }
 
-#nav-wrapper {
+.profile-wrapper {
-  width: 100%;
-  flex-grow: 1;
-}
-
-#profile-wrapper {
   margin-top: 2rem;
+  width: 100%;
 }
 
 #avatar {
@@ -338,6 +363,7 @@ $sidebar-display: "sidebar-display";
   border-radius: 0;
   padding: 0.18rem 0.3rem;
   color: var(--text-color);
+  font-size: 95%;
 }
 
 #search-input {
@@ -645,26 +671,19 @@ kbd {
   margin: 0 0.3rem;
 }
 
-sup {
+.footnotes > ol {
-  z-index: 1;
+  padding-left: 2rem;
-  &:target {
-    @extend %anchor;
-    z-index: 0;
-  }
-}
-
-.footnotes ol {
   margin-top: 0.5rem;
   > li {
-    padding-top: 0.2rem;
-    margin-top: -0.2rem;
-    > p {
-      padding-left: 0.2em;
-    }
     &:not(:last-child) {
-      margin-bottom: -.8rem;
+      margin-bottom: 0.3rem;
     }
-    &:target > p {
+    > p {
+      margin-left: 0.25em;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &:target:not([scroll-focus]), &[scroll-focus=true] > p { // [scroll-focus] added by `smooth-scroll.js`
       background-color: var(--footnote-target-bg);
       width: fit-content;
       -webkit-transition: background-color 1.5s ease-in-out;
@@ -676,14 +695,14 @@ sup {
 
 .footnote {
   @at-root a#{&} {
-    margin: 0 0.2em;
+    @include ml-mr(1px);
+    @include pl-pr(2px);
     border-bottom-style: none !important;
     -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
   }
-  @at-root sup:target > a#{&} {
+  @at-root sup:target:not([scroll-focus]), sup[scroll-focus=true] > a#{&} { // [scroll-focus] added by `smooth-scroll.js`
     background-color: var(--footnote-target-bg);
-    padding: 0 2px;
   }
 }
 
@@ -743,14 +762,15 @@ img {
 
 
 /*--- Begin of Markdown table style ---*/
-div.post-content .table-wrapper {
+
+.table-wrapper { // it will be created by Liquid
   overflow-x: auto;
+  margin-bottom: 1.5rem;
 
   > table {
-    min-width: 60%;
+    min-width: 100%;
     overflow-x: auto;
     border-spacing: 0;
-    margin-bottom: 1.5rem;
 
     thead {
       border-bottom: solid 2px rgba(210, 215, 217, 0.75);
@@ -806,17 +826,28 @@ div.post-content .table-wrapper {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin img($caption: false) {
+  img[data-src] {
-    > img[data-src] {
     margin: 0.5rem 0;
+  }
 
-      &:not(.normal):not(.left):not(.right) {
+  @mixin img-caption {
-        @include align-center;
+    + em {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 80%;
+      padding: 0;
+      color: #6d6c6c;
+    }
+  }
+
+  @mixin img($caption: false) {
+
+    > img[data-src] {
 
       @if $caption {
         @include img-caption;
       }
-      }
 
       &.left {
         float: left;
@@ -831,17 +862,6 @@ div.post-content .table-wrapper {
     }
   }
 
-  @mixin img-caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
-    }
-  }
-
   a {
     &:not(.img-hyperlink) {
       @extend %link-color;
@@ -856,16 +876,18 @@ div.post-content .table-wrapper {
     }
   }
 
+  > p {
+    > img[data-src]:not(.normal):not(.left):not(.right) {
+      @include align-center;
+    }
+  }
+
   p {
     font-size: 1.08rem;
     @include img(true);
-  }// p
-
-  ul {
-    &.task-list, &:not([class]) {
-      padding-left: 2rem;
   }
 
+  ul {
     // attribute 'hide-bullet' was added by liquid
     .task-list-item[hide-bullet] {
       list-style-type: none;
@@ -888,6 +910,32 @@ div.post-content .table-wrapper {
 
   } // ul
 
+  > ol, > ul {
+    padding-left: 2rem;
+
+    li {
+      + li {
+        margin-top: 0.3rem;
+      }
+
+      ol, ul { // sub list
+        padding-left: 2rem;
+        margin-top: 0.3rem;
+      }
+    }
+
+  }
+
+  > ol {
+    li {
+      padding-left: 0.25em;
+    }
+  }
+
+  dl > dd {
+    margin-left: 1rem;
+  }
+
 } // .post-content
 
 .tag:hover {
@@ -1045,7 +1093,6 @@ div.post-content .table-wrapper {
     transition: transform 0.4s ease;
   }
 
-
   html, body {
     overflow-x: hidden;
   }
@@ -1149,13 +1196,9 @@ div.post-content .table-wrapper {
     justify-content: center!important;
   }
 
-  sup:target {
-    padding-top: 3.4rem;
-  }
-
   .footnotes ol > li {
     padding-top: 3.5rem;
-    margin-top: -4.3rem;
+    margin-top: -3.2rem;
     &:first-child {
       margin-top: -3.5rem;
     }
@@ -1182,7 +1225,7 @@ div.post-content .table-wrapper {
     margin-left: $sidebar-width-medium;
   }
 
-  #profile-wrapper {
+  .profile-wrapper {
     margin-top: 3rem;
   }
 
@@ -1191,6 +1234,10 @@ div.post-content .table-wrapper {
     min-width: 150px;
   }
 
+  div.post-content .table-wrapper > table {
+    min-width: 70%;
+  }
+
   /* button 'back-to-Top' position */
   #back-to-top {
     bottom: 5.5rem;
@@ -1227,9 +1274,11 @@ div.post-content .table-wrapper {
   #sidebar {
     width: $sidebar-width-small;
     .sidebar-bottom {
-      @include ml-mr(1.5rem);
+      a, span {
+        width: 2rem;
+      }
       .icon-border {
-        @include ml-mr(.25rem);
+        left: -3px;
       }
     }
   }
@@ -1409,112 +1458,123 @@ div.post-content .table-wrapper {
     margin-right: 3%;
   }
 
-  #profile-wrapper {
-    margin: 4rem 2rem 3rem 4rem;
-    -ms-flex-direction: column!important;
-
-    #avatar {
-      -webkit-box-pack: normal !important;
-      -ms-flex-pack: normal !important;
-      justify-content: normal !important;
-      > a {
-        width: 6.2rem;
-        height: 6.2rem;
-      }
-    }
-
-    .profile-text {
-      margin-left: 0.5rem;
-      /* .d-flex */
-      display: -webkit-box!important;
-      display: -ms-flexbox!important;
-      display: flex!important;
-      /* .flex-wrap */
-      -ms-flex-wrap: wrap!important;
-      flex-wrap: wrap!important;
-      /* .align-content-center */
-      -ms-flex-line-pack: center!important;
-      align-content: center!important;
-      > div {
-        text-align: left !important;
-        width: 100%;
-      }
-    }
-  }
-
   #sidebar {
     width: $sidebar-width-large;
 
-    .site-title a {
+    .profile-wrapper {
+      margin-top: 4rem;
+      margin-bottom: 1rem;
+
+      &.text-center {
+        text-align: left !important;
+      }
+
+      %profile-ml {
+        margin-left: 4.5rem;
+      }
+
+      #avatar {
+        @extend %profile-ml;
+
+        > a {
+          width: 6.2rem;
+          height: 6.2rem;
+          &.mx-auto {
+            margin-left: 0 !important;
+          }
+        }
+      }
+
+      .site-title {
+        @extend %profile-ml;
+        a {
           font-size: 1.7rem;
           letter-spacing: 1px;
-      margin: 0;
+        }
       }
 
       .site-subtitle {
+        @extend %profile-ml;
         word-spacing: 0;
-      margin: 0.3rem 0 0 0;
+        margin-top: 0.3rem;
       }
 
+    } // .profile-wrapper (min-width: 1650px)
+
     ul {
-      margin-left: 3%;
-      > li > a {
       padding-left: 2.5rem;
-        -webkit-box-pack: start!important;
+
-        -ms-flex-pack: start!important;
+      > li:last-child {
-        justify-content: flex-start!important;
+        > a {
+          position: static;
         }
       }
 
+      .nav-item {
+        text-align: left;
+
         .nav-link {
           > span {
             letter-spacing: 3px;
           }
+
           > i {
             @include icon-round(1.65rem);
-        line-height: 1rem;
+
+            line-height: 1.5rem;
             font-size: 0.6rem;
-        padding: 0.5em 0 0 0.1em;
+            padding-top: 1px;
+            padding-left: 1px;
+            position: relative;
+            bottom: 1px;
+
+            &.unloaded {
               display: inline-block !important;
             }
           }
+        }
+
+      }
+    }
 
     .sidebar-bottom {
-      margin-left: 3.5rem;
+      padding-left: 3.5rem;
-      margin-right: 3rem;
+      width: 100%;
-      font-size: 1.3rem;
+
-      a {
+      &.justify-content-center {
-        border: 1px solid;
+        -webkit-box-pack: start!important;
-        border-radius: 50%;
+        -ms-flex-pack: start!important;
-        font-size: 1rem;
+        justify-content: flex-start!important;
-        width: 2rem;
+      }
-        height: 2rem;
+
-        text-align: center;
+      a {
-        i {
+        font-size: 1rem;
-          text-align: center;
+        width: 3rem;
-          width: 1.25em;
-          padding-top: 0.44rem;
-        }
       }
 
-      #mode-toggle-wrapper {
-        font-size: 0.9rem;
       i {
         @include icon-round(2rem);
         padding-top: 0.44rem;
+        margin-top: .7rem; // multi line space
         bottom: 0;
       }
+
+      #mode-toggle-wrapper {
+        width: 3rem;
+
+        i {
+          top: 11px;
+        }
       }
 
       .icon-border {
-        @include ml-mr(.2rem);
+        top: 26px;
-        margin-top: 0.85rem;
-        +a {
-          margin-left: 0;
-        }
       }
+
     } // .sidebar-bottom
+
   } // #sidebar
+
   footer > div.d-flex {
     width: 87%;
     max-width: 1140px;

assets/css/_addon/module.scss

@@ -65,7 +65,6 @@
   color: $color;
   transition: color 0.35s ease-in-out;
   user-select: none;
-  margin: 0 0.25rem;
 }
 
 @mixin icon-round($diameter) {
@@ -97,7 +96,6 @@
   color: $color;
   font-size: $font-size;
   font-weight: $font-weight;
-  font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
 }
 
 @mixin panel-label {

assets/css/_addon/syntax.scss

@@ -56,6 +56,7 @@ div > pre {
   @extend %code-snippet-radius;
 
   color: var(--highlighter-rouge-color);
+  margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
@@ -111,7 +112,6 @@ code {
   &.highlighter-rouge {
     font-size: $code-font-size;
     padding: 3px 5px;
-    margin: 0 0.15rem;
     border-radius: 4px;
     background-color: var(--inline-code-bg);
   }
@@ -149,7 +149,7 @@ div {
   }
 }
 
-[class^='language-']::before {
+div[class^='language-']::before {
   content: attr(lang);
   position: absolute;
   right: 1.8rem;
@@ -161,7 +161,7 @@ div {
 }
 
 @media (min-width: 768px) {
-  [class^='language-']::before {
+  div[class^='language-']::before {
     right: 3.1rem;
   }
 }

assets/css/_addon/variables.scss

@@ -9,7 +9,7 @@
 
 /* --- ↓ width and height ---- */
 
-$tab-height: 3.3rem;
+$tab-height: 3.2rem;
 $tab-cursor-height: 1.6rem;
 
 $sidebar-width-small: 210px;

assets/css/_colors/light-typography.scss

@@ -25,7 +25,7 @@
   --btn-backtotop-color: #686868;
   --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
-  --checkbox-color: darkgrey;
+  --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
@@ -59,7 +59,7 @@
   --btn-share-hover-color: var(--link-color);
   --card-border-color: #f1f1f1;
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
-  --label-color: #808080;
+  --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --tag-bg: rgba(0, 0, 0, 0.075);
   --tag-border: #dee2e6;

assets/css/archives.scss

@@ -19,10 +19,6 @@
   background-color: var(--timeline-color);
 }
 
-%date-font {
-  font-family: 'Roboto Condensed', sans-serif;
-}
-
 #archives {
   letter-spacing: 0.03rem;
   li {
@@ -42,7 +38,6 @@
 
   span.lead {
     font-size: 1.5rem;
-    @extend %date-font;
     position: relative;
     left: 8px;
 
@@ -54,8 +49,7 @@
       }
     }
 
-    &::after {
+    &::after { /* Year dot */
-      /* Year dot */
       content: "";
       display: block;
       position: relative;
@@ -80,7 +74,7 @@
     &.month {
       width: 1.4rem;
       text-align: center;
-      @extend %date-font;
+
       ~ a::before {
         /* A dot for Month and Day */
         content: "";

assets/css/post.scss

@@ -49,21 +49,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 .post-content {
-  > ol, > ul, > dl {
-    padding-left: 2rem;
-    li + li {
-      margin-top: 0.3rem;
-    }
-  }
-  li {
-    > ol, > ul, > dl { // sub list
-      padding-left: 2rem;
-      margin-top: 0.3rem;
-    }
-    > p {
-      margin: 1rem 0 0.8rem;
-    }
-  }
   .preview-img {
     margin-top: 0;
     margin-bottom: 2.5rem;
@@ -182,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     @include label(1.1rem, 600);
   }
   .card {
-    border: 1px solid var(--card-border-color);
+    border-color: var(--card-border-color);
     background-color: var(--card-bg);
     box-shadow: 0 0 5px 0 var(--card-box-shadow);
     -webkit-transition: all 0.3s ease-in-out;
@@ -194,7 +179,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     &:hover {
       -webkit-transform: translate3d(0, -3px, 0);
       transform: translate3d(0, -3px, 0);
-      box-shadow: 0 20px 35px -4px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
     }
   }
 

assets/js/_commons/back-to-top.js

@@ -1,9 +1,8 @@
 /*
 Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
 */
-
 $(function() {
-  $(window).scroll(function() {
+  $(window).scroll(() => {
     if ($(this).scrollTop() > 50 &&
       $("#sidebar-trigger").css("display") === "none") {
       $("#back-to-top").fadeIn();
@@ -12,7 +11,7 @@ $(function() {
     }
   });
 
-  $("#back-to-top").click(function() {
+  $("#back-to-top").click(() => {
     $("body,html").animate({
       scrollTop: 0
     }, 800);

assets/js/_utils/smooth-scroll.js

@@ -0,0 +1,80 @@
+/*
+  Safari doesn't support CSS `scroll-behavior: smooth`,
+  so here is a compatible sollution for all browser to smooth scrolling
+
+  See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
+
+  Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
+*/
+
+$(function() {
+  $("a[href*='#']")
+    .not("[href='#']")
+    .not("[href='#0']")
+    .click(function(event) {
+
+      if (location.pathname.replace(/^\//, "") === this.pathname.replace(/^\//, "")
+        && location.hostname === this.hostname) {
+
+        const REM = 16; /* 16px */
+
+        const hash = decodeURI(this.hash);
+        let isFnRef = RegExp(/^#fnref:/).test(hash);
+        let isFn = RegExp(/^#fn:/).test(hash);
+        let selector = hash.includes(":") ? hash.replace(/\:/, "\\:") : hash;
+        const target = $(selector);
+
+        if (target.length) {
+          event.preventDefault();
+
+          if (history.pushState) { /* add hash to URL */
+            history.pushState(null, null, hash);
+          }
+
+          let curOffset = $(this).offset().top;
+          let destOffset = target.offset().top;
+          const scrollUp = (destOffset < curOffset);
+          const topbarHeight = $("#topbar-wrapper").outerHeight();
+
+          if (scrollUp && isFnRef) {
+            /* Avoid the top-bar covering `fnref` when scrolling up
+              because `fnref` has no `%anchor`(see: module.scss) style. */
+            destOffset -= (topbarHeight + REM / 2);
+          }
+
+          $("html,body").animate({
+            scrollTop: destOffset
+          }, 800, () => {
+
+            var $target = $(target);
+            $target.focus();
+
+            const SCROLL_MARK = "scroll-focus";
+
+            /* clean up old scroll mark */
+            if ($(`[${ SCROLL_MARK }=true]`).length) {
+              $(`[${ SCROLL_MARK }=true]`).attr(SCROLL_MARK, false);
+            }
+
+            /* Clean :target links */
+            if ($(":target").length) { /* element that visited by the URL with hash */
+              $(":target").attr(SCROLL_MARK, false);
+            }
+
+            /* set scroll mark to footnotes */
+            if (isFn || isFnRef) {
+              $target.attr(SCROLL_MARK, true);
+            }
+
+            if ($target.is(":focus")) { /* Checking if the target was focused */
+              return false;
+            } else {
+              $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
+              $target.focus(); /* Set focus again */
+            }
+          });
+        }
+      }
+
+    }); /* click() */
+});

assets/js/_utils/toc-filter.js

@@ -1,14 +0,0 @@
-/*
- * Hide the empty ToC in posts.
- * v2.0
- * https://github.com/cotes2020/jekyll-theme-chirpy
- * © 2019 Cotes Chung
- * MIT Licensed
- */
-
-$(function() {
-  if ($("#post-wrapper .post-content h1").length === 0
-      && $("#post-wrapper .post-content h2").length === 0) {
-    $("#toc-wrapper").addClass("unloaded");
-  }
-});

assets/js/page.min.js

@@ -9,3 +9,5 @@ layout: compress
 ---
 
 {% include_relative _commons.js %}
+
+{% include_relative _utils/smooth-scroll.js %}

assets/js/post.min.js

@@ -12,8 +12,9 @@ layout: compress
 
 {% include_relative lib/_bootstrap-toc.min.js %}
 
-{% include_relative _utils/toc-filter.js %}
-
 {% include_relative _utils/img-hyperlink.js %}
 
 {% include_relative _utils/lang-badge.js %}
+
+{% comment %} `smooth-scroll.js` must be called after ToC is ready {% endcomment %}
+{% include_relative _utils/smooth-scroll.js %}