Merge branch 'feature/v6-ui' (#1034)

The UI of the next major version

_data/assets/cross_origin.yml

@@ -11,7 +11,7 @@ cdns:
 
 # fonts
 
-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap
 
 # Libraries
 
@@ -19,8 +19,8 @@ jquery:
   js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
+  js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
 
 toc:
   css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css

_data/locales/ar.yml

@@ -40,7 +40,7 @@ copyright:
     ما لم يذكر خلاف ذلك ، يتم ترخيص منشورات المدونة على هذا الموقع
     بموجب ترخيص Creative Commons Attribution 4.0 International (CC BY 4.0) من قبل المؤلف.
 
-meta: باستخدام :PLATFORM السمة :THEME.
+meta: باستخدام :PLATFORM السمة :THEME
 
 not_found:
   statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: أنسخ الرابط
       succeed: تم نسخ الرابط بنجاح!
-  # pinned prompt of posts list on homepage
-  pin_prompt: مثبت
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
+    strftime: "%b %e, %Y"
-    dayjs: 'll'
+    dayjs: "ll"
   archives:
-    strftime: '%b'
+    strftime: "%b"
-    dayjs: 'MMM'
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/bg-BG.yml

@@ -40,7 +40,7 @@ copyright:
     Освен ако не е посочено друго, публикациите в блога на този сайт са лицензирани
     под лиценза Creative Commons Attribution 4.0 (CC BY 4.0) от автора.
 
-meta: Създадено чрез :PLATFORM и :THEME тема.
+meta: Създадено чрез :PLATFORM и :THEME тема
 
 not_found:
   statment: Съжалявам, но на този URL адрес няма налично съдържание.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Копирай линк
       succeed: Линкът е копиран успешно!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Прикрепенa
 
 # categories page
 categories:

_data/locales/cs-CZ.yml

@@ -40,7 +40,7 @@ copyright:
     Pokud není uvedeno jinak, jsou příspěvky na tomto webu licencovány
     pod licencí Creative Commons Attribution 4.0 International (CC BY 4.0) Licence autora.
 
-meta: Použití :PLATFORM s motivem :THEME.
+meta: Použití :PLATFORM s motivem :THEME
 
 not_found:
   statment: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: Kopírovat odkaz
       succeed: Zkopírováno!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Připnuto
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
+    strftime: "%b %e, %Y"
-    dayjs: 'll'
+    dayjs: "ll"
   archives:
-    strftime: '%b'
+    strftime: "%b"
-    dayjs: 'MMM'
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/de-DE.yml

@@ -39,7 +39,7 @@ copyright:
   verbose: >-
     Alle Einträge auf dieser Seite stehen, soweit nicht anders angegeben, unter der Lizenz Creative Commons Attribution 4.0 (CC BY 4.0).
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: Entschuldigung, dieser Link verweist auf keine vorhandene Ressource.
@@ -69,8 +69,6 @@ post:
     share_link:
       title: Link kopieren
       succeed: Link erfolgreich kopiert!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Angepinnt
 
 # categories page
 categories:

_data/locales/el-GR.yml

@@ -40,7 +40,7 @@ copyright:
     Εκτός αλλού ή οπουδήποτε αλλού, τα blog posts σε αυτήν την σελίδα βρίσκονται υπο την άδεια
     Creative Commons Attribution 4.0 International (CC BY 4.0) του δημιουργού.
 
-meta: Αξιοποιώντας την :PLATFORM theme :THEME.
+meta: Αξιοποιώντας την :PLATFORM theme :THEME
 
 not_found:
   statment: Συγνώμη, έχουμε τοποθετήσει λάθος αυτήν την διεύθυνση URL ή υποδεικνύει κάτι που δεν υπάρχει.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: Αντιγραφή συνδέσμου
       succeed: Η διεύθυνση αντιγράφθηκε με επιτυχία!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Pinned
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
+    strftime: "%b %e, %Y"
-    dayjs: 'll'
+    dayjs: "ll"
   archives:
-    strftime: '%b'
+    strftime: "%b"
-    dayjs: 'MMM'
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/en.yml

@@ -40,7 +40,7 @@ copyright:
     Except where otherwise noted, the blog posts on this site are licensed
     under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
 
-meta: Using the :PLATFORM theme :THEME.
+meta: Using the :PLATFORM theme :THEME
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
@@ -70,18 +70,16 @@ post:
     share_link:
       title: Copy link
       succeed: Link copied successfully!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Pinned
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
+    strftime: "%b %e, %Y"
-    dayjs: 'll'
+    dayjs: "ll"
   archives:
-    strftime: '%b'
+    strftime: "%b"
-    dayjs: 'MMM'
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/es-ES.yml

@@ -40,7 +40,7 @@ copyright:
     Salvo que se indique explícitamente, las entradas de este blog están licenciadas
     bajo la Creative Commons Attribution 4.0 International (CC BY 4.0) License por el autor.
 
-meta: Hecho con :PLATFORM usando el tema :THEME.
+meta: Hecho con :PLATFORM usando el tema :THEME
 
 not_found:
   statment: Lo sentimos, hemos perdido esa URL o apunta a algo que no existe.
@@ -59,7 +59,7 @@ post:
   pageview_measure: visitas
   read_time:
     unit: min
-    prompt: ' de lectura'
+    prompt: " de lectura"
   relate_posts: Lecturas adicionales
   share: Compartir
   button:
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Copiar enlace
       succeed: ¡Enlace copiado!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Fijado
 
 # categories page
 categories:

_data/locales/fi-FI.yml

@@ -39,7 +39,7 @@ copyright:
   verbose: >-
     Paitsi jos erikseen mainitaan on kaikki sisältö Creative Commons Attribution 4.0 International (CC BY 4.0) Lisensoitu kirjoittajan toimesta.
 
-meta: Käytetään :PLATFORM iä Teema :THEME.
+meta: Käytetään :PLATFORM iä Teema :THEME
 
 not_found:
   statment: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
@@ -69,18 +69,16 @@ post:
     share_link:
       title: Kopioi linkki
       succeed: Linkki kopioitu onnistuneesti!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Kiinnitetty
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
+    strftime: "%b %e, %Y"
-    dayjs: 'll'
+    dayjs: "ll"
   archives:
-    strftime: '%b'
+    strftime: "%b"
-    dayjs: 'MMM'
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/fr-FR.yml

@@ -70,8 +70,6 @@ post:
     share_link:
       title: Copier le lien
       succeed: Lien copié avec succès !
-  # pinned prompt of posts list on homepage
-  pin_prompt: Épinglé
 
 # categories page
 categories:

_data/locales/hu-HU.yml

@@ -42,7 +42,7 @@ copyright:
     Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
     hacsak másképp nincs jelezve.
 
-meta: Készítve :PLATFORM motorral :THEME témával.
+meta: Készítve :PLATFORM motorral :THEME témával
 
 not_found:
   statment: Sajnáljuk, az URL-t rosszul helyeztük el, vagy valami nem létezőre mutat.
@@ -72,8 +72,6 @@ post:
     share_link:
       title: Link másolása
       succeed: Link sikeresen másolva!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Kitűzve
 
 # categories page
 categories:

_data/locales/id-ID.yml

@@ -40,7 +40,7 @@ copyright:
     Kecuali jika dinyatakan, Postingan blog di situs ini dilisensikan
     di bawah Lisensi Creative Commons Attribution 4.0 International (CC BY 4.0) oleh penulis.
 
-meta: Didukung oleh :PLATFORM dengan tema :THEME.
+meta: Didukung oleh :PLATFORM dengan tema :THEME
 
 not_found:
   statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Salin tautan
       succeed: Tautan berhasil disalin!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Disematkan
 
 # categories page
 categories:

_data/locales/it-IT.yml

@@ -40,8 +40,7 @@ copyright:
     Eccetto quando esplicitamente menzionato, i post di questo blog sono da ritenersi sotto
     i termini di licenza Creative Commons Attribution 4.0 International (CC BY 4.0).
 
-
+meta: Servizio offerto da :PLATFORM con tema :THEME
-meta: Servizio offerto da :PLATFORM con tema :THEME.                                       
 not_found:
   statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
 
@@ -70,18 +69,16 @@ post:
     share_link:
       title: Copia link
       succeed: Link copiato con successo!
-  # pinned prompt of posts list on homepage
-  pin_prompt: In alto
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
+    strftime: "%b %e, %Y"
-    dayjs: 'll'
+    dayjs: "ll"
   archives:
-    strftime: '%b'
+    strftime: "%b"
-    dayjs: 'MMM'
+    dayjs: "MMM"
 
 # categories page
 categories:

_data/locales/ko-KR.yml

@@ -40,7 +40,7 @@ copyright:
     명시되지 않는 한 이 사이트의 블로그 게시물은 작성자의
     Creative Commons Attribution 4.0 International(CC BY 4.0) 라이선스에 따라 사용이 허가되었습니다.
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: 해당 URL은 존재하지 않습니다.
@@ -70,15 +70,13 @@ post:
     share_link:
       title: 링크 복사하기
       succeed: 링크가 복사되었습니다!
-  # pinned prompt of posts list on homepage
-  pin_prompt: 핀
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%Y/%m/%d'
+    strftime: "%Y/%m/%d"
-    dayjs: 'YYYY/MM/DD'
+    dayjs: "YYYY/MM/DD"
 
 # categories page
 categories:

_data/locales/my-MM.yml

@@ -40,7 +40,7 @@ copyright:
     အခြားမှတ်သားထားချက်များမှလွဲ၍ ဤဆိုက်ရှိ ဘလော့ဂ်ပို့စ်များသည် စာရေးသူ၏
     Creative Commons Attribution 4.0 International (CC BY 4.0) အောက်တွင် လိုင်စင်ရထားပါသည်။
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
@@ -70,8 +70,6 @@ post:
     share_link:
       title: လင့်ခ်ကို ကူးယူရန်
       succeed: လင့်ခ်ကို ကူးယူလိုက်ပြီ။
-  # pinned prompt of posts list on homepage
-  pin_prompt: ချိတ်ထားသည်။
 
 # categories page
 categories:

_data/locales/pt-BR.yml

@@ -40,7 +40,7 @@ copyright:
     Exceto onde indicado de outra forma, as postagens do blog neste site são licenciadas sob a
     Creative Commons Attribution 4.0 International (CC BY 4.0) License pelo autor.
 
-meta: Feito com :PLATFORM usando o tema :THEME.
+meta: Feito com :PLATFORM usando o tema :THEME
 
 not_found:
   statment: Desculpe, a página não foi encontrada.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Copie o link
       succeed: Link copiado com sucesso!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Fixado
 
 # categories page
 categories:

_data/locales/ru-RU.yml

@@ -40,7 +40,7 @@ copyright:
     Публикации на сайте защищены лицензией Creative Commons Attribution 4.0 International (CC BY 4.0),
     если в тексте публикации не указано иное.
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: Извините, эта ссылка указывает на ресурс который не существует.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Скопировать ссылку
       succeed: Ссылка успешно скопирована!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Закреплено
 
 # categories page
 categories:

_data/locales/tr-TR.yml

@@ -40,7 +40,7 @@ copyright:
     Aksi belirtilmediği sürece, bu sitedeki gönderiler Creative Commons Atıf 4.0 Uluslararası (CC BY 4.0) Lisansı altındadır.
     Kısaca sayfa linkini de vererek paylaşabilir veya düzenleyip paylaşabilirsin.
 
-meta: :PLATFORM ve :THEME teması.
+meta: :PLATFORM ve :THEME teması
 
 not_found:
   statment: Üzgünüz, bu linki yanlış yerleştirdik veya var olmayan bir şeye işaret ediyor.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Linki kopyala
       succeed: Link kopyalandı.
-  # pinned prompt of posts list on homepage
-  pin_prompt: Sabitlendi
 
 # categories page
 categories:

_data/locales/uk-UA.yml

@@ -40,7 +40,7 @@ copyright:
     Публікації на сайті захищено ліцензією Creative Commons Attribution 4.0 International (CC BY 4.0),
     якщо інше не вказано в тексті.
 
-meta: Powered by :PLATFORM with :THEME theme.
+meta: Powered by :PLATFORM with :THEME theme
 
 not_found:
   statment: Вибачте, це посилання вказує на ресурс, що не існує.
@@ -70,8 +70,6 @@ post:
     share_link:
       title: Скопіювати посилання
       succeed: Посилання успішно скопійовано!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Закріплено
 
 # categories page
 categories:

_data/locales/vi-VN.yml

@@ -38,7 +38,8 @@ copyright:
   brief: Một số quyền được bảo lưu.
   verbose: >-
     Trừ khi có ghi chú khác, các bài viết đăng trên trang này được cấp phép bởi tác giả theo giấy phép Creative Commons Attribution 4.0 International (CC BY 4.0).
-meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME.
+
+meta: Trang web này được tạo bởi :PLATFORM với chủ đề :THEME
 
 not_found:
   statment: Xin lỗi, chúng tôi đã đặt nhầm URL hoặc đường dẫn trỏ đến một trang nào đó không tồn tại.
@@ -68,8 +69,6 @@ post:
     share_link:
       title: Sao chép đường dẫn
       succeed: Đã sao chép đường dẫn thành công!
-  # pinned prompt of posts list on homepage
-  pin_prompt: Bài ghim
 
 # categories page
 categories:

_data/locales/zh-CN.yml

@@ -39,7 +39,7 @@ copyright:
   verbose: >-
     除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。
 
-meta: 本站由 :PLATFORM 生成，采用 :THEME 主题。
+meta: 本站采用 :PLATFORM 主题 :THEME
 
 not_found:
   statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
@@ -69,15 +69,13 @@ post:
     share_link:
       title: 分享链接
       succeed: 链接已复制！
-  # pinned prompt of posts list on homepage
-  pin_prompt: 顶置
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%Y/%m/%d'
+    strftime: "%Y/%m/%d"
-    dayjs: 'YYYY/MM/DD'
+    dayjs: "YYYY/MM/DD"
 
 # categories page
 categories:

_includes/datetime.html

@@ -12,7 +12,7 @@
   data-ts="{{ include.date | date: '%s' }}"
   data-df="{{ df_dayjs }}"
   {% if include.tooltip %}
-    data-toggle="tooltip" data-placement="bottom"
+    data-bs-toggle="tooltip" data-bs-placement="bottom"
   {% endif %}
 >
   {{ include.date | date: df_strftime }}

_includes/footer.html

@@ -1,26 +1,9 @@
 <!-- The Footer -->
 
 <footer>
-  <div class="container pl-lg-4 pr-lg-4">
+  <div class="container px-lg-4">
-    <div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
+    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
-      <div class="footer-left">
+      <p>
-        <p class="mb-0">
-          © {{ 'now' | date: '%Y' }}
-          <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-          {% if site.data.locales[include.lang].copyright.brief %}
-            <span
-              data-toggle="tooltip"
-              data-placement="top"
-              title="{{ site.data.locales[include.lang].copyright.verbose }}"
-            >
-              {{- site.data.locales[include.lang].copyright.brief -}}
-            </span>
-          {% endif %}
-        </p>
-      </div>
-
-      <div class="footer-right">
-        <p class="mb-0">
         {%- capture _platform -%}
           <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
         {%- endcapture -%}
@@ -29,14 +12,23 @@
           <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
         {%- endcapture -%}
 
-          {{
+        {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
-            site.data.locales[include.lang].meta
+      </p>
-            | default: 'Using the :PLATFORM theme :THEME.'
+
-            | replace: ':PLATFORM', _platform
+      <p>
-            | replace: ':THEME', _theme
+        {{- '©' }}
-          }}
+        {{ 'now' | date: '%Y' }}
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+        {% if site.data.locales[include.lang].copyright.brief %}
+          <span
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="{{ site.data.locales[include.lang].copyright.verbose }}"
+          >
+            {{- site.data.locales[include.lang].copyright.brief -}}
+          </span>
+        {% endif %}
       </p>
     </div>
   </div>
-  </div>
 </footer>

_includes/js-selector.html

@@ -9,14 +9,17 @@
   {% endif %}
 {% endif %}
 
-{% if page.layout == 'post' or page.layout == 'page' %}
+{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
-  <!-- image lazy-loading & popup & clipboard -->
+  {% assign _urls = site.data.assets[origin].lazysizes.js %}
-  {% assign _urls = site.data.assets[origin]['magnific-popup'].js
+
+  {% unless page.layout == 'home' %}
+    {% assign _urls = _urls
       | append: ','
-    | append: site.data.assets[origin].lazysizes.js
+      | append: site.data.assets[origin]['magnific-popup'].js
       | append: ','
       | append: site.data.assets[origin].clipboard.js
     %}
+  {% endunless %}
 
   {% include jsdelivr-combine.html urls=_urls %}
 {% endif %}
@@ -43,9 +46,9 @@
 {% endif %}
 
 {% case page.layout %}
-  {% when 'categories', 'post', 'page' %}
+  {% when 'home', 'categories', 'post', 'page' %}
     {% assign type = page.layout %}
-  {% when 'home', 'archives', 'category', 'tag' %}
+  {% when 'archives', 'category', 'tag' %}
     {% assign type = 'misc' %}
   {% else %}
     {% assign type = 'commons' %}

_includes/post-paginator.html

@@ -1,13 +1,11 @@
-<!--
+<!-- The paginator for post list on HomgPage. -->
-  The paginator for post list on HomgPage.
--->
 
-<ul class="pagination align-items-center mt-4 pl-lg-2">
+<ul class="pagination align-items-center mt-4 ps-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
     {% assign prev_url = paginator.previous_page_path | relative_url %}
   {% else %}
-    {% assign prev_url = "#" %}
+    {% assign prev_url = '#' %}
   {% endif %}
 
   <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
@@ -21,7 +19,6 @@
   {% assign right_ellipsis = false %}
 
   {% for i in (1..paginator.total_pages) %}
-
     {% assign pre = paginator.page | minus: 1 %}
     {% assign next = paginator.page | plus: 1 %}
     {% assign pre_less = pre | minus: 1 %}
@@ -47,7 +44,12 @@
     {% if show %}
       <!-- show number -->
       <li class="page-item {% if i == paginator.page %} active{% endif %}">
-        <a class="page-link btn-box-shadow" href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}">{{ i }}</a>
+        <a
+          class="page-link btn-box-shadow"
+          href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}"
+        >
+          {{- i -}}
+        </a>
       </li>
     {% else %}
       <!-- hide number -->
@@ -63,7 +65,6 @@
         {% assign right_ellipsis = true %}
       {% endif %}
     {% endif %}
-
   {% endfor %}
 
   <!-- mobile pagination -->
@@ -76,7 +77,7 @@
   {% if paginator.next_page_path %}
     {% assign next_url = paginator.next_page_path | relative_url %}
   {% else %}
-    {% assign next_url = "#" %}
+    {% assign next_url = '#' %}
   {% endif %}
 
   <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
@@ -84,5 +85,5 @@
       <i class="fas fa-angle-right"></i>
     </a>
   </li>
-
+</ul>
-</ul> <!-- .pagination -->
+<!-- .pagination -->

_includes/post-sharing.html

@@ -1,7 +1,7 @@
 <!-- Post sharing snippet -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.locales[include.lang].post.share }}</span>
