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

The UI of the next major version
This commit is contained in:
Cotes Chung 2023-05-13 02:25:05 +08:00 committed by GitHub
commit 016a9baddd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
74 changed files with 855 additions and 1071 deletions

View file

@ -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
js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
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

View file

@ -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'
dayjs: 'll'
strftime: "%b %e, %Y"
dayjs: "ll"
archives:
strftime: '%b'
dayjs: 'MMM'
strftime: "%b"
dayjs: "MMM"
# categories page
categories:

View file

@ -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:

View file

@ -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'
dayjs: 'll'
strftime: "%b %e, %Y"
dayjs: "ll"
archives:
strftime: '%b'
dayjs: 'MMM'
strftime: "%b"
dayjs: "MMM"
# categories page
categories:

View file

@ -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:

View file

@ -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'
dayjs: 'll'
strftime: "%b %e, %Y"
dayjs: "ll"
archives:
strftime: '%b'
dayjs: 'MMM'
strftime: "%b"
dayjs: "MMM"
# categories page
categories:

View file

@ -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'
dayjs: 'll'
strftime: "%b %e, %Y"
dayjs: "ll"
archives:
strftime: '%b'
dayjs: 'MMM'
strftime: "%b"
dayjs: "MMM"
# categories page
categories:

View file

@ -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:

View file

@ -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'
dayjs: 'll'
strftime: "%b %e, %Y"
dayjs: "ll"
archives:
strftime: '%b'
dayjs: 'MMM'
strftime: "%b"
dayjs: "MMM"
# categories page
categories:

View file

@ -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:

View file

@ -38,11 +38,11 @@ copyright:
# Displayed in the footer
brief: Néhány jog fenntartva.
verbose: >-
Az oldalon található tartalmak
Creative Commons Attribution 4.0 International (CC BY 4.0) licenccel rendelkeznek,
hacsak másképp nincs jelezve.
Az oldalon található tartalmak
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:

View file

@ -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:

View file

@ -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'
dayjs: 'll'
strftime: "%b %e, %Y"
dayjs: "ll"
archives:
strftime: '%b'
dayjs: 'MMM'
strftime: "%b"
dayjs: "MMM"
# categories page
categories:

View file

@ -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'
dayjs: 'YYYY/MM/DD'
strftime: "%Y/%m/%d"
dayjs: "YYYY/MM/DD"
# categories page
categories:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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:

View file

@ -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'
dayjs: 'YYYY/MM/DD'
strftime: "%Y/%m/%d"
dayjs: "YYYY/MM/DD"
# categories page
categories:

View file

@ -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 }}

View file

@ -1,42 +1,34 @@
<!-- The Footer -->
<footer>
<div class="container pl-lg-4 pr-lg-4">
<div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
<div class="footer-left">
<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 -%}
<div class="container px-lg-4">
<div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
<p>
{%- capture _platform -%}
<a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
{%- endcapture -%}
{%- endcapture -%}
{%- capture _theme -%}
{%- capture _theme -%}
<a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
{%- endcapture -%}
{%- endcapture -%}
{{
site.data.locales[include.lang].meta
| default: 'Using the :PLATFORM theme :THEME.'
| replace: ':PLATFORM', _platform
| replace: ':THEME', _theme
}}
</p>
</div>
{{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
</p>
<p>
{{- '©' }}
{{ '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>
</footer>

View file

@ -9,14 +9,17 @@
{% endif %}
{% endif %}
{% if page.layout == 'post' or page.layout == 'page' %}
<!-- image lazy-loading & popup & clipboard -->
{% assign _urls = site.data.assets[origin]['magnific-popup'].js
| append: ','
| append: site.data.assets[origin].lazysizes.js
| append: ','
| append: site.data.assets[origin].clipboard.js
%}
{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
{% assign _urls = site.data.assets[origin].lazysizes.js %}
{% unless page.layout == 'home' %}
{% assign _urls = _urls
| append: ','
| 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' %}

View file

@ -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 %}
@ -37,7 +34,7 @@
{% assign show = true %}
{% endif %}
{% else %}
{% if i == 1 or i == paginator.total_pages%}
{% if i == 1 or i == paginator.total_pages %}
{% assign show = true %}
{% elsif i >= pre and i <= next %}
{% assign show = true %}
@ -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> <!-- .pagination -->
</ul>
<!-- .pagination -->

View file

@ -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-placement="top"
data-bs-toggle="tooltip"
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-placement="top"
data-bs-toggle="tooltip"
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 }}"
>

View file

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

View file

@ -45,9 +45,8 @@
<!-- images -->
{% assign IMG_TAG = '<img ' %}
{% if _content contains IMG_TAG %}
{% if _content contains '<img' %}
{% assign IMG_TAG = '<img ' %}
{% assign _img_content = nil %}
{% assign _img_snippets = _content | split: IMG_TAG %}
@ -161,28 +160,39 @@
<!-- Bypass the HTML-proofer test -->
{% assign _left = _left | append: ' data-proofer-ignore' %}
<!-- make sure the `<img>` is wrapped by `<a>` -->
{% assign _parent = _right | slice: 1, 4 %}
{% if page.layout == 'post' %}
<!-- make sure the `<img>` is wrapped by `<a>` -->
{% assign _parent = _right | slice: 1, 4 %}
{% if _parent == '</a>' %}
<!-- add class to exist <a> tag -->
{% assign _size = _img_content | size | minus: 1 %}
{% capture _class %}
class="img-link{% unless _lqip %} shimmer{% endunless %}"
{% endcapture %}
{% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
{% if _parent == '</a>' %}
<!-- add class to exist <a> tag -->
{% assign _size = _img_content | size | minus: 1 %}
{% capture _class %}
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 -%}
<a href="{{ _final_src | default: _src }}" class="popup img-link {{ _class }}">
{%- endcapture -%}
{% assign _img_content = _img_content | append: _wrapper_start %}
{% assign _right = _right | prepend: '></a' %}
{% endif %}
{% else %}
{% endif %}
{% if page.layout == 'home' %}
<!-- create the image wrapper -->
{%- capture _wrapper_start -%}
<a href="{{ _final_src | default: _src }}" class="popup img-link {{ _class }}">
<div class="preview-img {{ _class | strip }}">
{%- endcapture -%}
{% assign _img_content = _img_content | append: _wrapper_start %}
{% assign _right = _right | prepend: '></a' %}
{% 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 }}

View file

@ -75,21 +75,18 @@
{% if index_list.size > 0 %}
<div id="related-posts" class="mb-2 mb-sm-4">
<h3
class="pt-2 mb-4 ml-1"
data-toc-skip
>
<h3 class="pt-2 mb-4 ms-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">
<a href="{{ post.url | relative_url }}">
<div class="col">
<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 %}

View file

@ -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>

View file

@ -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>

View file

@ -1,11 +1,10 @@
<!-- The Side Bar -->
<div id="sidebar" class="d-flex flex-column align-items-end">
<div class="profile-wrapper text-center">
<div id="avatar">
<a href="{{ '/' | relative_url }}" class="mx-auto">
{% if site.avatar != empty and site.avatar %}
{% capture avatar_url %}
<div class="profile-wrapper">
<a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
{% if site.avatar != empty and site.avatar %}
{% capture avatar_url %}
{% if site.avatar contains '://' %}
{{ site.avatar }}
{% elsif site.img_cdn != empty and site.img_cdn %}
@ -14,23 +13,22 @@
{{ site.avatar | relative_url }}
{% endif %}
{% endcapture %}
<img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
{% endif %}
</a>
</div>
<img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
{% endif %}
</a>
<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>

View file

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

View file

@ -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: '/' %}

View file

@ -1,6 +1,4 @@
{% comment %}
The trending tags list
{% endcomment %}
<!-- The trending tags list -->
{% 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>

View file

@ -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] %}

8
_javascript/home.js Normal file
View file

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

View file

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

View file