+  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign title = title | uri_escape %}
@@ -11,8 +11,8 @@
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
       <a
         href="{{ link }}"
-        data-toggle="tooltip"
+        data-bs-toggle="tooltip"
-        data-placement="top"
+        data-bs-placement="top"
         title="{{ share.type }}"
         target="_blank"
         rel="noopener"
@@ -25,8 +25,8 @@
     <i
       id="copy-link"
       class="fa-fw fas fa-link small"
-      data-toggle="tooltip"
+      data-bs-toggle="tooltip"
-      data-placement="top"
+      data-bs-placement="top"
       title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
       data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
     >

_includes/read-time.html

@@ -20,8 +20,8 @@
 <!-- return element -->
 <span
   class="readtime"
-  data-toggle="tooltip"
+  data-bs-toggle="tooltip"
-  data-placement="bottom"
+  data-bs-placement="bottom"
   title="{{ words }} {{ site.data.locales[include.lang].post.words }}"
 >
   <em>

_includes/refactor-content.html

@@ -45,9 +45,8 @@
 
 <!-- images -->
 
+{% if _content contains '<img' %}
   {% assign IMG_TAG = '<img ' %}
-
-{% if _content contains IMG_TAG %}
   {% assign _img_content = nil %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
@@ -161,6 +160,7 @@
     <!-- Bypass the HTML-proofer test -->
     {% assign _left = _left | append: ' data-proofer-ignore' %}
 
+    {% if page.layout == 'post' %}
       <!-- make sure the `<img>` is wrapped by `<a>` -->
       {% assign _parent = _right | slice: 1, 4 %}
 
@@ -171,7 +171,6 @@
           class="img-link{% unless _lqip %} shimmer{% endunless %}"
         {% endcapture %}
         {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
-
       {% else %}
         <!-- create the image wrapper -->
         {%- capture _wrapper_start -%}
@@ -181,8 +180,19 @@
         {% assign _right = _right | prepend: '></a' %}
       {% endif %}
 
+    {% endif %}
+
+    {% if page.layout == 'home' %}
+      <!-- create the image wrapper -->
+      {%- capture _wrapper_start -%}
+        <div class="preview-img {{ _class | strip }}">
+      {%- endcapture -%}
+      {% assign _img_content = _img_content | append: _wrapper_start %}
+      {% assign _right = _right | prepend: '></div' %}
+    {% endif %}
+
     <!-- combine -->
-    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
+    {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
@@ -209,11 +219,11 @@
 
       {% if _left contains 'file="' %}
         {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
-        {% assign _label_icon = 'far fa-file-code' %}
+        {% assign _label_icon = 'far fa-file-code fa-fw' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
         {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
-        {% assign _label_icon = 'fas fa-code small' %}
+        {% assign _label_icon = 'fas fa-code fa-fw small' %}
       {% endif %}
 
       {% capture _label %}
@@ -261,7 +271,7 @@
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
-      {% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}
+      {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
 
       {% assign _new_content = _new_content | append: mark_start
           | append: left | append: anchor | append: right
@@ -277,5 +287,4 @@
 {% assign _content = _heading_content %}
 
 <!-- return -->
-
 {{ _content }}

_includes/related-posts.html

@@ -75,21 +75,18 @@
 
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mb-2 mb-sm-4">
-    <h3
+    <h3 class="pt-2 mb-4 ms-1" data-toc-skip>
-      class="pt-2 mb-4 ml-1"
-      data-toc-skip
-    >
       {{ site.data.locales[include.lang].post.relate_posts }}
     </h3>
-    <div class="card-deck mb-4">
+    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
       {% for entry in index_list %}
         {% assign index = entry | plus: 0 %}
         {% assign post = site.posts[index] %}
-        <div class="card">
+        <div class="col">
-          <a href="{{ post.url | relative_url }}">
+          <a href="{{ post.url | relative_url }}" class="card post-preview h-100">
             <div class="card-body">
               {% include datetime.html date=post.date class="small" lang=include.lang %}
-              <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
+              <h3 class="pt-0 my-2" data-toc-skip>{{ post.title }}</h3>
               <div class="text-muted small">
                 <p>
                   {% include no-linenos.html content=post.content %}

_includes/search-loader.html

@@ -4,7 +4,7 @@
 -->
 
 {% capture result_elem %}
-<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
+<div class="px-1 px-sm-2 px-lg-4 px-xl-0">
   <a href="{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
     {categories}
@@ -19,6 +19,7 @@
 <script src="{{ site.data.assets[origin].search.js | relative_url }}"></script>
 
 <script>
+  
 SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('search-results'),
@@ -30,7 +31,7 @@ SimpleJekyllSearch({
       if (value === '') {
         return `${value}`;
       } else {
-        return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+        return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
       }
     }
 
@@ -43,4 +44,5 @@ SimpleJekyllSearch({
     }
   }
 });
+
 </script>

_includes/search-results.html

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

_includes/sidebar.html

@@ -1,9 +1,8 @@
 <!-- The Side Bar -->
 
 <div id="sidebar" class="d-flex flex-column align-items-end">
-  <div class="profile-wrapper text-center">
+  <div class="profile-wrapper">
-    <div id="avatar">
+    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
-      <a href="{{ '/' | relative_url }}" class="mx-auto">
       {% if site.avatar != empty and site.avatar %}
         {% capture avatar_url %}
             {% if site.avatar contains '://' %}
@@ -14,23 +13,22 @@
               {{ site.avatar | relative_url }}
             {% endif %}
           {% endcapture %}
-          <img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
+        <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
       {% endif %}
     </a>
-    </div>
 
     <div class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
     </div>
-    <div class="site-subtitle font-italic">{{ site.tagline }}</div>
+    <div class="site-subtitle fst-italic">{{ site.tagline }}</div>
   </div>
   <!-- .profile-wrapper -->
 
-  <ul class="w-100">
+  <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 ml-xl-3 mr-xl-3 unloaded"></i>
+        <i class="fa-fw fas fa-home"></i>
         <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
       </a>
     </li>
@@ -38,7 +36,7 @@
     {% 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 }} ml-xl-3 mr-xl-3 unloaded"></i>
+          <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>
@@ -49,7 +47,7 @@
   </ul>
   <!-- ul.nav.flex-column -->
 
-  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
+  <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">
         <i class="fas fa-adjust"></i>

_includes/toc.html

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

_includes/topbar.html

@@ -1,7 +1,10 @@
 <!-- The Top Bar -->
 
 <div id="topbar-wrapper">
-  <div id="topbar" class="container d-flex align-items-center justify-content-between h-100 pl-3 pr-3 pl-md-4 pr-md-4">
+  <div
+    id="topbar"
+    class="container d-flex align-items-center justify-content-between h-100 px-3 px-md-4 px-xxl-5"
+  >
     <span id="breadcrumb">
       {% assign paths = page.url | split: '/' %}
 

_includes/trending-tags.html

@@ -1,6 +1,4 @@
-{% comment %}
+<!-- The trending tags list -->
-  The trending tags list
-{% endcomment %}
 
 {% assign MAX = 10 %}
 
@@ -38,10 +36,10 @@
 {% if trending_tags.size > 0 %}
   <div id="access-tags">
     <div class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</div>
-    <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
+    <div class="d-flex flex-wrap mt-3 mb-1 me-3">
       {% for tag_name in trending_tags %}
         {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
+        <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
     </div>
   </div>

_includes/update-list.html

@@ -26,7 +26,7 @@
 {% if update_list.size > 0 %}
   <div id="access-lastmod" class="post">
     <div class="panel-heading">{{- site.data.locales[include.lang].panel.lastmod -}}</div>
-    <ul class="post-content pl-0 pb-1 ml-1 mt-2">
+    <ul class="post-content ps-0 pb-1 ms-1 mt-2">
       {% for item in update_list %}
         {% assign index = item | split: '::' | last | plus: 0 %}
         {% assign post = site.posts[index] %}

_javascript/home.js

@@ -0,0 +1,8 @@
+import { basic, initSidebar, initTopbar } from './modules/layouts';
+import { initLocaleDatetime, imgLazy } from './modules/plugins';
+
+basic();
+initSidebar();
+initTopbar();
+initLocaleDatetime();
+imgLazy();

_javascript/modules/components/back-to-top.js

@@ -15,12 +15,6 @@ export function back2top() {
   });
 
   $('#back-to-top').on('click', () => {
-    $('body,html').animate(
+    window.scrollTo(0, 0);
-      {
-        scrollTop: 0
-      },
-      800
-    );
-    return false;
   });
 }

_javascript/modules/components/clipboard.js

@@ -6,11 +6,11 @@
  *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
  */
 
-const btnSelector = '.code-header>button';
+const clipboardSelector = '.code-header>button';
 const ICON_SUCCESS = 'fas fa-check';
 const ATTR_TIMEOUT = 'timeout';
 const ATTR_TITLE_SUCCEED = 'data-title-succeed';
-const ATTR_TITLE_ORIGIN = 'data-original-title';
+const ATTR_TITLE_ORIGIN = 'data-bs-original-title';
 const TIMEOUT = 2000; // in milliseconds
 
 function isLocked(node) {
@@ -36,7 +36,7 @@ function getIcon(btn) {
   return iconNode.attr('class');
 }
 
-const ICON_DEFAULT = getIcon(btnSelector);
+const ICON_DEFAULT = getIcon(clipboardSelector);
 
 function showTooltip(btn) {
   const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
@@ -61,17 +61,21 @@ function resumeIcon(btn) {
 
 export function initClipboard() {
   // Initial the clipboard.js object
-  const clipboard = new ClipboardJS(btnSelector, {
+  if ($(clipboardSelector).length) {
+    const clipboard = new ClipboardJS(clipboardSelector, {
       target(trigger) {
         let codeBlock = trigger.parentNode.nextElementSibling;
         return codeBlock.querySelector('code .rouge-code');
       }
     });
 
-  $(btnSelector).tooltip({
+    const clipboardList = document.querySelectorAll(clipboardSelector);
-    trigger: 'hover',
+    [...clipboardList].map(
+      (elem) =>
+        new bootstrap.Tooltip(elem, {
           placement: 'left'
-  });
+        })
+    );
 
     clipboard.on('success', (e) => {
       e.clearSelection();
@@ -91,6 +95,7 @@ export function initClipboard() {
         unlock(trigger);
       }, TIMEOUT);
     });
+  }
 
   /* --- Post link sharing --- */
 

_javascript/modules/components/convert-title.js

@@ -62,7 +62,5 @@ export function convertTitle() {
   observer.observe(document.querySelector(titleSelector));
 
   /* Click title will scroll to top */
-  $topbarTitle.on('click', function () {
+  $topbarTitle.on('click', () => window.scrollTo(0, 0));
-    $('body,html').animate({ scrollTop: 0 }, 800);
-  });
 }

_javascript/modules/components/img-extra.js

@@ -1,27 +0,0 @@
-/**
- * Set up image stuff
- */
-
-export function imgExtra() {
-  if ($('#core-wrapper img[data-src]') <= 0) {
-    return;
-  }
-
-  /* See: <https://github.com/dimsemenov/Magnific-Popup> */
-  $('.popup').magnificPopup({
-    type: 'image',
-    closeOnContentClick: true,
-    showCloseBtn: false,
-    zoom: {
-      enabled: true,
-      duration: 300,
-      easing: 'ease-in-out'
-    }
-  });
-
-  /* Stop shimmer when image loaded */
-  document.addEventListener('lazyloaded', function (e) {
-    const $img = $(e.target);
-    $img.parent().removeClass('shimmer');
-  });
-}

_javascript/modules/components/img-lazyload.js

@@ -0,0 +1,15 @@
+/**
+ * Set up image lazy-load
+ */
+
+export function imgLazy() {
+  if ($('#core-wrapper img[data-src]') <= 0) {
+    return;
+  }
+
+  /* Stop shimmer when image loaded */
+  document.addEventListener('lazyloaded', function (e) {
+    const $img = $(e.target);
+    $img.parent().removeClass('shimmer');
+  });
+}

_javascript/modules/components/img-popup.js

@@ -0,0 +1,22 @@
+/**
+ * Set up image popup
+ *
+ * See: https://github.com/dimsemenov/Magnific-Popup
+ */
+
+export function imgPopup() {
+  if ($('.popup') <= 0) {
+    return;
+  }
+
+  $('.popup').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    showCloseBtn: false,
+    zoom: {
+      enabled: true,
+      duration: 300,
+      easing: 'ease-in-out'
+    }
+  });
+}

_javascript/modules/components/locale-datetime.js

@@ -39,12 +39,13 @@ export function initLocaleDatetime() {
     $(this).removeAttr(LocaleHelper.attrDateFormat);
 
     // setup tooltips
-    const tooltip = $(this).attr('data-toggle');
+    const tooltip = $(this).attr('data-bs-toggle');
     if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
       return;
     }
 
     const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
-    $(this).attr('data-original-title', tooltipText);
+    $(this).attr('data-bs-title', tooltipText);
+    new bootstrap.Tooltip($(this));
   });
 }

_javascript/modules/components/pageviews.js

@@ -174,13 +174,7 @@ function displayPageviews(data) {
   let hasInit = getInitStatus();
   const rows = data.rows; /* could be undefined */
 
-  if ($('#post-list').length > 0) {
+  if ($('.post').length > 0) {
-    /* the Home page */
-    $('.post-preview').each(function () {
-      const path = $(this).find('a').attr('href');
-      tacklePV(rows, path, $(this).find('.pageviews'), hasInit);
-    });
-  } else if ($('.post').length > 0) {
     /* the post */
     const path = window.location.pathname;
     tacklePV(rows, path, $('#pv'), hasInit);

_javascript/modules/components/smooth-scroll.js

@@ -1,109 +0,0 @@
-/**
- Safari doesn't support CSS `scroll-behavior: smooth`,
- so here is a compatible solution for all browser to smooth scrolling
-
- See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
-
- Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
- */
-import ScrollHelper from './utils/scroll-helper';
-
-export function smoothScroll() {
-  const $topbarTitle = $('#topbar-title');
-  const REM = 16; // in pixels
-  const ATTR_SCROLL_FOCUS = 'scroll-focus';
-  const SCOPE = "a[href*='#']:not([href='#']):not([href='#0'])";
-
-  $(SCOPE).on('click', function (event) {
-    if (
-      this.pathname.replace(/^\//, '') !== location.pathname.replace(/^\//, '')
-    ) {
-      return;
-    }
-
-    if (location.hostname !== this.hostname) {
-      return;
-    }
-
-    const hash = decodeURI(this.hash);
-    let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
-    let toFootnote = toFootnoteRef ? false : RegExp(/^#fn:/).test(hash);
-    let selector = '#' + $.escapeSelector(hash.substring(1));
-    let $target = $(selector);
-
-    let isMobileViews = $topbarTitle.is(':visible');
-    let isPortrait = $(window).width() < $(window).height();
-
-    if (typeof $target === 'undefined') {
-      return;
-    }
-
-    event.preventDefault();
-
-    if (history.pushState) {
-      /* add hash to URL */
-      history.pushState(null, null, hash);
-    }
-
-    let curOffset = $(window).scrollTop();
-    let destOffset = ($target.offset().top -= REM / 2);
-
-    if (destOffset < curOffset) {
-      // scroll up
-      ScrollHelper.hideTopbar();
-      ScrollHelper.addScrollUpTask();
-
-      if (isMobileViews && isPortrait) {
-        destOffset -= ScrollHelper.getTopbarHeight();
-      }
-    } else {
-      // scroll down
-      if (isMobileViews && isPortrait) {
-        destOffset -= ScrollHelper.getTopbarHeight();
-      }
-    }
-
-    $('html').animate(
-      {
-        scrollTop: destOffset
-      },
-      500,
-      () => {
-        $target.trigger('focus');
-
-        /* clean up old scroll mark */
-        const $scroll_focus = $(`[${ATTR_SCROLL_FOCUS}=true]`);
-        if ($scroll_focus.length) {
-          $scroll_focus.attr(ATTR_SCROLL_FOCUS, 'false');
-        }
-
-        /* Clean :target links */
-        const $target_links = $(':target');
-        if ($target_links.length) {
-          /* element that visited by the URL with hash */
-          $target_links.attr(ATTR_SCROLL_FOCUS, 'false');
-        }
-
-        /* set scroll mark to footnotes */
-        if (toFootnote || toFootnoteRef) {
-          $target.attr(ATTR_SCROLL_FOCUS, 'true');
-        }
-
-        if ($target.is(':focus')) {
-          /* Checking if the target was focused */
-          return false;
-        } else {
-          $target.attr(
-            'tabindex',
-            '-1'
-          ); /* Adding tabindex for elements not focusable */
-          $target.trigger('focus'); /* Set focus again */
-        }
-
-        if (ScrollHelper.hasScrollUpTask()) {
-          ScrollHelper.popScrollUpTask();
-        }
-      }
-    );
-  }); /* click() */
-}

_javascript/modules/components/tooltip-loader.js

@@ -2,5 +2,11 @@
  * Initial Bootstrap Tooltip.
  */
 export function loadTooptip() {
-  $('[data-toggle="tooltip"]').tooltip();
+  const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]'
+  );
+
+  [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+  );
 }

_javascript/modules/plugins.js

@@ -1,7 +1,7 @@
 export { categoryCollapse } from './components/category-collapse';
 export { initClipboard } from './components/clipboard';
-export { imgExtra } from './components/img-extra';
+export { imgLazy } from './components/img-lazyload';
+export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
 export { initPageviews } from './components/pageviews';
-export { smoothScroll } from './components/smooth-scroll';
 export { toc } from './components/toc';

_javascript/page.js

@@ -1,9 +1,9 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
-import { imgExtra, initClipboard, smoothScroll } from './modules/plugins';
+import { imgLazy, imgPopup, initClipboard } from './modules/plugins';
 
 basic();
 initSidebar();
 initTopbar();
-imgExtra();
+imgLazy();
+imgPopup();
 initClipboard();
-smoothScroll();

_javascript/post.js

@@ -1,9 +1,9 @@
 import { basic, initSidebar, initTopbar } from './modules/layouts';
 import {
-  imgExtra,
+  imgLazy,
+  imgPopup,
   initLocaleDatetime,
   initClipboard,
-  smoothScroll,
   initPageviews,
   toc
 } from './modules/plugins';
@@ -11,9 +11,9 @@ import {
 basic();
 initSidebar();
 initTopbar();
-imgExtra();
+imgLazy();
+imgPopup();
 initLocaleDatetime();
 initClipboard();
 toc();
-smoothScroll(); // must be called after toc is created
 initPageviews();

_layouts/archives.html

@@ -23,7 +23,7 @@ layout: page
   <li>
   {% assign ts = post.date | date: '%s' %}
     <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-    <span class="date month small text-muted ml-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
+    <span class="date month small text-muted ms-1" data-ts="{{ ts }}" data-df="{{ df_dayjs_m }}">
       {{ post.date | date: df_strftime_m }}
     </span>
     <a href="{{ post.url | relative_url }}">{{ post.title }}</a>

_layouts/categories.html

@@ -38,11 +38,11 @@ layout: page
         id="{{ HEAD_PREFIX }}{{ group_index }}"
         class="card-header d-flex justify-content-between hide-border-bottom"
       >
-        <span>
+        <span class="ms-2">
           <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i>
 
           {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %}
-          <a href="{{ _category_url | relative_url }}" class="ml-1 mr-2">{{ category_name }}</a>
+          <a href="{{ _category_url | relative_url }}" class="mx-2">{{ category_name }}</a>
 
           <!-- content count -->
           {% assign top_posts_size = site.categories[category_name] | size %}
@@ -83,7 +83,7 @@ layout: page
         {% if sub_categories_size > 0 %}
           <a
             href="#{{ LIST_PREFIX }}{{ group_index }}"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
             aria-expanded="true"
             aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
             class="category-trigger hide-border-bottom"
@@ -91,7 +91,7 @@ layout: page
             <i class="fas fa-fw fa-angle-down"></i>
           </a>
         {% else %}
-          <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
+          <span data-bs-toggle="collapse" class="category-trigger hide-border-bottom disabled">
             <i class="fas fa-fw fa-angle-right"></i>
           </span>
         {% endif %}
@@ -107,7 +107,7 @@ layout: page
                 <i class="far fa-folder fa-fw"></i>
 
                 {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %}
-                <a href="{{ _sub_ctg_url | relative_url }}" class="ml-1 mr-2">{{ sub_category }}</a>
+                <a href="{{ _sub_ctg_url | relative_url }}" class="mx-2">{{ sub_category }}</a>
 
                 {% assign posts_size = site.categories[sub_category] | size %}
                 <span class="text-muted small font-weight-light">

_layouts/category.html

@@ -6,15 +6,15 @@ layout: page
 {% include lang.html %}
 
 <div id="page-category">
-  <h1 class="pl-lg-2">
+  <h1 class="ps-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
     {{ page.title }}
-    <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
+    <span class="lead text-muted ps-2">{{ page.posts | size }}</span>
   </h1>
 
-  <ul class="post-content pl-0">
+  <ul class="post-content ps-0">
     {% for post in page.posts %}
-      <li class="d-flex justify-content-between pl-md-3 pr-md-3">
+      <li class="d-flex justify-content-between px-md-3">
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
         <span class="dash flex-grow-1"></span>
         {% include datetime.html date=post.date wrap='span' class='text-muted small' lang=lang %}

_layouts/default.html

@@ -25,7 +25,7 @@ layout: compress
     {% include topbar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div id="main" class="container pl-xl-4 pr-xl-4">
+      <div id="main" class="container px-xxl-5">
         {{ content }}
       </div>
 
@@ -52,16 +52,19 @@ layout: compress
         role="alert"
         aria-live="assertive"
         aria-atomic="true"
-        data-animation="true"
+        data-bs-animation="true"
-        data-autohide="false"
+        data-bs-autohide="false"
       >
         <div class="toast-header">
-          <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
+          <button
-            <span aria-hidden="true">&times;</span>
+            type="button"
-          </button>
+            class="btn-close ms-auto"
+            data-bs-dismiss="toast"
+            aria-label="Close"
+          ></button>
         </div>
         <div class="toast-body text-center pt-0">
-          <p class="pl-2 pr-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
+          <p class="px-2 mb-3">{{ site.data.locales[lang].notification.update_found }}</p>
           <button type="button" class="btn btn-primary" aria-label="Update">
             {{ site.data.locales[lang].notification.update }}
           </button>

_layouts/home.html

@@ -1,6 +1,6 @@
 ---
 layout: page
-# The Home page layout
+refactor: true
 ---
 
 {% include lang.html %}
@@ -42,30 +42,37 @@ layout: page
 
 <div id="post-list">
   {% for post in posts %}
-    <div class="card post-preview">
+    <a href="{{ post.url | relative_url }}" class="card-wrapper">
-      <a href="{{ post.url | relative_url }}">
+      <div class="card post-preview flex-md-row-reverse">
-        <div class="card-body">
+        {% if post.image %}
-          <h1 class="card-title">
+          {% if post.image.lqip %}
+            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+          {% endif %}
+          <img src="{{ post.image.path | default: post.image }}" w="15" h="8" {{ lqip }}>
+        {% endif %}
+
+        <div class="card-body d-flex flex-column">
+          <h1 class="card-title my-2 mt-md-0">
             {{ post.title }}
           </h1>
 
-          <div class="card-text post-content">
+          <div class="card-text post-content mt-0 mb-2">
             <p>
               {% include no-linenos.html content=post.content %}
               {{ content | markdownify | strip_html | truncate: 200 | escape }}
             </p>
           </div>
 
-          <div class="post-meta text-muted d-flex">
+          <div class="post-meta flex-grow-1 d-flex align-items-end">
-            <div class="mr-auto">
+            <div class="me-auto">
               <!-- posted date -->
-              <i class="far fa-calendar fa-fw"></i>
+              <i class="far fa-calendar fa-fw me-1"></i>
               {% include datetime.html date=post.date lang=lang %}
 
               <!-- categories -->
               {% if post.categories.size > 0 %}
-                <i class="far fa-folder-open fa-fw"></i>
+                <i class="far fa-folder-open fa-fw me-1"></i>
-                <span>
+                <span class="categories">
                   {% for category in post.categories %}
                     {{ category }}
                     {%- unless forloop.last -%},{%- endunless -%}
@@ -75,7 +82,7 @@ layout: page
             </div>
 
             {% if post.pin %}
-              <div class="pin">
+              <div class="pin ms-1">
                 <i class="fas fa-thumbtack fa-fw"></i>
                 <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
               </div>
@@ -83,13 +90,13 @@ layout: page
           </div>
           <!-- .post-meta -->
         </div>
-      </a>
+        <!-- .card-body -->
       </div>
-    <!-- .post-review -->
+    </a>
   {% endfor %}
 </div>
 <!-- #post-list -->
 
-{% if paginator.total_pages > 0 %}
+{% if paginator.total_pages > 1 %}
   {% include post-paginator.html %}
 {% endif %}

_layouts/page.html

@@ -2,14 +2,17 @@
 layout: default
 ---
 
-{% include assets-origin.html %}
-
 {% include lang.html %}
+{% include assets-origin.html %}
 
 <div class="row">
   <!-- core -->
-  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
+  <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
-    <div class="post pl-1 pr-1 pl-md-2 pr-md-2">
+    {% capture padding %}
+      {% unless page.layout == 'home' %}px-1{% endunless %}
+    {% endcapture %}
+
+    <div class="post {{ padding | strip }} px-md-2">
       {% capture _content %}
       {% if layout.refactor or page.layout == 'page' %}
         {% include refactor-content.html content=content lang=lang %}
@@ -35,7 +38,7 @@ layout: default
   <!-- #core-wrapper -->
 
   <!-- panel -->
-  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
+  <div id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
     <div class="access">
       {% include update-list.html lang=lang %}
       {% include trending-tags.html lang=lang %}
@@ -51,7 +54,7 @@ layout: default
 <!-- tail -->
 {% if layout.tail_includes %}
   <div class="row">
-    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 pl-3 pr-3 pr-xl-4 mt-5">
+    <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-3 pe-xl-4 mt-5">
       {% for _include in layout.tail_includes %}
         {% assign _include_path = _include | append: '.html' %}
         {% include {{ _include_path }} lang=lang %}

_layouts/post.html

@@ -98,7 +98,7 @@ tail_includes:
   <!-- categories -->
   {% if page.categories.size > 0 %}
   <div class="post-meta mb-3">
-    <i class="far fa-folder-open fa-fw mr-1"></i>
+    <i class="far fa-folder-open fa-fw me-1"></i>
     {% for category in page.categories %}
       <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
       {%- unless forloop.last -%}, {%- endunless -%}
@@ -109,7 +109,7 @@ tail_includes:
   <!-- tags -->
   {% if page.tags.size > 0 %}
   <div class="post-tags">
-    <i class="fa fa-tags fa-fw mr-1"></i>
+    <i class="fa fa-tags fa-fw me-1"></i>
       {% for tag in page.tags %}
       <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
           class="post-tag no-text-decoration" >

_layouts/tag.html

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

_layouts/tags.html

@@ -3,9 +3,8 @@ layout: page
 # All the Tags of posts.
 ---
 
-<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
+<div id="tags" class="d-flex flex-wrap mx-xl-2">
-
+  {% assign tags = '' | split: '' %}
-  {% assign tags = "" | split: "" %}
   {% for t in site.tags %}
     {% assign tags = tags | push: t[0] %}
   {% endfor %}
@@ -15,9 +14,9 @@ layout: page
   {% for t in sorted_tags %}
     <div>
       <a class="tag" href="{{ t | slugify | url_encode | prepend: '/tags/' | append: '/' | relative_url }}">
-        {{ t }}<span class="text-muted">{{ site.tags[t].size }}</span>
+        {{ t -}}
+        <span class="text-muted">{{ site.tags[t].size }}</span>
       </a>
     </div>
   {% endfor %}
-
 </div>

_sass/addon/commons.scss

@@ -35,7 +35,6 @@ body {
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
   font-family: $font-family-base;
-  line-height: 1.75;
 }
 
 /* --- Typography --- */
@@ -80,18 +79,16 @@ h5 {
 
 a {
   @extend %link-color;
+
+  text-decoration: none;
 }
 
 img {
   max-width: 100%;
   height: auto;
+  transition: all 0.35s ease-in-out;
 
   &[data-src] {
-    &.lazyloaded {
-      -webkit-animation: fade-in 0.4s ease-in;
-      animation: fade-in 0.4s ease-in;
-    }
-
     &[data-lqip='true'] {
       &.lazyload,
       &.lazyloading {
@@ -105,6 +102,11 @@ img {
       &.lazyloading {
         background: var(--img-bg);
       }
+
+      &.lazyloaded {
+        -webkit-animation: fade-in 0.35s ease-in;
+        animation: fade-in 0.35s ease-in;
+      }
     }
 
     &.shadow {
@@ -194,27 +196,21 @@ footer {
     line-height: 1.2rem;
     padding-bottom: 1rem;
     border-top: 1px solid var(--main-border-color);
-
+    flex-wrap: wrap;
-    > div {
-      width: 350px;
-    }
   }
 
   a {
     @extend %text-color;
 
-    &:link {
-      @include no-text-decoration;
-    }
-
     &:hover {
       @extend %link-hover;
-      @include no-text-decoration;
     }
   }
 
-  .footer-right {
+  p {
-    text-align: right;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0;
   }
 }
 
@@ -260,25 +256,20 @@ i {
   }
 
   .post-tag {
-    display: inline-block;
+    line-height: 1.05rem;
-    line-height: 1rem;
     font-size: 0.85rem;
-    background: none;
     border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
     padding: 0.3rem 0.5rem;
     margin: 0 0.35rem 0.5rem 0;
 
     &:hover {
-      background-color: #2a408e;
+      transition: all 0.3s ease-in;
-      border-color: #2a408e;
-      color: #ffffff;
-      transition: none;
     }
   }
 
   [data-topbar-visible='true'] & > div {
-    top: 6rem;
+    top: 5.5rem;
   }
 }
 
@@ -400,9 +391,35 @@ i {
 
 /* --- post --- */
 
+.post-preview {
+  @extend %rounded;
+
+  border: 0;
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
+
+  &::before {
+    @extend %rounded;
+
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: var(--card-hovor-bg);
+    opacity: 0;
+    transition: opacity 0.35s ease-in-out;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 0.3;
+    }
+  }
+}
+
 .post {
   h1 {
-    margin-top: 3rem;
+    margin-top: 2rem;
     margin-bottom: 1.5rem;
   }
 
@@ -422,7 +439,6 @@ i {
 
 .post-meta {
   font-size: 0.85rem;
-  word-spacing: 1px;
 
   a {
     &:not([class]):hover {
@@ -513,6 +529,10 @@ i {
   dl > dd {
     margin-left: 1rem;
   }
+
+  ::marker {
+    color: var(--text-muted-color);
+  }
 } /* .post-content */
 
 .tag:hover {
@@ -523,7 +543,6 @@ i {
   display: inline-block;
   min-width: 2rem;
   text-align: center;
-  background: var(--tag-bg);
   border-radius: 0.3rem;
   padding: 0 0.4rem;
   color: inherit;
@@ -532,14 +551,6 @@ i {
   &:not(:last-child) {
     margin-right: 0.2rem;
   }
-
-  &:hover {
-    @extend %tag-hover;
-
-    border-bottom: none;
-    text-decoration: none;
-    color: #d2603a;
-  }
 }
 
 .rounded-10 {
@@ -549,7 +560,6 @@ i {
 .img-link {
   color: transparent;
   display: inline-flex;
-  overflow: hidden;
 }
 
 .shimmer {
@@ -569,22 +579,18 @@ i {
 
   @-webkit-keyframes shimmer {
     0% {
-      -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
     }
     100% {
-      -webkit-transform: translateX(100%);
       transform: translateX(100%);
     }
   }
 
   @keyframes shimmer {
     0% {
-      -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
     }
     100% {
-      -webkit-transform: translateX(100%);
       transform: translateX(100%);
     }
   }
@@ -648,17 +654,25 @@ i {
   box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
 }
 
-.no-text-decoration {
+/* overwrite bootstrap muted */
-  @include no-text-decoration;
+.text-muted {
+  color: var(--text-muted-color) !important;
 }
 
-/* Overrided BS4 Tooltip */
+/* Overwrite bootstrap tooltip */
 .tooltip-inner {
   font-size: 0.7rem;
   max-width: 220px;
   text-align: left;
 }
 
+/* Overwrite bootstrap outline button */
+.btn.btn-outline-primary {
+  &:not(.disabled):hover {
+    border-color: #007bff !important;
+  }
+}
+
 .disabled {
   color: rgb(206, 196, 196);
   pointer-events: auto;
@@ -709,6 +723,9 @@ mjx-container {
 /* --- sidebar layout --- */
 
 $sidebar-display: 'sidebar-display';
+$btn-gap: 0.8rem; // for the bottom icons
+$btn-border-width: 3px;
+$btn-mb: 0.5rem;
 
 #sidebar {
   @include pl-pr(0);
@@ -731,202 +748,173 @@ $sidebar-display: 'sidebar-display';
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 
+  %sidebar-link-hover {
+    &:hover {
+      color: var(--sidebar-active-color);
+    }
+  }
+
   a {
     @extend %sidebar-links;
-
-    &:hover {
-      @include no-text-decoration;
-
-      color: var(--sidebar-active-color) !important;
-    }
   }
 
   #avatar {
-    > a {
     display: block;
-      width: 6rem;
+    width: 7rem;
-      height: 6rem;
+    height: 7rem;
-      border-radius: 50%;
-      border: 2px solid rgba(222, 222, 222, 0.7);
     overflow: hidden;
-      -webkit-transform: translateZ(0);
+    box-shadow: var(--avatar-border-color) 0 0 0 2px;
     transform: translateZ(0); /* fixed the zoom in Safari */
-      transition: border-color 0.35s ease-in-out;
-
-      &:hover {
-        border-color: white;
-      }
-    }
 
     img {
-      width: 100%;
-      height: 100%;
-      transition: -webkit-transform 0.5s;
       transition: transform 0.5s;
-      transition: transform 0.5s, -webkit-transform 0.5s;
 
       &:hover {
-        -webkit-transform: scale(1.2);
         transform: scale(1.2);
       }
     }
-  } /* #avatar */
+  }
+
+  .profile-wrapper {
+    @include mt-mb(2.5rem);
+    @extend %clickable-transition;
+
+    padding-left: 2.5rem;
+    padding-right: 1.25rem;
+    width: 100%;
+  }
 
   .site-title {
-    margin-top: 0.55rem;
+    font-weight: 900;
+    font-size: 1.75rem;
+    line-height: 1.2;
+    letter-spacing: 0.25px;
+    color: rgba(134, 133, 133, 0.99);
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
 
     a {
       @extend %clickable-transition;
-
+      @extend %sidebar-link-hover;
-      font-weight: 900;
-      font-size: 1.5rem;
-      letter-spacing: 0.5px;
-      color: rgba(134, 133, 133, 0.99);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
     color: var(--sidebar-muted-color);
-    line-height: 1.25rem;
+    margin-top: 0.25rem;
     word-spacing: 1px;
-    margin: 0.2rem 1.5rem 0.5rem 1.5rem;
-    min-height: 3rem; /* avoid vertical shifting in multi-line words */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
 
-  .nav-link {
+  ul {
-    border-radius: 0;
+    margin-bottom: 2rem;
-    font-size: 0.95rem;
+
+    li.nav-item {
+      opacity: 0.9;
+      width: 100%;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+
+      a.nav-link {
+        @include pt-pb(0.6rem);
+
+        display: flex;
+        align-items: center;
+        border-radius: 0.75rem;
         font-weight: 600;
-    letter-spacing: 1px;
+
-    display: table-cell;
+        &:hover {
-    vertical-align: middle;
+          background-color: var(--sidebar-hover-bg);
         }
 
-  .nav-item {
+        i {
-    text-align: center;
+          font-size: 95%;
-    display: table;
+          opacity: 0.8;
-    height: $tab-height;
+          margin-right: 1.5rem;
+        }
+
+        span {
+          font-size: 90%;
+          letter-spacing: 0.2px;
+        }
+      }
 
       &.active {
         .nav-link {
           color: var(--sidebar-active-color);
+          background-color: var(--sidebar-hover-bg);
+
+          span {
+            opacity: 1;
+          }
         }
       }
 
-    &:not(.active) > a {
+      &:not(:first-child) {
-      @extend %clickable-transition;
+        margin-top: 0.25rem;
       }
     }
-
-  ul {
-    height: $tab-height * $tab-count;
-    margin-bottom: 2rem;
-    padding-left: 0;
-
-    li {
-      width: 100%;
-
-      &:last-child {
-        a {
-          position: relative;
-          left: calc($cursor-width / 2);
-          width: 100%;
   }
 
-        /* the cursor */
-        &::after {
-          display: table;
-          visibility: hidden;
-          content: '';
-          position: relative;
-          right: 1px;
-          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;
-      visibility: visible;
-    }
-
-    @for $i from 1 through $tab-count {
-      $offset: $tab-count - $i;
-      $top: (-$offset * $tab-height) +
-        (($tab-height - $tab-cursor-height) * 0.5);
-
-      @if $i < $tab-count {
-        > li.active:nth-child(#{$i}),
-        > li.nav-item:nth-child(#{$i}):hover {
-          ~ li:last-child::after {
-            @include fix-cursor($top);
-          }
-        }
-      } @else {
-        > li.active:nth-child(#{$i}):last-child::after,
-        > li.nav-item:nth-child(#{$i}):last-child:hover::after {
-          @include fix-cursor($top);
-        }
-      }
-    } /* @for */
-  } /* ul */
-
   .sidebar-bottom {
-    margin-bottom: 2.1rem;
+    @include pl-pr(2rem);
 
-    @include ml-mr(auto);
+    margin-bottom: 1.5rem;
-    @include pl-pr(1rem);
 
-    %icon {
+    %button {
-      width: 2.4rem;
+      width: 1.75rem;
+      height: 1.75rem;
+      margin-bottom: $btn-mb; // multi line gap
+      border-radius: 50%;
+      color: var(--sidebar-btn-color);
+      background-color: var(--sidebar-btn-bg);
       text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        background-color: var(--sidebar-hover-bg);
+      }
     }
 
     a {
-      @extend %icon;
+      @extend %button;
+      @extend %sidebar-link-hover;
       @extend %clickable-transition;
+
+      &:not(:last-child) {
+        margin-right: $btn-gap;
+      }
     }
 
     i {
-      font-size: 1.2rem;
       line-height: 1.75rem;
     }
 
     .mode-toggle {
       padding: 0;
       border: 0;
-      margin-bottom: 1px;
-      background-color: transparent;
 
-      @extend %icon;
+      @extend %button;
       @extend %sidebar-links;
-
+      @extend %sidebar-link-hover;
-      > i {
-        @extend %clickable-transition;
-      }
-
-      &:hover > i {
-        color: var(--sidebar-active-color);
-      }
     }
 
     .icon-border {
       @extend %no-cursor;
+      @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
 
       background-color: var(--sidebar-muted-color);
       content: '';
-      width: 3px;
+      width: $btn-border-width;
-      height: 3px;
+      height: $btn-border-width;
       border-radius: 50%;
+      margin-bottom: $btn-mb;
     }
   } /* .sidebar-bottom */
 } /* #sidebar */
@@ -935,11 +923,14 @@ $sidebar-display: 'sidebar-display';
   #sidebar ul > li:last-child::after {
     transition: top 0.5s ease;
   }
+
+  .nav-link {
+    transition: background-color 0.3s ease-in-out;
   }
 
-.profile-wrapper {
+  .post-preview {
-  margin-top: 2rem;
+    transition: background-color 0.35s ease-in-out;
-  width: 100%;
+  }
 }
 
 #search-result-wrapper {
@@ -963,12 +954,23 @@ $sidebar-display: 'sidebar-display';
   right: 0;
   transition: top 0.2s ease-in-out;
   z-index: 50;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  background-color: var(--topbar-bg);
-  background-color: var(--topbar-wrapper-bg);
 
   [data-topbar-visible='false'] & {
     top: -$topbar-height; /* same as topbar height. */
   }
+
+  &::before {
+    $blur: 12px;
+
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: $topbar-height;
+    z-index: -1;
+    -webkit-backdrop-filter: blur($blur);
+    backdrop-filter: blur($blur);
+  }
 }
 
 #topbar {
@@ -1007,7 +1009,7 @@ $sidebar-display: 'sidebar-display';
   width: 100%;
   border-radius: 1rem;
   border: 1px solid var(--search-wrapper-border-color);
-  background: var(--search-wrapper-bg);
+  background: var(--main-bg);
   padding: 0 0.5rem;
 
   i {
@@ -1036,7 +1038,6 @@ $sidebar-display: 'sidebar-display';
 
   &:focus {
     box-shadow: none;
-    background: center;
 
     &.form-control {
       &::-moz-placeholder {
@@ -1139,6 +1140,8 @@ $sidebar-display: 'sidebar-display';
 }
 
 #core-wrapper {
+  line-height: 1.75;
+
   .categories,
   #tags,
   #archives {
@@ -1170,7 +1173,7 @@ $sidebar-display: 'sidebar-display';
 #main-wrapper {
   background-color: var(--main-bg);
   position: relative;
-  min-height: calc(100vh - #{$footer-height});
+  min-height: calc(100vh - $footer-height-mobile);
 
   @include pl-pr(0);
 }
@@ -1202,9 +1205,7 @@ $sidebar-display: 'sidebar-display';
   height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
-  transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
   -webkit-transition: transform 0.2s ease-out;
 
   i {
@@ -1251,8 +1252,6 @@ $sidebar-display: 'sidebar-display';
   }
 
   &.toast {
-    display: none;
-
     &.show {
       display: block;
       min-width: 20rem;
@@ -1264,7 +1263,6 @@ $sidebar-display: 'sidebar-display';
       position: fixed;
       left: 50%;
       bottom: 20%;
-      -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
       -webkit-animation: popup 0.8s;
       animation: popup 0.8s;
@@ -1275,29 +1273,13 @@ $sidebar-display: 'sidebar-display';
 /*
   Responsive Design:
 
- {sidebar, content, panel} >= 1120px screen width
+ {sidebar, content, panel} >= 1200px screen width
  {sidebar, content} >= 850px screen width
  {content} <= 849px screen width
 
 */
 
 @media all and (max-width: 576px) {
-  footer {
-    height: $footer-height-mobile;
-
-    div.d-flex {
-      padding: 1.5rem 0;
-      line-height: 1.65;
-      flex-wrap: wrap;
-      justify-content: space-around !important;
-    }
-
-    .footer-left,
-    .footer-right {
-      text-align: center;
-    }
-  }
-
   #main-wrapper {
     min-height: calc(100vh - #{$footer-height-mobile});
   }
@@ -1307,11 +1289,6 @@ $sidebar-display: 'sidebar-display';
       100vh - #{$topbar-height} - #{$footer-height-mobile}
     ) !important;
 
-    h1 {
-      margin-top: 2.2rem;
-      font-size: 1.75rem;
-    }
-
     .post-content {
       > blockquote[class^='prompt-'] {
         @include ml-mr(-1.25rem);
@@ -1322,14 +1299,10 @@ $sidebar-display: 'sidebar-display';
     }
   }
 
-  #avatar > a {
+  #avatar {
     width: 5rem;
     height: 5rem;
   }
-
-  .site-subtitle {
-    @include ml-mr(1.8rem);
-  }
 }
 
 @media all and (max-width: 768px) {
@@ -1366,18 +1339,24 @@ $sidebar-display: 'sidebar-display';
 
   footer {
     @include slide;
+
+    height: $footer-height-mobile;
+
+    div.d-flex {
+      padding: 1.5rem 0;
+      line-height: 1.65;
+      flex-wrap: wrap;
+    }
   }
 
   [#{$sidebar-display}] {
     #sidebar {
-      -webkit-transform: translateX(0);
       transform: translateX(0);
     }
 
     #topbar-wrapper,
     #main-wrapper,
     footer {
-      -webkit-transform: translateX(#{$sidebar-width});
       transform: translateX(#{$sidebar-width});
     }
   }
@@ -1387,10 +1366,6 @@ $sidebar-display: 'sidebar-display';
 
     transform: translateX(-#{$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{$sidebar-width});
-
-    .cursor {
-      transition: none;
-    }
   }
 
   #main-wrapper {
@@ -1443,7 +1418,7 @@ $sidebar-display: 'sidebar-display';
     display: none;
 
     ~ .post-content {
-      margin-top: 3rem;
+      margin-top: 2.5rem;
     }
   }
 } /* max-width: 849px */
@@ -1473,9 +1448,28 @@ $sidebar-display: 'sidebar-display';
     margin-left: $sidebar-width;
   }
 
+  #main-wrapper {
+    min-height: calc(100vh - $footer-height);
+  }
+
+  footer {
+    p {
+      width: auto;
+      &:last-child {
+        &::before {
+          content: '-';
+          margin: 0 0.75rem;
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  #sidebar {
     .profile-wrapper {
       margin-top: 3rem;
     }
+  }
 
   #search-hints {
     display: none;
@@ -1490,6 +1484,12 @@ $sidebar-display: 'sidebar-display';
     max-width: $main-content-max-width;
   }
 
+  .post {
+    h1 {
+      margin-top: 3rem;
+    }
+  }
+
   div.post-content .table-wrapper > table {
     min-width: 70%;
   }
@@ -1515,50 +1515,10 @@ $sidebar-display: 'sidebar-display';
 
 /* Compact icons in sidebar & panel hidden */
 @media all and (min-width: 850px) and (max-width: 1199px) {
-  #sidebar {
-    width: $sidebar-width-small;
-
-    .site-subtitle {
-      margin-left: 1rem;
-      margin-right: 1rem;
-    }
-
-    .sidebar-bottom {
-      a,
-      span {
-        width: 2rem;
-      }
-
-      .icon-border {
-        left: -3px;
-      }
-    }
-  }
-
-  #topbar-wrapper {
-    left: $sidebar-width-small;
-  }
-
   #search-results > div {
     max-width: 700px;
   }
 
-  .site-title {
-    font-size: 1.3rem;
-    margin-left: 0 !important;
-  }
-
-  .site-subtitle {
-    @include ml-mr(1rem);
-
-    font-size: 90%;
-  }
-
-  #main-wrapper,
-  footer {
-    margin-left: $sidebar-width-small;
-  }
-
   #breadcrumb {
     width: 65%;
     overflow: hidden;
@@ -1629,6 +1589,8 @@ $sidebar-display: 'sidebar-display';
 }
 
 @media all and (min-width: 1650px) {
+  $icon-gap: 1rem;
+
   #main-wrapper,
   footer {
     margin-left: $sidebar-width-large;
@@ -1640,7 +1602,7 @@ $sidebar-display: 'sidebar-display';
 
   #search-wrapper {
     margin-right: calc(
-      #{$main-content-max-width} * 0.25 - #{$search-max-width}
+      #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
     );
   }
 
@@ -1648,6 +1610,8 @@ $sidebar-display: 'sidebar-display';
   #main,
   footer > .container {
     max-width: $main-content-max-width;
+    padding-left: 1.75rem !important;
+    padding-right: 1.75rem !important;
   }
 
   #core-wrapper,
@@ -1664,115 +1628,31 @@ $sidebar-display: 'sidebar-display';
   #sidebar {
     width: $sidebar-width-large;
 
+    $icon-gap: 1rem; // for the bottom icons
+
     .profile-wrapper {
-      margin-top: 4rem;
+      margin-top: 3.5rem;
-      margin-bottom: 1rem;
+      margin-bottom: 2.5rem;
-
+      padding-left: 3.5rem;
-      &.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;
-
-        margin-top: 0.4rem;
-
-        a {
-          font-size: 1.7rem;
-          letter-spacing: 1px;
-        }
-      }
-
-      .site-subtitle {
-        @extend %profile-ml;
-
-        word-spacing: 0;
-        margin-top: 0;
-      }
-    } /* .profile-wrapper (min-width: 1650px) */
-
     ul {
-      padding-left: 2.5rem;
+      li.nav-item {
-
+        @include pl-pr(2.75rem);
-      > li:last-child {
-        > a {
-          position: static;
-        }
-      }
-
-      .nav-item {
-        text-align: left;
-
-        .nav-link {
-          > span {
-            letter-spacing: 2px;
-          }
-
-          > i {
-            &.unloaded {
-              display: inline-block !important;
-            }
-          }
-        }
       }
     }
 
     .sidebar-bottom {
-      padding-left: 3.5rem;
+      padding-left: 2.75rem;
-      width: 100%;
+      margin-bottom: 1.75rem;
 
-      $icon-block-size: 2rem;
+      a:not(:last-child) {
-
+        margin-right: $icon-gap;
-      &.justify-content-center {
-        justify-content: flex-start !important;
-      }
-
-      > span,
-      > button.mode-toggle,
-      > a {
-        @include ml-mr(0.15rem);
-
-        height: $icon-block-size;
-        margin-bottom: 0.5rem; /* wrap line */
-      }
-
-      i {
-        background-color: var(--sidebar-btn-bg);
-        font-size: 1rem;
-        width: $icon-block-size;
-        height: $icon-block-size;
-        border-radius: 50%;
-        position: relative;
-
-        &::before {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-        }
       }
 
       .icon-border {
-        top: 0.9rem;
+        @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
+      }
+    }
   }
-    } /* .sidebar-bottom */
-  } /* #sidebar */
 } /* min-width: 1650px */

_sass/addon/module.scss

@@ -69,12 +69,13 @@
 }
 
 %clickable-transition {
-  transition: color 0.35s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 %no-cursor {
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
@@ -91,7 +92,7 @@
 }
 
 %rounded {
-  border-radius: 6px;
+  border-radius: $base-radius;
 }
 
 %img-caption {
@@ -109,15 +110,20 @@
   color: rgba(117, 117, 117, 0.9);
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
-/* ---------- scss mixin --------- */
+%text-clip {
-
+  display: -webkit-box;
-@mixin no-text-decoration {
+  overflow: hidden;
-  text-decoration: none;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
+/* ---------- scss mixin --------- */
+
 @mixin mt-mb($value) {
   margin-top: $value;
   margin-bottom: $value;
@@ -128,6 +134,11 @@
   margin-right: $value;
 }
 
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
 @mixin pl-pr($val) {
   padding-left: $val;
   padding-right: $val;
@@ -146,7 +157,6 @@
 @mixin align-center {
   position: relative;
   left: 50%;
-  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 

_sass/addon/syntax.scss

@@ -32,7 +32,7 @@ html {
 /* -- code snippets -- */
 
 %code-snippet-bg {
-  background: var(--highlight-bg-color);
+  background-color: var(--highlight-bg-color);
 }
 
 %code-snippet-padding {
@@ -41,9 +41,6 @@ html {
 }
 
 .highlighter-rouge {
-  @extend %code-snippet-bg;
-  @extend %rounded;
-
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
@@ -120,10 +117,6 @@ code {
   blockquote & {
     color: inherit;
   }
-
-  .highlight > & {
-    color: transparent;
-  }
 }
 
 td.rouge-code {
@@ -140,13 +133,25 @@ td.rouge-code {
   }
 }
 
+div[class^='language-'] {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  box-shadow: var(--language-border-color) 0 0 0 1px;
+
+  .post-content > & {
+    @include ml-mr(-1.25rem);
+
+    border-radius: 0;
+  }
+}
+
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
-  &[class^='highlighter-rouge'],
   &.nolineno,
-  &.language-plaintext.highlighter-rouge,
+  &.language-plaintext,
-  &.language-console.highlighter-rouge,
+  &.language-console,
-  &.language-terminal.highlighter-rouge {
+  &.language-terminal {
     pre.lineno {
       display: none;
     }
@@ -166,28 +171,15 @@ div {
   justify-content: space-between;
   align-items: center;
   height: $code-header-height;
-
-  &::before {
-    $dot-size: 0.75rem;
-    $dot-margin: 0.5rem;
-
-    content: '';
-    display: inline-block;
   margin-left: 1rem;
-    width: $dot-size;
+  margin-right: 0.5rem;
-    height: $dot-size;
-    border-radius: 50%;
-    background-color: var(--code-header-muted-color);
-    box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
-      ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
-  }
 
   /* the label block */
   span {
     /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.4rem;
+      margin-right: 0.5rem;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -248,21 +240,30 @@ div {
   }
 }
 
-@media all and (max-width: 576px) {
+@media all and (min-width: 576px) {
-  .post-content {
+  div[class^='language-'] {
-    > div[class^='language-'] {
+    .post-content > & {
-      @include ml-mr(-1.25rem);
+      @include ml-mr(0);
 
-      border-radius: 0;
+      border-radius: $base-radius;
-
-      .highlight {
-        padding-left: 0.25rem;
     }
 
     .code-header {
-        border-radius: 0;
+      @include ml-mr(0);
-        padding-left: 0.4rem;
+
-        padding-right: 0.5rem;
+      &::before {
+        $dot-size: 0.75rem;
+        $dot-margin: 0.5rem;
+
+        content: '';
+        display: inline-block;
+        margin-left: 1rem;
+        width: $dot-size;
+        height: $dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
+          ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
       }
     }
   }

_sass/addon/variables.scss

@@ -5,25 +5,17 @@
 /* sidebar */
 
 $sidebar-width: 260px !default; /* the basic width */
-$sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */
+$sidebar-width-large: 300px !default; /* screen width: >= 1650px */
-$sidebar-width-large: 350px !default; /* screen width: >= 1650px */
-
-/* tabs of sidebar */
-
-$tab-count: 5 !default; /* backward compatible (version <= 4.0.2) */
-$tab-height: 3rem !default;
-$tab-cursor-height: 1.6rem !default;
-$cursor-width: 2px !default; /* the cursor width of the selected tab */
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
 $search-max-width: 210px !default;
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
+$footer-height-mobile: 6rem !default; /* screen width: < 850px */
-
 $main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
+$base-radius: 0.5rem;
 
 /* syntax highlight */
 

_sass/colors/dark-syntax.scss

@@ -3,6 +3,7 @@
  */
 
 @mixin dark-syntax {
+  --language-border-color: rgba(84, 83, 83, 0.27);
   --highlight-bg-color: #252525;
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;

_sass/colors/dark-typography.scss

@@ -21,7 +21,7 @@
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
   --btn-box-shadow: var(--main-bg);
-  --card-header-bg: rgb(51, 50, 50);
+  --card-header-bg: rgb(48, 48, 48);
   --label-color: rgb(108, 117, 125);
   --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
@@ -36,15 +36,16 @@
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
   --sidebar-muted-color: #6d6c6b;
-  --sidebar-active-color: rgb(255, 255, 255, 0.8);
+  --sidebar-active-color: rgb(255, 255, 255, 0.95);
-  --nav-cursor-color: rgb(183, 182, 182);
+  --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
-  --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
+  --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
+  --sidebar-btn-color: #787878;
+  --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
+  --topbar-bg: rgb(27, 27, 30, 0.64);
   --topbar-text-color: var(--text-color);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
+  --search-wrapper-border-color: rgb(55, 55, 55);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-wrapper-border-color: rgb(34, 34, 39);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 
@@ -54,8 +55,6 @@
   --btn-paginator-hover-color: rgb(64, 65, 66);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-text-color: var(--text-color);
-  --pin-bg: rgb(34, 35, 37);
-  --pin-color: inherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);
@@ -68,19 +67,19 @@
   --btn-share-color: #6c757d;
   --btn-share-hover-color: #bfc1ca;
   --relate-post-date: var(--text-muted-color);
-  --card-bg: #212121;
+  --card-bg: #1e1e1e;
-  --card-hovor-bg: #3a3a3a;
+  --card-hovor-bg: #464d51;
-  --card-border-color: rgb(53, 53, 60);
+  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
-  --card-box-shadow: var(--main-bg);
+    rgb(137, 135, 135, 0.24) 0 0 0 1px;
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
   --prompt-text-color: rgb(216, 212, 212, 0.75);
-  --prompt-tip-bg: rgba(77, 187, 95, 0.2);
+  --prompt-tip-bg: rgb(22, 60, 36, 0.64);
-  --prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
+  --prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
   --prompt-info-bg: rgb(7, 59, 104, 0.8);
   --prompt-info-icon-color: #0075d1;
-  --prompt-warning-bg: rgb(90, 69, 3, 0.95);
+  --prompt-warning-bg: rgb(90, 69, 3, 0.88);
   --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
   --prompt-danger-bg: rgb(86, 28, 8, 0.8);
   --prompt-danger-icon-color: #cd0202;
@@ -92,7 +91,7 @@
   --dash-color: rgb(63, 65, 68);
 
   /* categories */
-  --categories-border: rgb(64, 66, 69);
+  --categories-border: rgb(64, 66, 69, 0.5);
   --categories-hover-bg: rgb(73, 75, 76);
   --categories-icon-hover-color: white;
 
@@ -101,13 +100,6 @@
   --timeline-color: rgb(63, 65, 68);
   --timeline-year-dot-color: var(--timeline-color);
 
-  .post img[data-src] {
-    &.lazyloaded {
-      -webkit-filter: brightness(95%);
-      filter: brightness(95%);
-    }
-  }
-
   .light {
     display: none;
   }

_sass/colors/light-syntax.scss

@@ -67,10 +67,11 @@
   .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */
 
   /* --- custom light colors --- */
+  --language-border-color: rgba(172, 169, 169, 0.2);
   --highlight-bg-color: #f7f7f7;
-  --highlighter-rouge-color: #2f2f2f;
+  --highlighter-rouge-color: #3f596f;
   --highlight-lineno-color: #c2c6cc;
-  --inline-code-bg: #f3f3f3;
+  --inline-code-bg: #f6f6f7;
   --code-header-text-color: #a3a3b1;
   --code-header-muted-color: #ebebeb;
   --code-header-icon-color: #d1d1d1;
@@ -78,6 +79,5 @@
 
   [class^='prompt-'] {
     --inline-code-bg: #fbfafa;
-    --highlighter-rouge-color: rgb(82, 82, 82);
   }
 } /* light-syntax */

_sass/colors/light-typography.scss

@@ -10,11 +10,11 @@
 
   /* Common color */
   --text-color: #34343c;
-  --text-muted-color: gray;
+  --text-muted-color: #8e8e8e;
   --heading-color: black;
   --blockquote-border-color: #eeeeee;
   --blockquote-text-color: #9a9a9a;
-  --link-color: #2a408e;
+  --link-color: #0153ab;
   --link-underline-color: #dee2e6;
   --button-bg: #ffffff;
   --btn-border-color: #e9ecef;
@@ -26,7 +26,7 @@
   --img-bg: radial-gradient(
     circle,
     rgb(255, 255, 255) 0%,
-    rgb(249, 249, 249) 100%
+    rgb(239, 239, 239) 100%
   );
   --shimmer-bg: linear-gradient(
     90deg,
@@ -36,20 +36,21 @@
   );
 
   /* Sidebar */
-  --sidebar-bg: #eeeeee;
+  --sidebar-bg: #f6f8fa;
   --sidebar-muted-color: #a2a19f;
-  --sidebar-active-color: #424242;
+  --sidebar-active-color: #1d1d1d;
-  --nav-cursor-color: #757575;
+  --sidebar-hover-bg: rgb(227, 227, 227, 0.64);
   --sidebar-btn-bg: white;
+  --sidebar-btn-color: #8e8e8e;
+  --avatar-border-color: white;
 
   /* Topbar */
+  --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
-  --topbar-wrapper-bg: white;
+  --search-wrapper-border-color: rgb(240, 240, 240);
-  --search-wrapper-bg: rgb(245, 245, 245, 0.5);
-  --search-wrapper-border-color: rgb(245, 245, 245);
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
-  --input-focus-border-color: var(--btn-border-color);
+  --input-focus-border-color: #b8b8b8;
 
   /* Home page */
   --post-list-text-color: dimgray;
@@ -57,15 +58,14 @@
   --btn-paginator-hover-color: var(--sidebar-bg);
   --btn-paginator-border-color: var(--sidebar-bg);
   --btn-text-color: #676666;
-  --pin-bg: #f5f5f5;
-  --pin-color: #999fa4;
 
   /* Posts */
   --toc-highlight: #563d7c;
   --btn-share-hover-color: var(--link-color);
-  --card-hovor-bg: #eeeeee;
+  --card-bg: white;
-  --card-border-color: #ececec;
+  --card-hovor-bg: #e2e2e2;
-  --card-box-shadow: rgba(234, 234, 234, 0.76);
+  --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
+    rgba(211, 209, 209, 0.15) 0 0 0 1px;
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;
@@ -98,6 +98,7 @@
   }
 
   /* Categories */
+  --categories-border: rgba(0, 0, 0, 0.125);
   --categories-hover-bg: var(--btn-border-color);
   --categories-icon-hover-color: darkslategray;
 

_sass/jekyll-theme-chirpy.scss

@@ -1,24 +1,19 @@
 /*!
- * The styles for Jekyll theme Chirpy
+ * Chirpy v5.6.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
- *
- * Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
 
-@import
+@import 'colors/light-typography';
-  "colors/light-typography",
+@import 'colors/dark-typography';
-  "colors/dark-typography",
+@import 'addon/variables';
-
+@import 'variables-hook';
-  "addon/variables",
+@import 'addon/module';
-  "variables-hook",
+@import 'addon/syntax';
-  "addon/module",
+@import 'addon/commons';
-  "addon/syntax",
+@import 'layout/home';
-  "addon/commons",
+@import 'layout/post';
-
+@import 'layout/tags';
-  "layout/home",
+@import 'layout/archives';
-  "layout/post",
+@import 'layout/categories';
-  "layout/tags",
+@import 'layout/category-tag';
-  "layout/archives",
-  "layout/categories",
-  "layout/category-tag";

_sass/layout/categories.scss

@@ -8,9 +8,24 @@
 
 .categories {
   margin-bottom: 2rem;
+  border-color: var(--categories-border);
+
+  &.card,
+  .list-group {
+    @extend %rounded;
+  }
 
   .card-header {
-    padding-right: 12px;
+    $radius: calc($base-radius - 1px);
+
+    padding: 0.75rem;
+    border-radius: $radius;
+    border-bottom: 0;
+
+    &.hide-border-bottom {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   i {
@@ -28,6 +43,10 @@
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    &:last-child {
+      border-bottom: 0;
+    }
   }
 } /* .categories */
 
@@ -42,9 +61,7 @@
     position: relative;
     height: 0.7rem;
     width: 1rem;
-    transition: -webkit-transform 300ms ease;
     transition: transform 300ms ease;
-    transition: transform 300ms ease, -webkit-transform 300ms ease;
   }
 
   &:hover {
@@ -62,6 +79,5 @@
 }
 
 .rotate {
-  -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }

_sass/layout/home.scss

@@ -2,6 +2,92 @@
   Style for Homepage
 */
 
+#post-list {
+  margin-top: 2rem;
+
+  a.card-wrapper {
+    display: block;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .card {
+    %img-radius {
+      border-radius: $base-radius $base-radius 0 0;
+    }
+
+    .preview-img {
+      height: 10rem;
+
+      @extend %img-radius;
+
+      img {
+        width: 100%;
+        height: 100%;
+        -o-object-fit: cover;
+        object-fit: cover;
+
+        @extend %img-radius;
+      }
+    }
+
+    .card-body {
+      min-height: 10.5rem;
+      padding: 1rem;
+
+      .card-title {
+        @extend %text-clip;
+
+        font-size: 1.25rem;
+      }
+
+      %muted {
+        color: var(--text-muted-color) !important;
+      }
+
+      .card-text.post-content {
+        @extend %muted;
+
+        p {
+          @extend %text-clip;
+
+          line-height: 1.5;
+          margin: 0;
+        }
+      }
+
+      .post-meta {
+        @extend %muted;
+
+        i {
+          &:not(:first-child) {
+            margin-left: 1.5rem;
+          }
+        }
+
+        em {
+          @extend %normal-font-style;
+
+          color: inherit;
+        }
+
+        > div:first-child {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+} /* #post-list */
+
 .pagination {
   color: var(--btn-patinator-text-color);
   font-family: Lato, sans-serif;
@@ -52,91 +138,42 @@
   } /* .page-item */
 } /* .pagination */
 
+/* Tablet */
+@media all and (min-width: 768px) {
   #post-list {
-  margin-top: 1.75rem;
+    %img-radius {
-  padding-right: 0.5rem;
+      border-radius: 0 $base-radius $base-radius 0;
-
-  a:hover {
-    text-decoration: none;
     }
 
-  .post-preview {
+    .card {
-    padding: 0.25rem;
+      .preview-img {
-    border-radius: 0.75rem;
+        width: 20rem;
-    border: 1px solid var(--card-border-color);
+        height: 11.5rem; // can hold 2 lines each for title and content
-    background: var(--card-bg);
-
-    &:hover {
-      background: var(--card-hovor-bg);
-      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
       }
 
-    &:not(:last-child) {
+      .card-body {
-      margin-bottom: 1.75rem;
+        min-height: 10.75rem;
-    }
+        width: 60%;
+        padding: 1.75rem 1.75rem 1.25rem 1.75rem;
 
-    h1 {
+        .card-text {
-      font-size: 1.4rem;
+          display: inherit !important;
-      margin: 0;
         }
 
         .post-meta {
           i {
-        font-size: 0.73rem;
-
             &:not(:first-child) {
-          margin-left: 1.2rem;
+              margin-left: 1.75rem;
-        }
-      }
-
-      em {
-        @extend %normal-font-style;
-      }
-
-      .pin {
-        i {
-          -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-          padding-left: 3px;
-          color: var(--pin-color);
-        }
-
-        span {
-          display: none;
             }
           }
         }
-
-    .post-content {
-      margin-top: 0.6rem;
-      margin-bottom: 0.6rem;
-      color: var(--post-list-text-color);
-
-      > p {
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
       }
     }
-  } /* .post-preview */
-} /* #post-list */
-
-@media (hover: hover) {
-  .post-preview {
-    transition: all 0.35s ease-in-out;
   }
 }
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  .post-preview {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
-  }
-
   .pagination {
     justify-content: space-evenly;
 
@@ -151,27 +188,7 @@
 /* Sidebar is visible */
 @media all and (min-width: 831px) {
   #post-list {
-    margin-top: 3rem;
+    margin-top: 2.5rem;
-
-    .post-preview {
-      padding: 0.5rem;
-
-      .post-meta {
-        .pin {
-          background: var(--pin-bg);
-          border-radius: 5px;
-          line-height: 1.4rem;
-          height: 1.3rem;
-          margin-top: 3px;
-          padding-left: 1px;
-          padding-right: 6px;
-
-          > span {
-            display: inline;
-          }
-        }
-      }
-    }
   }
 
   .pagination {
@@ -194,9 +211,9 @@
   } /* .pagination */
 }
 
-/* Panel hidden */
+/* Panel is visible */
-@media all and (max-width: 1200px) {
+@media all and (min-width: 1200px) {
   #post-list {
-    padding-right: 0;
+    padding-right: 0.5rem;
   }
 }

_sass/layout/post.scss

@@ -10,7 +10,7 @@
   }
 }
 
-@mixin btn-post-nav {
+%btn-post-nav {
   width: 50%;
   position: relative;
   border-color: var(--btn-border-color);
@@ -27,6 +27,9 @@
 }
 
 .preview-img {
+  overflow: hidden;
+  aspect-ratio: 40 / 21;
+
   @extend %rounded;
 
   &:not(.no-bg) {
@@ -36,7 +39,6 @@
   }
 
   img {
-    aspect-ratio: 40 / 21;
     -o-object-fit: cover;
     object-fit: cover;
 
@@ -153,6 +155,16 @@ h1 + .post-meta {
 
 .post-tags {
   line-height: 2rem;
+
+  .post-tag {
+    background: var(--tag-bg);
+
+    &:hover {
+      @extend %link-hover;
+      @extend %tag-hover;
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-navigation {
@@ -160,27 +172,25 @@ h1 + .post-meta {
   padding-bottom: 4rem;
 
   .btn {
-    @include btn-post-nav;
+    @extend %btn-post-nav;
 
+    &:not(:hover) {
       color: var(--link-color);
+    }
 
     &:hover {
-      background: #2a408e;
+      &:not(.disabled)::before {
-      color: #ffffff;
+        color: whitesmoke;
-      border-color: #2a408e;
+      }
     }
 
     &.disabled {
-      @include btn-post-nav;
+      @extend %btn-post-nav;
 
       pointer-events: auto;
       cursor: not-allowed;
       background: none;
       color: gray;
-
-      &:hover {
-        border-color: none;
-      }
     }
 
     &.btn-outline-primary.disabled:focus {
@@ -195,14 +205,12 @@ h1 + .post-meta {
     }
 
     &:first-child {
-      border-top-right-radius: 0;
+      border-radius: $base-radius 0 0 $base-radius;
-      border-bottom-right-radius: 0;
       left: 0.5px;
     }
 
     &:last-child {
-      border-top-left-radius: 0;
+      border-radius: 0 $base-radius $base-radius 0;
-      border-bottom-left-radius: 0;
       right: 0.5px;
     }
   }
@@ -215,6 +223,15 @@ h1 + .post-meta {
   }
 } /* .post-navigation */
 
+@media (hover: hover) {
+  .post-navigation {
+    .btn,
+    .btn::before {
+      transition: all 0.35s ease-in-out;
+    }
+  }
+}
+
 @-webkit-keyframes fade-up {
   from {
     opacity: 0;
@@ -330,24 +347,10 @@ h1 + .post-meta {
     -webkit-box-orient: vertical;
   }
 
-  a:hover {
-    text-decoration: none;
-  }
-
   .card {
-    border-color: var(--card-border-color);
-    background-color: var(--card-bg);
-    box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    transition: all 0.3s ease-in-out;
-
     h3 {
       @extend %text-color;
-    }
+      @extend %text-clip;
-
-    &:hover {
-      -webkit-transform: translate3d(0, -3px, 0);
-      transform: translate3d(0, -3px, 0);
-      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
     }
   }
 }

_tabs/tags.md

@@ -1,5 +1,5 @@
 ---
 layout: tags
-icon: fas fa-tag
+icon: fas fa-tags
 order: 2
 ---

assets/css/style.scss

@@ -1,12 +1,6 @@
 ---
 ---
 
-/*
+@import '{{ site.theme }}';
-  If the number of TAB files has changed, the following variable is required.
-  And it must be defined before `@import`.
-*/
-$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
-
-@import "{{ site.theme }}";
 
 /* append your custom style below */

rollup.config.js

@@ -38,6 +38,7 @@ function build(filename) {
 
 export default [
   build('commons'),
+  build('home'),
   build('categories'),
   build('page'),
   build('post'),