@ -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,36 +61,41 @@ function resumeIcon(btn) {
export function initClipboard() {
// Initial the clipboard.js object
const clipboard = new ClipboardJS(btnSelector, {
target(trigger) {
let codeBlock = trigger.parentNode.nextElementSibling;
return codeBlock.querySelector('code .rouge-code');
}
});
if ($(clipboardSelector).length) {
const clipboard = new ClipboardJS(clipboardSelector, {
target(trigger) {
let codeBlock = trigger.parentNode.nextElementSibling;
return codeBlock.querySelector('code .rouge-code');
}
});
$(btnSelector).tooltip({
trigger: 'hover',
placement: 'left'
});
const clipboardList = document.querySelectorAll(clipboardSelector);
[...clipboardList].map(
(elem) =>
new bootstrap.Tooltip(elem, {
placement: 'left'
})
);
clipboard.on('success', (e) => {
e.clearSelection();
clipboard.on('success', (e) => {
e.clearSelection();
const trigger = e.trigger;
if (isLocked(trigger)) {
return;
}
const trigger = e.trigger;
if (isLocked(trigger)) {
return;
}
setSuccessIcon(trigger);
showTooltip(trigger);
lock(trigger);
setSuccessIcon(trigger);
showTooltip(trigger);
lock(trigger);
setTimeout(() => {
hideTooltip(trigger);
resumeIcon(trigger);
unlock(trigger);
}, TIMEOUT);
});
setTimeout(() => {
hideTooltip(trigger);
resumeIcon(trigger);
unlock(trigger);
}, TIMEOUT);
});
}
/* --- Post link sharing --- */

View file

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

View file

@ -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');
});
}

View file

@ -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');
});
}

View file

@ -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'
}
});
}

View file

@ -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));
});
}

View file

@ -174,13 +174,7 @@ function displayPageviews(data) {
let hasInit = getInitStatus();
const rows = data.rows; /* could be undefined */
if ($('#post-list').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) {
if ($('.post').length > 0) {
/* the post */
const path = window.location.pathname;
tacklePV(rows, path, $('#pv'), hasInit);

View file

@ -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() */
}

View file

@ -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)
);
}

View file

@ -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';

View file

@ -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();

View file

@ -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();

View file

@ -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>

View file

@ -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">

View file

@ -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 %}

View file

@ -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-autohide="false"
data-bs-animation="true"
data-bs-autohide="false"
>
<div class="toast-header">
<button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button
type="button"
class="btn-close ms-auto"
data-bs-dismiss="toast"
aria-label="Close"
></button>
</div>
<div class="toast-body text-center pt-0">
<p class="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>

View file

@ -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 }}">
<div class="card-body">
<h1 class="card-title">
<a href="{{ post.url | relative_url }}" class="card-wrapper">
<div class="card post-preview flex-md-row-reverse">
{% if post.image %}
{% 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="mr-auto">
<div class="post-meta flex-grow-1 d-flex align-items-end">
<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>
<span>
<i class="far fa-folder-open fa-fw me-1"></i>
<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>
</div>
<!-- .post-review -->
<!-- .card-body -->
</div>
</a>
{% endfor %}
</div>
<!-- #post-list -->
{% if paginator.total_pages > 0 %}
{% if paginator.total_pages > 1 %}
{% include post-paginator.html %}
{% endif %}

View file

@ -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 class="post pl-1 pr-1 pl-md-2 pr-md-2">
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pe-xl-4">
{% 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 %}

View file

@ -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" >

View file

@ -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 %}

View file

@ -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">
{% assign tags = "" | split: "" %}
<div id="tags" class="d-flex flex-wrap mx-xl-2">
{% 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>

View file

@ -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);
> div {
width: 350px;
}
flex-wrap: wrap;
}
a {
@extend %text-color;
&:link {
@include no-text-decoration;
}
&:hover {
@extend %link-hover;
@include no-text-decoration;
}
}
.footer-right {
text-align: right;
p {
width: 100%;
text-align: center;
margin-bottom: 0;
}
}
@ -260,25 +256,20 @@ i {
}
.post-tag {
display: inline-block;
line-height: 1rem;
line-height: 1.05rem;
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;
border-color: #2a408e;
color: #ffffff;
transition: none;
transition: all 0.3s ease-in;
}
}
[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 {
@include no-text-decoration;
/* overwrite bootstrap muted */
.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 */
a {
@extend %sidebar-links;
%sidebar-link-hover {
&:hover {
@include no-text-decoration;
color: var(--sidebar-active-color) !important;
color: var(--sidebar-active-color);
}
}
#avatar {
> a {
display: block;
width: 6rem;
height: 6rem;
border-radius: 50%;
border: 2px solid rgba(222, 222, 222, 0.7);
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0); /* fixed the zoom in Safari */
transition: border-color 0.35s ease-in-out;
a {
@extend %sidebar-links;
}
&:hover {
border-color: white;
}
}
#avatar {
display: block;
width: 7rem;
height: 7rem;
overflow: hidden;
box-shadow: var(--avatar-border-color) 0 0 0 2px;
transform: translateZ(0); /* fixed the zoom in Safari */
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;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.5px;
color: rgba(134, 133, 133, 0.99);
@extend %sidebar-link-hover;
}
}
.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 {
border-radius: 0;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 1px;
display: table-cell;
vertical-align: middle;
}
.nav-item {
text-align: center;
display: table;
height: $tab-height;
&.active {
.nav-link {
color: var(--sidebar-active-color);
}
}
&:not(.active) > a {
@extend %clickable-transition;
}
}
ul {
height: $tab-height * $tab-count;
margin-bottom: 2rem;
padding-left: 0;
li {
li.nav-item {
opacity: 0.9;
width: 100%;
padding-left: 1.5rem;
padding-right: 1.5rem;
&:last-child {
a {
position: relative;
left: calc($cursor-width / 2);
width: 100%;
a.nav-link {
@include pt-pb(0.6rem);
display: flex;
align-items: center;
border-radius: 0.75rem;
font-weight: 600;
&:hover {
background-color: var(--sidebar-hover-bg);
}
/* 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;
i {
font-size: 95%;
opacity: 0.8;
margin-right: 1.5rem;
}
span {
font-size: 90%;
letter-spacing: 0.2px;
}
}
} /* li */
@mixin fix-cursor($top) {
top: $top;
visibility: visible;
}
&.active {
.nav-link {
color: var(--sidebar-active-color);
background-color: var(--sidebar-hover-bg);
@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);
span {
opacity: 1;
}
}
} @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 */
&:not(:first-child) {
margin-top: 0.25rem;
}
}
}
.sidebar-bottom {
margin-bottom: 2.1rem;
@include pl-pr(2rem);
@include ml-mr(auto);
@include pl-pr(1rem);
margin-bottom: 1.5rem;
%icon {
width: 2.4rem;
%button {
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;
> i {
@extend %clickable-transition;
}
&:hover > i {
color: var(--sidebar-active-color);
}
@extend %sidebar-link-hover;
}
.icon-border {
@extend %no-cursor;
@include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
background-color: var(--sidebar-muted-color);
content: '';
width: 3px;
height: 3px;
width: $btn-border-width;
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;
}
}
.profile-wrapper {
margin-top: 2rem;
width: 100%;
.nav-link {
transition: background-color 0.3s ease-in-out;
}
.post-preview {
transition: background-color 0.35s ease-in-out;
}
}
#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-wrapper-bg);
background-color: var(--topbar-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,8 +1448,27 @@ $sidebar-display: 'sidebar-display';
margin-left: $sidebar-width;
}
.profile-wrapper {
margin-top: 3rem;
#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 {
@ -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-bottom: 1rem;
&.text-center {
text-align: left !important;
}
%profile-ml {
margin-left: 4.5rem;
}
#avatar {
@extend %profile-ml;
> a {
width: 6.2rem;
height: 6.2rem;
&.mx-auto {
margin-left: 0 !important;
}
}
}
.site-title {
@extend %profile-ml;
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) */
margin-top: 3.5rem;
margin-bottom: 2.5rem;
padding-left: 3.5rem;
}
ul {
padding-left: 2.5rem;
> li:last-child {
> a {
position: static;
}
}
.nav-item {
text-align: left;
.nav-link {
> span {
letter-spacing: 2px;
}
> i {
&.unloaded {
display: inline-block !important;
}
}
}
li.nav-item {
@include pl-pr(2.75rem);
}
}
.sidebar-bottom {
padding-left: 3.5rem;
width: 100%;
padding-left: 2.75rem;
margin-bottom: 1.75rem;
$icon-block-size: 2rem;
&.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%);
}
a:not(:last-child) {
margin-right: $icon-gap;
}
.icon-border {
top: 0.9rem;
@include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
}
} /* .sidebar-bottom */
} /* #sidebar */
}
}
} /* min-width: 1650px */

View file

@ -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 --------- */
@mixin no-text-decoration {
text-decoration: none;
%text-clip {
display: -webkit-box;
overflow: hidden;
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%);
}

View file

@ -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-console.highlighter-rouge,
&.language-terminal.highlighter-rouge {
&.language-plaintext,
&.language-console,
&.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;
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);
}
margin-left: 1rem;
margin-right: 0.5rem;
/* 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) {
.post-content {
> div[class^='language-'] {
@include ml-mr(-1.25rem);
@media all and (min-width: 576px) {
div[class^='language-'] {
.post-content > & {
@include ml-mr(0);
border-radius: 0;
border-radius: $base-radius;
}
.highlight {
padding-left: 0.25rem;
}
.code-header {
@include ml-mr(0);
.code-header {
border-radius: 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);
}
}
}

View file

@ -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: 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 */
$sidebar-width-large: 300px !default; /* screen width: >= 1650px */
/* 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 */

View file

@ -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;

View file

@ -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);
--nav-cursor-color: rgb(183, 182, 182);
--sidebar-btn-bg: rgb(117, 116, 116, 0.2);
--sidebar-active-color: rgb(255, 255, 255, 0.95);
--sidebar-hover-bg: rgb(54, 54, 54, 0.33);
--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-bg: rgb(34, 34, 39);
--search-wrapper-border-color: rgb(34, 34, 39);
--search-wrapper-border-color: rgb(55, 55, 55);
--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-hovor-bg: #3a3a3a;
--card-border-color: rgb(53, 53, 60);
--card-box-shadow: var(--main-bg);
--card-bg: #1e1e1e;
--card-hovor-bg: #464d51;
--card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
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-icon-color: rgb(5, 223, 5, 0.68);
--prompt-tip-bg: rgb(22, 60, 36, 0.64);
--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;
}

View file

@ -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 */

View file

@ -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;
--nav-cursor-color: #757575;
--sidebar-active-color: #1d1d1d;
--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-bg: rgb(245, 245, 245, 0.5);
--search-wrapper-border-color: rgb(245, 245, 245);
--search-wrapper-border-color: rgb(240, 240, 240);
--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-border-color: #ececec;
--card-box-shadow: rgba(234, 234, 234, 0.76);
--card-bg: white;
--card-hovor-bg: #e2e2e2;
--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;

View file

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

View file

@ -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);
}

View file

@ -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 */
#post-list {
margin-top: 1.75rem;
padding-right: 0.5rem;
a:hover {
text-decoration: none;
}
.post-preview {
padding: 0.25rem;
border-radius: 0.75rem;
border: 1px solid var(--card-border-color);
background: var(--card-bg);
&:hover {
background: var(--card-hovor-bg);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
/* Tablet */
@media all and (min-width: 768px) {
#post-list {
%img-radius {
border-radius: 0 $base-radius $base-radius 0;
}
&:not(:last-child) {
margin-bottom: 1.75rem;
}
h1 {
font-size: 1.4rem;
margin: 0;
}
.post-meta {
i {
font-size: 0.73rem;
&:not(:first-child) {
margin-left: 1.2rem;
}
.card {
.preview-img {
width: 20rem;
height: 11.5rem; // can hold 2 lines each for title and content
}
em {
@extend %normal-font-style;
}
.card-body {
min-height: 10.75rem;
width: 60%;
padding: 1.75rem 1.75rem 1.25rem 1.75rem;
.pin {
i {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
padding-left: 3px;
color: var(--pin-color);
.card-text {
display: inherit !important;
}
span {
display: none;
.post-meta {
i {
&:not(:first-child) {
margin-left: 1.75rem;
}
}
}
}
}
.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;
.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;
}
}
}
}
margin-top: 2.5rem;
}
.pagination {
@ -194,9 +211,9 @@
} /* .pagination */
}
/* Panel hidden */
@media all and (max-width: 1200px) {
/* Panel is visible */
@media all and (min-width: 1200px) {
#post-list {
padding-right: 0;
padding-right: 0.5rem;
}
}

View file

@ -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;
color: var(--link-color);
&:not(:hover) {
color: var(--link-color);
}
&:hover {
background: #2a408e;
color: #ffffff;
border-color: #2a408e;
&:not(.disabled)::before {
color: whitesmoke;
}
}
&.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-bottom-right-radius: 0;
border-radius: $base-radius 0 0 $base-radius;
left: 0.5px;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-radius: 0 $base-radius $base-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;
}
&:hover {
-webkit-transform: translate3d(0, -3px, 0);
transform: translate3d(0, -3px, 0);
box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
@extend %text-clip;
}
}
}

View file

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

View file

@ -1,12 +1,6 @@
---
---
/*
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 }}";
@import '{{ site.theme }}';
/* append your custom style below */

View file

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