diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index c69cfb3..cdfb095 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -5,11 +5,11 @@ about: Create a report to help us improve **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Make sure the bug is found in the latest code of the `master` branch. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue ## Describe the bug diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 0b8cb58..089503f 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -6,11 +6,11 @@ labels: enhancement **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Make sure the request is based on the latest code in the `master` branch. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue ## Is your feature request related to a problem? Please describe diff --git a/.github/ISSUE_TEMPLATE/help_wanted.md b/.github/ISSUE_TEMPLATE/help_wanted.md index 180240e..1f41040 100644 --- a/.github/ISSUE_TEMPLATE/help_wanted.md +++ b/.github/ISSUE_TEMPLATE/help_wanted.md @@ -6,11 +6,11 @@ labels: 'help wanted' **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow]. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue [forum]: https://talk.jekyllrb.com/ [stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index fb6c1d7..e3cda3f 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -6,11 +6,11 @@ labels: question **NOTE:** Before you start, the following should be completed. -- Read [tutorial][tutorial] to understand the usage and the correct effect of functional design. +- Read [Wiki][wiki] to understand the usage and the correct effect of functional design. - Make sure no [similar issue(including closed ones)][issues] exists. - Try to find the answer on [Jekyll Forum][forum] and [StackOverflow][stack_overflow]. -[tutorial]: https://cotes2020.github.io/chirpy-demo/categories/tutorial/ +[wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki [issues]: https://github.com/cotes2020/jekyll-theme-chirpy/issues?q=is%3Aissue [forum]: https://talk.jekyllrb.com/ [stack_overflow]: https://stackoverflow.com/questions/tagged/jekyll diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 8e41f4f..ae5da61 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,8 +2,6 @@ ## Type of change @@ -13,9 +11,14 @@ Please select the desired item checkbox and change it to "[x]", then delete opti --> - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) +- [ ] Improvement (refactoring and improving code) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update +## Additional context + + + ## How has this been tested -- Bundler version: -- Jekyll version: diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml index 1e05511..affd492 100644 --- a/.github/workflows/commitlint.yml +++ b/.github/workflows/commitlint.yml @@ -5,7 +5,7 @@ jobs: commitlint: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v3 with: fetch-depth: 0 - - uses: wagoid/commitlint-github-action@v4 + - uses: wagoid/commitlint-github-action@v5 diff --git a/.stylelintrc.json b/.stylelintrc.json index 09b3c87..e5cfad0 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -16,6 +16,7 @@ "rule-empty-line-before": [ "always", { "ignore": ["after-comment", "first-nested", "inside-block"] } - ] + ], + "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }] } } diff --git a/CHANGELOG.md b/CHANGELOG.md index f667c31..ecba390 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,55 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## [6.0.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.1...v6.0.0) (2023-05-16) + + +### ⚠ BREAKING CHANGES + +* rename assets origin configuration files + +### Features + +* add a hook to insert custom metadata in `head` tag ([#1015](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1015)) ([fe20341](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe203417d993508eedf5b9044fe53c4a566e44f9)) +* **i18n:** add sl-SI.yml with slovenian translations ([#989](https://github.com/cotes2020/jekyll-theme-chirpy/issues/989)) ([42a700a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/42a700aa37889faa32d7ec1f6776ce4b9d845dc4)) +* **i18n:** add Traditional Chinese (Taiwan) localization file ([#961](https://github.com/cotes2020/jekyll-theme-chirpy/issues/961)) ([d97f95f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d97f95fca0bcd450ea50709ffba0217f7e65d339)) +* **i18n:** added Swedish localization file ([#969](https://github.com/cotes2020/jekyll-theme-chirpy/issues/969)) ([fe70479](https://github.com/cotes2020/jekyll-theme-chirpy/commit/fe7047959e3694c6e603e764ded30dacd49e6aa9)) +* support hiding the modification date of a post ([#1020](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1020)) ([8da583d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8da583d403456f6460ec1a6ebcbb0c2ca8127ff6)) +* **ui:** improve code snippet design ([6d99f5c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/6d99f5cc36a69e5ccff51f81ba448c798d92e12e)) +* **ui:** improve the design for top bar ([83f1c34](https://github.com/cotes2020/jekyll-theme-chirpy/commit/83f1c34f92d85f3953ca9c9818be5399962bf1c9)) +* **ui:** new design footer content layout ([3210c59](https://github.com/cotes2020/jekyll-theme-chirpy/commit/3210c59466150dc04b4e4bdfc1ffd0e38adcff43)) +* **ui:** redesign the sidebar ([83bbe4a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/83bbe4ac939edfd1706e68c080562e3462f83519)) +* **ui:** show preview image in home page ([97b8dfe](https://github.com/cotes2020/jekyll-theme-chirpy/commit/97b8dfeed6ce7677f6472e28dc3b03f3c2968b12)) + + +### Bug Fixes + +* parameter parsing error in image URL ([#1022](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1022)) ([ee88cec](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ee88cec270ea5938f98913a3edf28a684cfbd6c0)) +* **rss:** double quotes in the post title will break the XML structure ([#965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/965)) ([1719d81](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1719d81d00b32b107c35b3903089be84a9b28a6c)) + + +### refactor + +* rename assets origin configuration files ([c283e77](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c283e7782fa9562d82d9855fd280a573fd58c75f)) + + +### Improvements + +* **assets:** reduce HTTP requests to CDN ([9d97120](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9d971201978e993a9af337d9cd5396a1ea225f00)) +* calculate heading font size dynamically ([#983](https://github.com/cotes2020/jekyll-theme-chirpy/issues/983)) ([52f5ee9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/52f5ee9cd3f92a6e8f25eaa203831546cda85db6)) +* **i18n:** set the global default locales to "en" ([#979](https://github.com/cotes2020/jekyll-theme-chirpy/issues/979)) ([61fdbcb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/61fdbcb83a3601ecae62ec230602b94a5eb832e1)) +* **tools:** avoid initialization interruption in single branch forks ([#992](https://github.com/cotes2020/jekyll-theme-chirpy/issues/992)) ([e90461a](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e90461aa3c81633863db6a12c5924ddba33bd08e)) +* **ui:** improve categories color in dark mode ([414dd13](https://github.com/cotes2020/jekyll-theme-chirpy/commit/414dd132aed70f4bd96cb712d00eacc82d2753e9)) +* **ui:** improve hover effect for post preview cards ([7626e4d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7626e4d00544346a46b6e5ff2f3a99d234defe09)) +* **ui:** improve hover effect of trending tags ([34499f0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/34499f0c927ce8fea3705dc2f0f0e6805cabda43)) +* **ui:** improve inline code in light mode ([e38309f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e38309f3bd1302ffe60b682136b6efaf96f4d9ae)) +* **ui:** improve related posts design ([2918da9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2918da9f29465618d557c082ff3a2f23d7519049)) +* **ui:** improve the color of prompts in dark mode ([8cbbcfa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8cbbcfa26da0addd88affada23a65770250f2404)) +* **ui:** lighten the link color in light-mode ([7c23a4e](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7c23a4ebc53b9e231c214e04f8ac0803cbcdb720)) +* **ui:** mute the marker in lists ([0c80552](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0c80552d772b874e2a161f1270294faa3af18d4a)) +* **ui:** uniform the muted text color ([aadf939](https://github.com/cotes2020/jekyll-theme-chirpy/commit/aadf9393d5c7f7528d453c4e68eba4f5cbb85bd9)) +* **ux:** improve LQIP fade in effect ([003e7b6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/003e7b60c93988a7bfae4c03a8346d4f8a5f0bb6)) + ## [5.6.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.6.0...v5.6.1) (2023-03-30) diff --git a/_data/locales/ar.yml b/_data/locales/ar.yml index 7f1725f..c608298 100644 --- a/_data/locales/ar.yml +++ b/_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: , 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: diff --git a/_data/locales/bg-BG.yml b/_data/locales/bg-BG.yml index 3e4103c..3e04993 100644 --- a/_data/locales/bg-BG.yml +++ b/_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: diff --git a/_data/locales/cs-CZ.yml b/_data/locales/cs-CZ.yml index 39b585c..e515c08 100644 --- a/_data/locales/cs-CZ.yml +++ b/_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: , 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: diff --git a/_data/locales/de-DE.yml b/_data/locales/de-DE.yml index 3088a3c..7ea3956 100644 --- a/_data/locales/de-DE.yml +++ b/_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: diff --git a/_data/locales/el-GR.yml b/_data/locales/el-GR.yml index fbc7c2b..ab5fb0e 100644 --- a/_data/locales/el-GR.yml +++ b/_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: , 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: @@ -90,4 +88,4 @@ categories: plural: Κατηγορίες post_measure: singular: Δημοσίευση - plural: Δημοσιεύσεις \ No newline at end of file + plural: Δημοσιεύσεις diff --git a/_data/locales/en.yml b/_data/locales/en.yml index 975f5f0..2f3f339 100644 --- a/_data/locales/en.yml +++ b/_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: , 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: diff --git a/_data/locales/es-ES.yml b/_data/locales/es-ES.yml index ee3a20f..5529230 100644 --- a/_data/locales/es-ES.yml +++ b/_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: diff --git a/_data/locales/fi-FI.yml b/_data/locales/fi-FI.yml index 605969f..c817d2b 100644 --- a/_data/locales/fi-FI.yml +++ b/_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: , 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: diff --git a/_data/locales/fr-FR.yml b/_data/locales/fr-FR.yml index 0d29a87..72b034d 100644 --- a/_data/locales/fr-FR.yml +++ b/_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: diff --git a/_data/locales/hu-HU.yml b/_data/locales/hu-HU.yml index f24b8c5..b09f2cd 100644 --- a/_data/locales/hu-HU.yml +++ b/_data/locales/hu-HU.yml @@ -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: diff --git a/_data/locales/id-ID.yml b/_data/locales/id-ID.yml index 59ec661..29ad156 100644 --- a/_data/locales/id-ID.yml +++ b/_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: diff --git a/_data/locales/it-IT.yml b/_data/locales/it-IT.yml index 03aa19c..cf7b691 100644 --- a/_data/locales/it-IT.yml +++ b/_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: , 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: diff --git a/_data/locales/ko-KR.yml b/_data/locales/ko-KR.yml index 73e1ded..4dd221b 100644 --- a/_data/locales/ko-KR.yml +++ b/_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: , df: post: - strftime: '%Y/%m/%d' - dayjs: 'YYYY/MM/DD' + strftime: "%Y/%m/%d" + dayjs: "YYYY/MM/DD" # categories page categories: diff --git a/_data/locales/my-MM.yml b/_data/locales/my-MM.yml index 9990c76..98848d5 100644 --- a/_data/locales/my-MM.yml +++ b/_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: diff --git a/_data/locales/pt-BR.yml b/_data/locales/pt-BR.yml index 831e6d3..4cef833 100644 --- a/_data/locales/pt-BR.yml +++ b/_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: diff --git a/_data/locales/ru-RU.yml b/_data/locales/ru-RU.yml index 3cd937c..4377300 100644 --- a/_data/locales/ru-RU.yml +++ b/_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: diff --git a/_data/locales/sl-SI.yml b/_data/locales/sl-SI.yml new file mode 100644 index 0000000..7ab18b1 --- /dev/null +++ b/_data/locales/sl-SI.yml @@ -0,0 +1,91 @@ +# The layout text of site + +# ----- Commons label ----- + +layout: + post: Objava #Post + category: Kategorija #Category + tag: Oznaka #Tag + +# The tabs of sidebar +tabs: + # format: : + home: Domov #Home + categories: Kategorije #Categories + tags: Oznake #Tags + archives: Arhiv #Archives + about: O meni #About + +# the text displayed in the search bar & search results +search: + hint: išči #search + cancel: Prekliči #Cancel + no_results: Ups! Vsebina ni bila najdena #Oops! No results found. + +panel: + lastmod: Nedavno Posodobljeno #Recently Updated + trending_tags: Priljubljene Oznake #Trending Tags + toc: Vsebina #Contents + +copyright: + # Shown at the bottom of the post + license: + template: Ta objava je licencirana pod :LICENCE_NAME s strani avtorja. #This post is licensed under :LICENSE_NAME by the author. + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: Nekatere pravice pridržane. #Some rights reserved. + verbose: >- + Razen kjer navedeno drugače, vse objave spletnega dnevnika so licencirane + pod Creative Commons Attribution 4.0 International (CC BY 4.0) s strani avtorja. + +meta: Uporabljena :PLATFORM tema :THEME #Using the :PLATFORM theme :THEME + +not_found: + statment: Oprostite, hiperpovezava je neustrezna ali vsebina ne obstajata. #Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. + +notification: + update_found: Novejša različica vsebine je na voljo. #A new version of content is available. + update: Posodobi #Update + +# ----- Posts related labels ----- + +post: + written_by: Od #By + posted: Objavljeno #Posted + updated: Posodobljeno #Updated + words: besede #words + pageview_measure: ogledi #views + read_time: + unit: min + prompt: beri #read + relate_posts: Nadaljnje branje #Further Reading + share: Deli #Share + button: + next: Novejše #Newer + previous: Starejše #Older + copy_code: + succeed: Kopirano! #Copied! + share_link: + title: Kopiraj povezavo #Copy link + succeed: Povezava uspešno kopirana! #Link copied successfully! + +# Date time format. +# See: , +df: + post: + strftime: "%e %b, %Y" + dayjs: "ll" + archives: + strftime: "%b" + dayjs: "MMM" + +# categories page +categories: + category_measure: + singular: kategorija #category + plural: kategorije #categories + post_measure: + singular: objava #post + plural: objave #posts diff --git a/_data/locales/sv-SE.yml b/_data/locales/sv-SE.yml new file mode 100644 index 0000000..7ec2ee2 --- /dev/null +++ b/_data/locales/sv-SE.yml @@ -0,0 +1,91 @@ +# The layout text of site + +# ----- Commons label ----- + +layout: + post: Inlägg #Post + category: Kategori #Category + tag: Tagga #Tag + +# The tabs of sidebar +tabs: + # format: : + home: Hem #Home + categories: Kategorier #Categories + tags: Taggar #Tags + archives: Arkiv #Archives + about: Om #About + +# the text displayed in the search bar & search results +search: + hint: sök + cancel: Avbryt + no_results: Hoppsan! Hittade inga sökträffar. + +panel: + lastmod: Senast uppdaterad + trending_tags: Trendande taggar + toc: Innehåll + +copyright: + # Shown at the bottom of the post + license: + template: Den här posten är publicerad under licensen :LICENSE_NAME av författaren. + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: Vissa rättigheter är reserverade. + verbose: >- + Om inte annat anges är blogginläggen på denna webbplats licensierade + under Creative Commons Attribution 4.0 International (CC BY 4.0) av författaren. + +meta: Byggd med :PLATFORM och temat :THEME + +not_found: + statment: Ursäkta, vi har tappat bort den här webbadressen eller så pekar den på något som inte längre finns. + +notification: + update_found: Det finns en ny version av innehållet. + update: Uppdatera sidan + +# ----- Posts related labels ----- + +post: + written_by: Av + posted: Postad + updated: Uppdaterad + words: ord + pageview_measure: visningar + read_time: + unit: min + prompt: läsning + relate_posts: Mer läsning + share: Dela + button: + next: Nyare + previous: Äldre + copy_code: + succeed: Kopierat! + share_link: + title: Kopiera länk + succeed: Länken har kopierats! + +# Date time format. +# See: , +df: + post: + strftime: "%b %e, %Y" + dayjs: "ll" + archives: + strftime: "%b" + dayjs: "MMM" + +# categories page +categories: + category_measure: + singular: kategori + plural: kategorier + post_measure: + singular: inlägg + plural: inlägg diff --git a/_data/locales/tr-TR.yml b/_data/locales/tr-TR.yml index f7c2567..851f5fc 100644 --- a/_data/locales/tr-TR.yml +++ b/_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: diff --git a/_data/locales/uk-UA.yml b/_data/locales/uk-UA.yml index 6925e42..b605073 100644 --- a/_data/locales/uk-UA.yml +++ b/_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: diff --git a/_data/locales/vi-VN.yml b/_data/locales/vi-VN.yml index 592000d..617431a 100644 --- a/_data/locales/vi-VN.yml +++ b/_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: diff --git a/_data/locales/zh-CN.yml b/_data/locales/zh-CN.yml index 1463e95..f828134 100644 --- a/_data/locales/zh-CN.yml +++ b/_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: , df: post: - strftime: '%Y/%m/%d' - dayjs: 'YYYY/MM/DD' + strftime: "%Y/%m/%d" + dayjs: "YYYY/MM/DD" # categories page categories: diff --git a/_data/locales/zh-TW.yml b/_data/locales/zh-TW.yml new file mode 100644 index 0000000..911253b --- /dev/null +++ b/_data/locales/zh-TW.yml @@ -0,0 +1,83 @@ +# The layout text of site + +# ----- Commons label ----- + +layout: + post: 文章 + category: 分類 + tag: 標籤 + +# The tabs of sidebar +tabs: + # format: : + home: 首頁 + categories: 分類 + tags: 標籤 + archives: 封存 + about: 關於 + +# the text displayed in the search bar & search results +search: + hint: 搜尋 + cancel: 取消 + no_results: 沒有搜尋結果 + +panel: + lastmod: 最近更新 + trending_tags: 熱門標籤 + toc: 文章摘要 + +copyright: + # Shown at the bottom of the post + license: + template: 本文章以 :LICENSE_NAME 授權 + name: CC BY 4.0 + link: https://creativecommons.org/licenses/by/4.0/ + + # Displayed in the footer + brief: 保留部份權利。 + verbose: >- + 除非另有說明，否則本網誌的文章均由作者按照姓名標示 4.0 國際 (CC BY 4.0) 授權條款進行授權。 + +meta: 本網站使用 :PLATFORM 產生，採用 :THEME 主題 + +not_found: + statment: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。 + +notification: + update_found: 發現新版本更新。 + update: 更新 + +# ----- Posts related labels ----- + +post: + written_by: 作者 + posted: 發布於 + updated: 更新於 + words: 字 + pageview_measure: 次瀏覽 + read_time: + unit: 分鐘 + prompt: 閱讀 + relate_posts: 相關文章 + share: 分享 + button: + next: 下一篇 + previous: 上一篇 + copy_code: + succeed: 已複製！ + share_link: + title: 分享連結 + succeed: 已複製連結！ + +# Date time format. +# See: , +df: + post: + strftime: "%Y/%m/%d" + dayjs: "YYYY/MM/DD" + +# categories page +categories: + category_measure: 個分類 + post_measure: 篇文章 diff --git a/_data/assets/self_host.yml b/_data/origin/basic.yml similarity index 100% rename from _data/assets/self_host.yml rename to _data/origin/basic.yml diff --git a/_data/assets/cross_origin.yml b/_data/origin/cors.yml similarity index 63% rename from _data/assets/cross_origin.yml rename to _data/origin/cors.yml index 01d558f..cf8f0ec 100644 --- a/_data/assets/cross_origin.yml +++ b/_data/origin/cors.yml @@ -11,36 +11,36 @@ 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 jquery: - js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js + js: https://cdn.jsdelivr.net/npm/jquery@3.7.0/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 - js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js + css: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css + js: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js fontawesome: - css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css + css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css search: js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js mermaid: - js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js + js: https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js dayjs: js: - common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js - locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js - relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js - localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js + common: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js + locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/locale/:LOCALE.min.js + relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/relativeTime.min.js + localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/localizedFormat.min.js countup: js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html index 29b848f..ed918a9 100644 --- a/_includes/comments/giscus.html +++ b/_includes/comments/giscus.html @@ -1,44 +1,54 @@ diff --git a/_includes/datetime.html b/_includes/datetime.html index e659c5a..53258ba 100644 --- a/_includes/datetime.html +++ b/_includes/datetime.html @@ -4,12 +4,16 @@ --> {% assign wrap_elem = include.wrap | default: 'em' %} -{% assign df_strftime = site.data.locales[site.lang].df.post.strftime | default: '%d/%m/%Y' %} -{% assign df_dayjs = site.data.locales[site.lang].df.post.dayjs | default: 'DD/MM/YYYY' %} +{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %} +{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %} -<{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}" - data-ts="{{ include.date | date: '%s' }}" - data-df="{{ df_dayjs }}" - {% if include.tooltip %}data-toggle="tooltip" data-placement="bottom"{% endif %}> +<{{ wrap_elem }} + class="{% if include.class %}{{ include.class }}{% endif %}" + data-ts="{{ include.date | date: '%s' }}" + data-df="{{ df_dayjs }}" + {% if include.tooltip %} + data-bs-toggle="tooltip" data-bs-placement="bottom" + {% endif %} +> {{ include.date | date: df_strftime }} diff --git a/_includes/footer.html b/_includes/footer.html index f4b16d9..3b36c4a 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,36 +1,34 @@
-
-
-
-

- © {{ 'now' | date: "%Y" }} - {{ site.social.name }}. - {% if site.data.locales[site.lang].copyright.brief %} - {{ site.data.locales[site.lang].copyright.brief }} - {% endif %} -

-
- -
-

- - {%- capture _platform -%} +

+
+

+ {%- capture _platform -%} Jekyll - {%- endcapture -%} + {%- endcapture -%} - {%- capture _theme -%} + {%- capture _theme -%} Chirpy - {%- endcapture -%} + {%- endcapture -%} - {{ site.data.locales[site.lang].meta - | default: 'Using the :PLATFORM theme :THEME.' - | replace: ':PLATFORM', _platform | replace: ':THEME', _theme - }} -

-
+ {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }} +

+ +

+ {{- '©' }} + {{ 'now' | date: '%Y' }} + {{ site.social.name }}. + {% if site.data.locales[include.lang].copyright.brief %} + + {{- site.data.locales[include.lang].copyright.brief -}} + + {% endif %} +

diff --git a/_includes/head.html b/_includes/head.html index edec4b1..0c85fe1 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -58,15 +58,15 @@ {% include favicons.html %} {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %} - + {% else %} - {% for cdn in site.data.assets[origin].cdns %} + {% for cdn in site.data.origin[type].cdns %} {% endfor %} - + {% endif %} @@ -90,27 +90,27 @@ {% endif %} - + - + {% if site.toc and page.toc %} - + {% endif %} {% if page.layout == 'page' or page.layout == 'post' %} - + {% endif %} - - {% unless site.theme_mode %} {% include mode-toggle.html %} {% endunless %} + + {% include metadata-hook.html %} diff --git a/_includes/js-selector.html b/_includes/js-selector.html index 05ed99e..177aaf2 100644 --- a/_includes/js-selector.html +++ b/_includes/js-selector.html @@ -1,24 +1,35 @@ + + +{% assign urls = site.data.origin[type].jquery.js + | append: ',' + | append: site.data.origin[type].bootstrap.js + | append: ',' + | append: site.data.origin[type].search.js +%} + {% if page.layout == 'post' %} {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %} - + {% assign urls = urls | append: ',' | append: site.data.origin[type].countup.js %} {% endif %} {% endif %} -{% if page.layout == 'post' or page.layout == 'page' %} - - {% 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 = urls | append: ',' | append: site.data.origin[type].lazysizes.js %} - {% include jsdelivr-combine.html urls=_urls %} + {% unless page.layout == 'home' %} + + {% assign urls = urls + | append: ',' + | append: site.data.origin[type]['magnific-popup'].js + | append: ',' + | append: site.data.origin[type].clipboard.js + %} + {% endunless %} {% endif %} {% if page.layout == 'home' @@ -29,29 +40,39 @@ %} {% assign locale = site.lang | split: '-' | first %} - {% assign _urls = site.data.assets[origin].dayjs.js.common + {% assign urls = urls | append: ',' - | append: site.data.assets[origin].dayjs.js.locale + | append: site.data.origin[type].dayjs.js.common + | append: ',' + | append: site.data.origin[type].dayjs.js.locale | replace: ':LOCALE', locale | append: ',' - | append: site.data.assets[origin].dayjs.js.relativeTime + | append: site.data.origin[type].dayjs.js.relativeTime | append: ',' - | append: site.data.assets[origin].dayjs.js.localizedFormat + | append: site.data.origin[type].dayjs.js.localizedFormat %} - - {% include jsdelivr-combine.html urls=_urls %} {% endif %} +{% if page.content contains ' {% if page.math %} @@ -73,14 +94,10 @@ } }; - - + + {% endif %} - - - - {% if jekyll.environment == 'production' %} {% if site.pwa.enabled %} diff --git a/_includes/jsdelivr-combine.html b/_includes/jsdelivr-combine.html index 960eeb1..cffa699 100644 --- a/_includes/jsdelivr-combine.html +++ b/_includes/jsdelivr-combine.html @@ -5,7 +5,6 @@ {% assign domain = 'https://cdn.jsdelivr.net/' %} {% for url in urls %} - {% if url contains domain %} {% assign url_snippet = url | slice: domain.size, url.size %} @@ -16,15 +15,10 @@ {% endif %} {% elsif url contains '//' %} - - {% else %} - - {% endif %} - {% endfor %} {% if combined_urls %} diff --git a/_includes/lang.html b/_includes/lang.html new file mode 100644 index 0000000..19558a0 --- /dev/null +++ b/_includes/lang.html @@ -0,0 +1,8 @@ +{% comment %} + Detect appearance language and return it through variable "lang" +{% endcomment %} +{% if site.data.locales[site.lang] %} + {% assign lang = site.lang %} +{% else %} + {% assign lang = 'en' %} +{% endif %} diff --git a/_includes/mermaid.html b/_includes/mermaid.html index 2ec8029..967cfb4 100644 --- a/_includes/mermaid.html +++ b/_includes/mermaid.html @@ -1,59 +1,58 @@ - - - - - diff --git a/_includes/metadata-hook.html b/_includes/metadata-hook.html new file mode 100644 index 0000000..fd7e9bd --- /dev/null +++ b/_includes/metadata-hook.html @@ -0,0 +1 @@ + diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html index ada0061..a347750 100644 --- a/_includes/mode-toggle.html +++ b/_includes/mode-toggle.html @@ -1,14 +1,22 @@ - + +{% capture not_found %}

{{ site.data.locales[include.lang].search.no_results }}

{% endcapture %} diff --git a/_includes/search-results.html b/_includes/search-results.html index d19e3bd..e4ffb48 100644 --- a/_includes/search-results.html +++ b/_includes/search-results.html @@ -1,8 +1,7 @@ - + +
-
+
{% include trending-tags.html %}
diff --git a/_includes/sidebar.html b/_includes/sidebar.html index c570597..9fe0208 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -1,13 +1,10 @@ - + + +
+ diff --git a/_includes/toc.html b/_includes/toc.html index 0d1967c..1eb3dcd 100644 --- a/_includes/toc.html +++ b/_includes/toc.html @@ -6,11 +6,8 @@ {% endif %} {% if enable_toc %} -
-
{{- site.data.locales[site.lang].panel.toc -}}
+
+
{{- site.data.locales[include.lang].panel.toc -}}
- - - {% endif %} diff --git a/_includes/topbar.html b/_includes/topbar.html index 51fbf1a..0092f69 100644 --- a/_includes/topbar.html +++ b/_includes/topbar.html @@ -1,70 +1,70 @@ - +
-
+
+ {% assign paths = page.url | split: '/' %} - {% assign paths = page.url | split: '/' %} + {% if paths.size == 0 or page.layout == 'home' %} + + {{ site.data.locales[include.lang].tabs.home | capitalize }} - {% if paths.size == 0 or page.layout == 'home' %} - - {{ site.data.locales[site.lang].tabs.home | capitalize }} + {% else %} + {% for item in paths %} + {% if forloop.first %} + + + {{ site.data.locales[include.lang].tabs.home | capitalize }} + + - {% else %} + {% elsif forloop.last %} + {% if page.collection == 'tabs' %} + {{ site.data.locales[include.lang].tabs[item] | default: page.title }} + {% else %} + {{ page.title }} + {% endif %} - {% for item in paths %} - - {% if forloop.first %} - - - {{ site.data.locales[site.lang].tabs.home | capitalize }} - - - - {% elsif forloop.last %} - - {% if page.collection == 'tabs' %} - {{ site.data.locales[site.lang].tabs[item] | default: page.title }} - {% else %} - {{ page.title }} + {% elsif page.layout == 'category' or page.layout == 'tag' %} + + + {{ site.data.locales[include.lang].tabs[item] | default: page.title }} + + {% endif %} - - {% elsif page.layout == 'category' or page.layout == 'tag' %} - - - {{ site.data.locales[site.lang].tabs[item] | default: page.title }} - - - {% endif %} - - {% endfor %} - - {% endif %} - - + {% endfor %} + {% endif %} + +
{% if page.layout == 'home' %} - {{- site.data.locales[site.lang].title | default: site.title -}} + {{- site.data.locales[include.lang].title | default: site.title -}} {% elsif page.collection == 'tabs' or page.layout == 'page' %} {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%} - {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}} + {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}} {% else %} - {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}} + {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}} {% endif %}
- + - {{ site.data.locales[site.lang].search.cancel }} + {{ site.data.locales[include.lang].search.cancel }}
-
diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html index d0f58a1..6b1d732 100644 --- a/_includes/trending-tags.html +++ b/_includes/trending-tags.html @@ -1,29 +1,27 @@ -{% comment %} - The trending tags list -{% endcomment %} + {% assign MAX = 10 %} -{% assign size_list = "" | split: "" %} -{% assign tag_list = "" | split: "" %} +{% assign size_list = '' | split: '' %} +{% assign tag_list = '' | split: '' %} {% for tag in site.tags %} {% assign size = tag | last | size %} {% assign size_list = size_list | push: size %} - {% assign tag_str = tag | first | append: "::" | append: size %} - {% assign tag_list = tag_list | push: tag_str %} + {% assign tag_str = tag | first | append: '::' | append: size %} + {% assign tag_list = tag_list | push: tag_str %} {% endfor %} {% assign size_list = size_list | sort | reverse %} {% assign tag_list = tag_list | sort_natural %} -{% assign trending_tags = "" | split: "" %} +{% assign trending_tags = '' | split: '' %} {% for size in size_list limit: MAX %} {% for tag_str in tag_list %} - {% assign tag = tag_str | split: "::" %} + {% assign tag = tag_str | split: '::' %} {% assign tag_name = tag | first %} {% assign tag_size = tag | last | plus: 0 %} {% if tag_size == size %} @@ -37,14 +35,12 @@ {% if trending_tags.size > 0 %}
-
{{- site.data.locales[site.lang].panel.trending_tags -}}
-
- - {% for tag_name in trending_tags %} - {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %} - {{ tag_name }} - {% endfor %} - +
{{- site.data.locales[include.lang].panel.trending_tags -}}
+
+ {% for tag_name in trending_tags %} + {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %} + {{ tag_name }} + {% endfor %}
{% endif %} diff --git a/_includes/update-list.html b/_includes/update-list.html index a4edd11..8d6e4b6 100644 --- a/_includes/update-list.html +++ b/_includes/update-list.html @@ -4,10 +4,10 @@ {% assign MAX_SIZE = 5 %} -{% assign all_list = "" | split: "" %} +{% assign all_list = '' | split: '' %} {% for post in site.posts %} - {% if post.last_modified_at %} + {% if post.last_modified_at and post.last_modified_at != post.date %} {% capture elem %} {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}} {% endcapture %} @@ -17,24 +17,25 @@ {% assign all_list = all_list | sort | reverse %} -{% assign update_list = "" | split: "" %} +{% assign update_list = '' | split: '' %} -{% for entry in all_list limit:MAX_SIZE %} +{% for entry in all_list limit: MAX_SIZE %} {% assign update_list = update_list | push: entry %} {% endfor %} {% if update_list.size > 0 %} -
-
{{- site.data.locales[site.lang].panel.lastmod -}}
-
    +
    {{- site.data.locales[include.lang].panel.lastmod -}}
    +
      {% for item in update_list %} - {% assign index = item | split: "::" | last | plus: 0 %} + {% assign index = item | split: '::' | last | plus: 0 %} {% assign post = site.posts[index] %} {% assign url = post.url | relative_url %} -
    • {{ post.title }}
      • +
    • + {{ post.title }} +
      • {% endfor %}
    -
- +
+ {% endif %} diff --git a/_javascript/home.js b/_javascript/home.js new file mode 100644 index 0000000..70af328 --- /dev/null +++ b/_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(); diff --git a/_javascript/modules/components/back-to-top.js b/_javascript/modules/components/back-to-top.js index 2519a9f..6088d76 100644 --- a/_javascript/modules/components/back-to-top.js +++ b/_javascript/modules/components/back-to-top.js @@ -4,10 +4,7 @@ export function back2top() { $(window).on('scroll', () => { - if ( - $(window).scrollTop() > 50 && - $('#sidebar-trigger').css('display') === 'none' - ) { + if ($(window).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); @@ -15,12 +12,6 @@ export function back2top() { }); $('#back-to-top').on('click', () => { - $('body,html').animate( - { - scrollTop: 0 - }, - 800 - ); - return false; + window.scrollTo(0, 0); }); } diff --git a/_javascript/modules/components/clipboard.js b/_javascript/modules/components/clipboard.js index cff2d09..f803843 100644 --- a/_javascript/modules/components/clipboard.js +++ b/_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,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 --- */ diff --git a/_javascript/modules/components/convert-title.js b/_javascript/modules/components/convert-title.js deleted file mode 100644 index 649f7be..0000000 --- a/_javascript/modules/components/convert-title.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Top bar title auto change while scrolling up/down in mobile screens. - */ -const titleSelector = 'div.post>h1:first-of-type'; -const $pageTitle = $(titleSelector); -const $topbarTitle = $('#topbar-title'); -const defaultTitleText = $topbarTitle.text().trim(); - -export function convertTitle() { - if ( - $pageTitle.length === 0 /* on Home page */ || - $pageTitle.hasClass('dynamic-title') || - $topbarTitle.is(':hidden') - ) { - /* not in mobile views */ - return; - } - - let pageTitleText = $pageTitle.text().trim(); - let hasScrolled = false; - let lastScrollTop = 0; - - if ($('#page-category').length || $('#page-tag').length) { - /* The title in Category or Tag page will be " <count_of_posts>" */ - if (/\s/.test(pageTitleText)) { - pageTitleText = pageTitleText.replace(/[0-9]/g, '').trim(); - } - } - - // When the page is scrolled down and then refreshed, the topbar title needs to be initialized - if ($pageTitle.offset().top < $(window).scrollTop()) { - $topbarTitle.text(pageTitleText); - } - - let options = { - rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem) - threshold: [0, 1] - }; - - let observer = new IntersectionObserver((entries) => { - if (!hasScrolled) { - hasScrolled = true; - return; - } - - let curScrollTop = $(window).scrollTop(); - let isScrollDown = lastScrollTop < curScrollTop; - lastScrollTop = curScrollTop; - let heading = entries[0]; - - if (isScrollDown) { - if (heading.intersectionRatio === 0) { - $topbarTitle.text(pageTitleText); - } - } else { - if (heading.intersectionRatio === 1) { - $topbarTitle.text(defaultTitleText); - } - } - }, options); - - observer.observe(document.querySelector(titleSelector)); - - /* Click title will scroll to top */ - $topbarTitle.on('click', function () { - $('body,html').animate({ scrollTop: 0 }, 800); - }); -} diff --git a/_javascript/modules/components/img-extra.js b/_javascript/modules/components/img-extra.js deleted file mode 100644 index 47b8404..0000000 --- a/_javascript/modules/components/img-extra.js +++ /dev/null @@ -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'); - }); -} diff --git a/_javascript/modules/components/img-lazyload.js b/_javascript/modules/components/img-lazyload.js new file mode 100644 index 0000000..b79c87c --- /dev/null +++ b/_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'); + }); +} diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js new file mode 100644 index 0000000..7f78d99 --- /dev/null +++ b/_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' + } + }); +} diff --git a/_javascript/modules/components/locale-datetime.js b/_javascript/modules/components/locale-datetime.js index 7bab64b..214f2bf 100644 --- a/_javascript/modules/components/locale-datetime.js +++ b/_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)); }); } diff --git a/_javascript/modules/components/pageviews.js b/_javascript/modules/components/pageviews.js index 790fd95..d07d4aa 100644 --- a/_javascript/modules/components/pageviews.js +++ b/_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) { - /* 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); diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js index 2e38f5e..7862f39 100644 --- a/_javascript/modules/components/search-display.js +++ b/_javascript/modules/components/search-display.js @@ -4,7 +4,7 @@ const $btnSbTrigger = $('#sidebar-trigger'); const $btnSearchTrigger = $('#search-trigger'); const $btnCancel = $('#search-cancel'); -const $main = $('#main'); +const $content = $('#main>.row'); const $topbarTitle = $('#topbar-title'); const $searchWrapper = $('#search-wrapper'); const $resultWrapper = $('#search-result-wrapper'); @@ -58,7 +58,7 @@ class ResultSwitch { // the block method must be called before $(#main) unloaded. ScrollBlocker.on(); $resultWrapper.removeClass(C_UNLOADED); - $main.addClass(C_UNLOADED); + $content.addClass(C_UNLOADED); ScrollBlocker.resultVisible = true; } } @@ -70,7 +70,7 @@ class ResultSwitch { $hints.removeClass(C_UNLOADED); } $resultWrapper.addClass(C_UNLOADED); - $main.removeClass(C_UNLOADED); + $content.removeClass(C_UNLOADED); // now the release method must be called after $(#main) display ScrollBlocker.off(); diff --git a/_javascript/modules/components/smooth-scroll.js b/_javascript/modules/components/smooth-scroll.js deleted file mode 100644 index 09f75d0..0000000 --- a/_javascript/modules/components/smooth-scroll.js +++ /dev/null @@ -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() */ -} diff --git a/_javascript/modules/components/tooltip-loader.js b/_javascript/modules/components/tooltip-loader.js index 809487a..a906600 100644 --- a/_javascript/modules/components/tooltip-loader.js +++ b/_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) + ); } diff --git a/_javascript/modules/components/topbar-switcher.js b/_javascript/modules/components/topbar-switcher.js deleted file mode 100644 index f3eebb7..0000000 --- a/_javascript/modules/components/topbar-switcher.js +++ /dev/null @@ -1,93 +0,0 @@ -/** - * Hide Header on scroll down - */ -import ScrollHelper from './utils/scroll-helper'; - -const $searchInput = $('#search-input'); -const delta = ScrollHelper.getTopbarHeight(); - -let didScroll; -let lastScrollTop = 0; - -function hasScrolled() { - let st = $(window).scrollTop(); - - /* Make sure they scroll more than delta */ - if (Math.abs(lastScrollTop - st) <= delta) { - return; - } - - if (st > lastScrollTop) { - /* Scroll down */ - ScrollHelper.hideTopbar(); - - if ($searchInput.is(':focus')) { - $searchInput.trigger('blur'); /* remove focus */ - } - } else { - /* Scroll up */ - - // has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling - if (st + $(window).height() < $(document).height()) { - if (ScrollHelper.hasScrollUpTask()) { - return; - } - - if (ScrollHelper.topbarLocked()) { - // avoid redundant scroll up event from smooth scrolling - ScrollHelper.unlockTopbar(); - } else { - if (ScrollHelper.orientationLocked()) { - // avoid device auto scroll up on orientation change - ScrollHelper.unLockOrientation(); - } else { - ScrollHelper.showTopbar(); - } - } - } - } - - lastScrollTop = st; -} // hasScrolled() - -function handleLandscape() { - if ($(window).scrollTop() === 0) { - return; - } - ScrollHelper.lockOrientation(); - ScrollHelper.hideTopbar(); -} - -export function switchTopbar() { - const orientation = screen.orientation; - if (orientation) { - orientation.onchange = () => { - const type = orientation.type; - if (type === 'landscape-primary' || type === 'landscape-secondary') { - handleLandscape(); - } - }; - } else { - // for the browsers that not support `window.screen.orientation` API - $(window).on('orientationchange', () => { - if ($(window).width() < $(window).height()) { - // before rotating, it is still in portrait mode. - handleLandscape(); - } - }); - } - - $(window).on('scroll', () => { - if (didScroll) { - return; - } - didScroll = true; - }); - - setInterval(() => { - if (didScroll) { - hasScrolled(); - didScroll = false; - } - }, 250); -} diff --git a/_javascript/modules/components/utils/scroll-helper.js b/_javascript/modules/components/utils/scroll-helper.js deleted file mode 100644 index 78ad9c8..0000000 --- a/_javascript/modules/components/utils/scroll-helper.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * A tool for smooth scrolling and topbar switcher - */ - -const ATTR_TOPBAR_VISIBLE = 'data-topbar-visible'; -const $body = $('body'); -const $topbarWrapper = $('#topbar-wrapper'); - -export default class ScrollHelper { - static scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor - static topbarIsLocked = false; - static orientationIsLocked = false; - - static hideTopbar() { - $body.attr(ATTR_TOPBAR_VISIBLE, 'false'); - } - - static showTopbar() { - $body.attr(ATTR_TOPBAR_VISIBLE, 'true'); - } - - // scroll up - - static addScrollUpTask() { - ScrollHelper.scrollUpCount += 1; - if (!ScrollHelper.topbarIsLocked) { - ScrollHelper.topbarIsLocked = true; - } - } - - static popScrollUpTask() { - ScrollHelper.scrollUpCount -= 1; - } - - static hasScrollUpTask() { - return ScrollHelper.scrollUpCount > 0; - } - - static topbarLocked() { - return ScrollHelper.topbarIsLocked === true; - } - - static unlockTopbar() { - ScrollHelper.topbarIsLocked = false; - } - - static getTopbarHeight() { - return $topbarWrapper.outerHeight(); - } - - // orientation change - - static orientationLocked() { - return ScrollHelper.orientationIsLocked === true; - } - - static lockOrientation() { - ScrollHelper.orientationIsLocked = true; - } - - static unLockOrientation() { - ScrollHelper.orientationIsLocked = false; - } -} diff --git a/_javascript/modules/layouts/topbar.js b/_javascript/modules/layouts/topbar.js index 76549bf..cfcd0ed 100644 --- a/_javascript/modules/layouts/topbar.js +++ b/_javascript/modules/layouts/topbar.js @@ -1,9 +1,5 @@ -import { convertTitle } from '../components/convert-title'; import { displaySearch } from '../components/search-display'; -import { switchTopbar } from '../components/topbar-switcher'; export function initTopbar() { - convertTitle(); displaySearch(); - switchTopbar(); } diff --git a/_javascript/modules/plugins.js b/_javascript/modules/plugins.js index 8d65435..2bb844a 100644 --- a/_javascript/modules/plugins.js +++ b/_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'; diff --git a/_javascript/page.js b/_javascript/page.js index 0d497f0..7b31813 100644 --- a/_javascript/page.js +++ b/_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(); diff --git a/_javascript/post.js b/_javascript/post.js index 4b472bc..c77d6e1 100644 --- a/_javascript/post.js +++ b/_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(); diff --git a/_layouts/archives.html b/_layouts/archives.html index f86b417..18e95f5 100644 --- a/_layouts/archives.html +++ b/_layouts/archives.html @@ -3,8 +3,10 @@ layout: page # The Archives of posts. --- -{% assign df_strftime_m = site.data.locales[site.lang].df.archives.strftime | default: '/ %m' %} -{% assign df_dayjs_m = site.data.locales[site.lang].df.archives.dayjs | default: '/ MM' %} +{% include lang.html %} + +{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %} +{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %} <div id="archives" class="pl-xl-3"> @@ -21,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> diff --git a/_layouts/categories.html b/_layouts/categories.html index b207186..0515097 100644 --- a/_layouts/categories.html +++ b/_layouts/categories.html @@ -3,8 +3,10 @@ layout: page # All the Categories of posts --- -{% assign HEAD_PREFIX = "h_" %} -{% assign LIST_PREFIX = "l_" %} +{% include lang.html %} + +{% assign HEAD_PREFIX = 'h_' %} +{% assign LIST_PREFIX = 'l_' %} {% assign group_index = 0 %} @@ -16,7 +18,7 @@ layout: page {% assign first_post = posts_of_category | first %} {% if category_name == first_post.categories[0] %} - {% assign sub_categories = "" | split: "" %} + {% assign sub_categories = '' | split: '' %} {% for post in posts_of_category %} {% assign second_category = post.categories[1] %} @@ -30,89 +32,107 @@ layout: page {% assign sub_categories = sub_categories | sort %} {% assign sub_categories_size = sub_categories | size %} - <div class="card categories"> - <!-- top-category --> - <div id="{{ HEAD_PREFIX }}{{ group_index }}" - class="card-header d-flex justify-content-between hide-border-bottom"> - <span> - <i class="far fa-folder{% if sub_categories_size > 0 %}-open{% endif %} fa-fw"></i> + <div class="card categories"> + <!-- top-category --> + <div + id="{{ HEAD_PREFIX }}{{ group_index }}" + class="card-header d-flex justify-content-between hide-border-bottom" + > + <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> + {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %} + <a href="{{ _category_url | relative_url }}" class="mx-2">{{ category_name }}</a> - <!-- content count --> - {% assign top_posts_size = site.categories[category_name] | size %} - <span class="text-muted small font-weight-light"> - {% if sub_categories_size > 0 %} - {{ sub_categories_size }} - {% if sub_categories_size > 1 %} - {{ site.data.locales[site.lang].categories.category_measure.plural - | default: site.data.locales[site.lang].categories.category_measure }} - {% else %} - {{ site.data.locales[site.lang].categories.category_measure.singular - | default: site.data.locales[site.lang].categories.category_measure }} - {% endif %}, - {% endif %} - - {{ top_posts_size }} - - {% if top_posts_size > 1 %} - {{ site.data.locales[site.lang].categories.post_measure.plural - | default: site.data.locales[site.lang].categories.post_measure }} - {% else %} - {{ site.data.locales[site.lang].categories.post_measure.singular - | default: site.data.locales[site.lang].categories.post_measure }} - {% endif %} - </span> - </span> - - <!-- arrow --> - {% if sub_categories_size > 0%} - <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" - aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger" - class="category-trigger hide-border-bottom"> - <i class="fas fa-fw fa-angle-down"></i> - </a> - {% else %} - <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled"> - <i class="fas fa-fw fa-angle-right"></i> - </span> - {% endif %} - - </div> <!-- .card-header --> - - <!-- Sub-categories --> - {% if sub_categories_size > 0 %} - <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true"> - <ul class="list-group"> - {% for sub_category in sub_categories %} - <li class="list-group-item"> - <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> - - {% assign posts_size = site.categories[sub_category] | size %} + <!-- content count --> + {% assign top_posts_size = site.categories[category_name] | size %} <span class="text-muted small font-weight-light"> - {{ posts_size }} + {% if sub_categories_size > 0 %} + {{ sub_categories_size }} + {% if sub_categories_size > 1 %} + {{ + site.data.locales[lang].categories.category_measure.plural + | default: site.data.locales[lang].categories.category_measure + }} + {% else %} + {{ + site.data.locales[lang].categories.category_measure.singular + | default: site.data.locales[lang].categories.category_measure + }} + {% endif -%} + , + {% endif %} - {% if posts_size > 1 %} - {{ site.data.locales[site.lang].categories.post_measure.plural - | default: site.data.locales[site.lang].categories.post_measure }} + {{ top_posts_size }} + + {% if top_posts_size > 1 %} + {{ + site.data.locales[lang].categories.post_measure.plural + | default: site.data.locales[lang].categories.post_measure + }} {% else %} - {{ site.data.locales[site.lang].categories.post_measure.singular - | default: site.data.locales[site.lang].categories.post_measure }} + {{ + site.data.locales[lang].categories.post_measure.singular + | default: site.data.locales[lang].categories.post_measure + }} {% endif %} </span> - </li> - {% endfor %} - </ul> - </div> - {% endif %} + </span> - </div> <!-- .card --> + <!-- arrow --> + {% if sub_categories_size > 0 %} + <a + href="#{{ LIST_PREFIX }}{{ group_index }}" + data-bs-toggle="collapse" + aria-expanded="true" + aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger" + class="category-trigger hide-border-bottom" + > + <i class="fas fa-fw fa-angle-down"></i> + </a> + {% else %} + <span data-bs-toggle="collapse" class="category-trigger hide-border-bottom disabled"> + <i class="fas fa-fw fa-angle-right"></i> + </span> + {% endif %} + </div> + <!-- .card-header --> + + <!-- Sub-categories --> + {% if sub_categories_size > 0 %} + <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true"> + <ul class="list-group"> + {% for sub_category in sub_categories %} + <li class="list-group-item"> + <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="mx-2">{{ sub_category }}</a> + + {% assign posts_size = site.categories[sub_category] | size %} + <span class="text-muted small font-weight-light"> + {{ posts_size }} + + {% if posts_size > 1 %} + {{ + site.data.locales[lang].categories.post_measure.plural + | default: site.data.locales[lang].categories.post_measure + }} + {% else %} + {{ + site.data.locales[lang].categories.post_measure.singular + | default: site.data.locales[lang].categories.post_measure + }} + {% endif %} + </span> + </li> + {% endfor %} + </ul> + </div> + {% endif %} + </div> + <!-- .card --> {% assign group_index = group_index | plus: 1 %} - {% endif %} {% endfor %} diff --git a/_layouts/category.html b/_layouts/category.html index 07129bb..84fa487 100644 --- a/_layouts/category.html +++ b/_layouts/category.html @@ -3,20 +3,22 @@ layout: page # The Category layout --- +{% 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"> - <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' %} - </li> + <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 %} + </li> {% endfor %} </ul> </div> diff --git a/_layouts/default.html b/_layouts/default.html index a98c230..bc434d6 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -3,9 +3,11 @@ layout: compress # Default layout --- -<!DOCTYPE html> +<!doctype html> -{% include assets-origin.html %} +{% include origin-type.html %} + +{% include lang.html %} {% capture prefer_mode %} {% if site.theme_mode %} @@ -14,30 +16,21 @@ layout: compress {% endcapture %} <!-- `site.alt_lang` can specify a language different from the UI --> -<html lang="{{ site.alt_lang | default: site.lang }}"{{ prefer_mode }}> - +<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}> {% include head.html %} - <body data-topbar-visible="true"> - - {% include sidebar.html %} - - {% include topbar.html %} + <body> + {% include sidebar.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"> + {% include topbar.html lang=lang %} {{ content }} + {% include search-results.html lang=lang %} </div> + </div> - {% include search-results.html %} - - </div> <!-- #main-wrapper --> - - {% include footer.html %} - - {% if page.mermaid %} - {% include mermaid.html %} - {% endif %} + {% include footer.html lang=lang %} <div id="mask"></div> @@ -46,26 +39,38 @@ layout: compress </a> {% if site.pwa.enabled %} - <div id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true" - data-animation="true" data-autohide="false"> + <div + id="notification" + class="toast" + role="alert" + aria-live="assertive" + aria-atomic="true" + data-bs-animation="true" + data-bs-autohide="false" + > <div class="toast-header"> - <button type="button" class="ml-2 ml-auto close" data-dismiss="toast" aria-label="Close"> - <span aria-hidden="true">×</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[site.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[site.lang].notification.update }} + {{ site.data.locales[lang].notification.update }} </button> </div> </div> {% endif %} - {% include search-loader.html %} - {% include js-selector.html %} - </body> + {% if page.mermaid %} + {% include mermaid.html %} + {% endif %} + {% include search-loader.html %} + </body> </html> diff --git a/_layouts/home.html b/_layouts/home.html index 42b9fe2..d1be9c3 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,8 +1,10 @@ --- layout: page -# The Home page layout +refactor: true --- +{% include lang.html %} + {% assign pinned = site.posts | where: 'pin', 'true' %} {% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %} @@ -40,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> - {% include datetime.html date=post.date %} + <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 -%} @@ -73,21 +82,21 @@ 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[site.lang].post.pin_prompt }}</span> + <span>{{ site.data.locales[lang].post.pin_prompt }}</span> </div> {% endif %} </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 %} diff --git a/_layouts/page.html b/_layouts/page.html index 4285c85..fc2c915 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,62 +2,63 @@ layout: default --- -{% include assets-origin.html %} +{% include lang.html %} +{% include origin-type.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 %} - {% capture _content %} + <div class="post {{ padding | strip }} px-md-2"> + {% capture _content %} {% if layout.refactor or page.layout == 'page' %} - {% include refactor-content.html content=content %} + {% include refactor-content.html content=content lang=lang %} {% else %} {{ content }} {% endif %} {% endcapture %} - {% if page.layout == 'page' or page.collection == 'tabs' %} - {% assign tab_key = page.title | downcase %} - {% assign title = site.data.locales[site.lang].tabs[tab_key] | default: page.title %} - <h1 class="dynamic-title"> - {{ title }} - </h1> - <div class="post-content"> + {% if page.layout == 'page' or page.collection == 'tabs' %} + {% assign tab_key = page.title | downcase %} + {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %} + <h1 class="dynamic-title"> + {{ title }} + </h1> + <div class="post-content"> + {{ _content }} + </div> + {% else %} {{ _content }} - </div> - {% else %} - {{ _content }} - {% endif %} - + {% endif %} </div> - </div> <!-- #core-wrapper --> + </div> + <!-- #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 %} - {% include trending-tags.html %} + {% include update-list.html lang=lang %} + {% include trending-tags.html lang=lang %} </div> {% for _include in layout.panel_includes %} {% assign _include_path = _include | append: '.html' %} - {% include {{ _include_path }} %} + {% include {{ _include_path }} lang=lang %} {% endfor %} </div> - </div> <!-- 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"> - {% for _include in layout.tail_includes %} - {% assign _include_path = _include | append: '.html' %} - {% include {{ _include_path }} %} - {% endfor %} + <div class="row"> + <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 %} + {% endfor %} + </div> </div> -</div> {% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 367def5..3cd6de7 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -9,20 +9,22 @@ tail_includes: - comments --- +{% include lang.html %} + <h1 data-toc-skip>{{ page.title }}</h1> <div class="post-meta text-muted"> <!-- published date --> <span> - {{ site.data.locales[site.lang].post.posted }} - {% include datetime.html date=page.date tooltip=true %} + {{ site.data.locales[lang].post.posted }} + {% include datetime.html date=page.date tooltip=true lang=lang %} </span> <!-- lastmod date --> - {% if page.last_modified_at %} + {% if page.last_modified_at and page.last_modified_at != page.date %} <span> - {{ site.data.locales[site.lang].post.updated }} - {% include datetime.html date=page.last_modified_at tooltip=true %} + {{ site.data.locales[lang].post.updated }} + {% include datetime.html date=page.last_modified_at tooltip=true lang=lang %} </span> {% endif %} @@ -54,7 +56,7 @@ tail_includes: {% assign authors = page.authors %} {% endif %} - {{ site.data.locales[site.lang].post.written_by }} + {{ site.data.locales[lang].post.written_by }} <em> {% if authors %} @@ -75,12 +77,12 @@ tail_includes: <em id="pv" class="pageviews"> <i class="fas fa-spinner fa-spin fa-fw"></i> </em> - {{ site.data.locales[site.lang].post.pageview_measure }} + {{ site.data.locales[lang].post.pageview_measure }} </span> {% endif %} <!-- read time --> - {% include read-time.html content=content prompt=true %} + {% include read-time.html content=content prompt=true lang=lang %} </div> </div> <!-- .d-flex --> @@ -96,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 -%} @@ -107,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" > @@ -121,20 +123,20 @@ tail_includes: d-flex justify-content-between align-items-center mt-3 pt-5 pb-2"> <div class="license-wrapper"> - {% if site.data.locales[site.lang].copyright.license.template %} + {% if site.data.locales[lang].copyright.license.template %} {% capture _replacement %} - <a href="{{ site.data.locales[site.lang].copyright.license.link }}"> - {{ site.data.locales[site.lang].copyright.license.name }} + <a href="{{ site.data.locales[lang].copyright.license.link }}"> + {{ site.data.locales[lang].copyright.license.name }} </a> {% endcapture %} - {{ site.data.locales[site.lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} + {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} {% endif %} </div> - {% include post-sharing.html %} + {% include post-sharing.html lang=lang %} </div><!-- .post-tail-bottom --> diff --git a/_layouts/tag.html b/_layouts/tag.html index 5fd528f..3b90b8c 100644 --- a/_layouts/tag.html +++ b/_layouts/tag.html @@ -3,19 +3,21 @@ layout: page # The layout for Tag 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"> - <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' %} - </li> + <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 %} + </li> {% endfor %} </ul> </div> diff --git a/_layouts/tags.html b/_layouts/tags.html index b3321f7..7800ca0 100644 --- a/_layouts/tags.html +++ b/_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"> - - {% 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> diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md index 7cacc70..2770996 100644 --- a/_posts/2019-08-08-text-and-typography.md +++ b/_posts/2019-08-08-text-and-typography.md @@ -4,6 +4,7 @@ author: cotes date: 2019-08-08 11:33:00 +0800 categories: [Blogging, Demo] tags: [typography] +pin: true math: true mermaid: true image: @@ -14,16 +15,15 @@ image: This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography. -## Titles ---- -# H1 - heading +## Headings + +<h1 class="mt-5">H1 - heading</h1> <h2 data-toc-skip>H2 - heading</h2> <h3 data-toc-skip>H3 - heading</h3> <h4>H4 - heading</h4> ---- ## Paragraph @@ -122,7 +122,7 @@ fi; ```sass @import "colors/light-typography", - "colors/dark-typography" + "colors/dark-typography"; ``` {: file='_sass/jekyll-theme-chirpy.scss'} diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index 120ab7f..100c41c 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -71,7 +71,7 @@ Starting with version `4.1.0`, if you want to overwrite the SASS variables defin ### Customing Static Assets -Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/assets/cross_origin.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published. +Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/origin/cors.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published. Also, if you'd like to self-host the static assets, please refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme). diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e16184f..f7b1390 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -34,64 +34,46 @@ body { env(safe-area-inset-bottom) env(safe-area-inset-left); color: var(--text-color); -webkit-font-smoothing: antialiased; - font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; - line-height: 1.75; + font-family: $font-family-base; } /* --- Typography --- */ -h1 { - @extend %heading; +@for $i from 1 through 5 { + h#{$i} { + @extend %heading; - font-size: 1.9rem; -} + @if $i > 1 { + @extend %section; + @extend %anchor; + } -h2 { - @extend %heading; - @extend %section; - @extend %anchor; + @if $i < 5 { + $factor: 0.18rem; - font-size: 1.5rem; -} + @if $i == 1 { + $factor: 0.23rem; + } -h3 { - @extend %heading; - @extend %section; - @extend %anchor; - - font-size: 1.2rem; -} - -h4 { - @extend %heading; - @extend %section; - @extend %anchor; - - font-size: 1.15rem; -} - -h5 { - @extend %heading; - @extend %section; - @extend %anchor; - - font-size: 1.1rem; + font-size: 1rem + (5 - $i) * $factor; + } @else { + font-size: 1rem; + } + } } 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 +87,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 +181,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,26 +241,17 @@ 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; - } } #access-lastmod { @@ -400,9 +372,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 +420,6 @@ i { .post-meta { font-size: 0.85rem; - word-spacing: 1px; a { &:not([class]):hover { @@ -513,6 +510,10 @@ i { dl > dd { margin-left: 1rem; } + + ::marker { + color: var(--text-muted-color); + } } /* .post-content */ .tag:hover { @@ -523,7 +524,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 +532,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 +541,6 @@ i { .img-link { color: transparent; display: inline-flex; - overflow: hidden; } .shimmer { @@ -569,22 +560,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 +635,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; @@ -689,12 +684,17 @@ i { /* --- Overriding --- */ /* magnific-popup */ + figure .mfp-title { text-align: center; padding-right: 0; margin-top: 0.5rem; } +.mfp-img { + transition: none; +} + /* mermaid */ .mermaid { text-align: center; @@ -709,6 +709,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 +734,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 +909,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 { @@ -957,18 +934,7 @@ $sidebar-display: 'sidebar-display'; #topbar-wrapper { height: $topbar-height; - position: fixed; - top: 0; - left: $sidebar-width; /* same as sidebar width */ - 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); - - [data-topbar-visible='false'] & { - top: -$topbar-height; /* same as topbar height. */ - } + background-color: var(--topbar-bg); } #topbar { @@ -1007,7 +973,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 +1002,6 @@ $sidebar-display: 'sidebar-display'; &:focus { box-shadow: none; - background: center; &.form-control { &::-moz-placeholder { @@ -1139,6 +1104,8 @@ $sidebar-display: 'sidebar-display'; } #core-wrapper { + line-height: 1.75; + .categories, #tags, #archives { @@ -1170,16 +1137,11 @@ $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); } -#core-wrapper, -#panel-wrapper { - margin-top: $topbar-height; /* same as the height of topbar */ -} - #topbar-wrapper.row, #main > .row, #search-result-wrapper > .row { @@ -1189,12 +1151,14 @@ $sidebar-display: 'sidebar-display'; /* --- button back-to-top --- */ #back-to-top { - $size: 2.7em; + $size: 3rem; display: none; z-index: 1; cursor: pointer; position: fixed; + right: 1rem; + bottom: 2rem; background: var(--button-bg); color: var(--btn-backtotop-color); padding: 0; @@ -1202,11 +1166,14 @@ $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; + &:hover { + transform: translate3d(0, -5px, 0); + -webkit-transform: translate3d(0, -5px, 0); + } + i { line-height: $size; position: relative; @@ -1214,11 +1181,6 @@ $sidebar-display: 'sidebar-display'; } } -#back-to-top:hover { - transform: translate3d(0, -5px, 0); - -webkit-transform: translate3d(0, -5px, 0); -} - #notification { @-webkit-keyframes popup { from { @@ -1251,8 +1213,6 @@ $sidebar-display: 'sidebar-display'; } &.toast { - display: none; - &.show { display: block; min-width: 20rem; @@ -1264,7 +1224,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 +1234,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 +1250,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 +1260,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,20 +1300,29 @@ $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}); } + + #back-to-top { + visibility: hidden; + } } #sidebar { @@ -1387,16 +1330,10 @@ $sidebar-display: 'sidebar-display'; transform: translateX(-#{$sidebar-width}); /* hide */ -webkit-transform: translateX(-#{$sidebar-width}); - - .cursor { - transition: none; - } } #main-wrapper { @include slide; - - padding-top: $topbar-height; } #topbar, @@ -1443,17 +1380,11 @@ $sidebar-display: 'sidebar-display'; display: none; ~ .post-content { - margin-top: 3rem; + margin-top: 2.5rem; } } } /* max-width: 849px */ -@media all and (max-width: 849px) and (orientation: portrait) { - [data-topbar-visible='false'] #topbar-wrapper { - top: 0; - } -} - /* Phone & Pad */ @media all and (min-width: 577px) and (max-width: 1199px) { footer .d-flex > div { @@ -1473,8 +1404,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 { @@ -1486,8 +1436,14 @@ $sidebar-display: 'sidebar-display'; } #search-result-wrapper { - margin-top: 3rem; max-width: $main-content-max-width; + justify-content: start !important; + } + + .post { + h1 { + margin-top: 3rem; + } } div.post-content .table-wrapper > table { @@ -1515,50 +1471,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 +1545,8 @@ $sidebar-display: 'sidebar-display'; } @media all and (min-width: 1650px) { + $icon-gap: 1rem; + #main-wrapper, footer { margin-left: $sidebar-width-large; @@ -1640,14 +1558,15 @@ $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 ); } - #topbar, #main, footer > .container { max-width: $main-content-max-width; + padding-left: 1.75rem !important; + padding-right: 1.75rem !important; } #core-wrapper, @@ -1664,115 +1583,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 */ diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 44f21d2..10e0d69 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -7,7 +7,7 @@ %heading { color: var(--heading-color); font-weight: 400; - font-family: Lato, 'Microsoft Yahei', sans-serif; + font-family: $font-family-heading; } %section { @@ -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%); } diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index e3a93bb..df756a7 100644 --- a/_sass/addon/syntax.scss +++ b/_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-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); } } } diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 1db532e..0c68281 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -5,26 +5,23 @@ /* 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 */ $code-font-size: 0.85rem !default; + +/* fonts */ + +$font-family-base: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; +$font-family-heading: Lato, 'Microsoft Yahei', sans-serif; diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss index 8c22d24..36e9651 100644 --- a/_sass/colors/dark-syntax.scss +++ b/_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; diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index dc6f543..310828e 100644 --- a/_sass/colors/dark-typography.scss +++ b/_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); - --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; } diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss index a4dde91..040a5f5 100644 --- a/_sass/colors/light-syntax.scss +++ b/_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 */ diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index f04629b..6a68821 100644 --- a/_sass/colors/light-typography.scss +++ b/_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; - --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; diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss index 5716f9d..2628ba4 100644 --- a/_sass/jekyll-theme-chirpy.scss +++ b/_sass/jekyll-theme-chirpy.scss @@ -1,24 +1,19 @@ /*! - * The styles for Jekyll theme Chirpy - * - * Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy) + * Chirpy v6.0.0 (https://github.com/cotes2020/jekyll-theme-chirpy) * © 2019 Cotes Chung * MIT Licensed */ -@import - "colors/light-typography", - "colors/dark-typography", - - "addon/module", - "addon/variables", - "variables-hook", - "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'; diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss index 31c8e8e..330d3d3 100644 --- a/_sass/layout/categories.scss +++ b/_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); } diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index cdf1f09..2a10842 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -2,6 +2,96 @@ Style for Homepage */ +#post-list { + margin-top: 2rem; + + &:only-child { + margin-bottom: 3.75rem; + } + + 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 +142,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 +192,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 +215,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; } } diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 2690cf4..3d01b4d 100644 --- a/_sass/layout/post.scss +++ b/_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; - 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 { + h4 { @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; } } } diff --git a/_tabs/tags.md b/_tabs/tags.md index c8e213a..ded3adc 100644 --- a/_tabs/tags.md +++ b/_tabs/tags.md @@ -1,5 +1,5 @@ --- layout: tags -icon: fas fa-tag +icon: fas fa-tags order: 2 --- diff --git a/assets/404.html b/assets/404.html index 4490ea5..0337bac 100644 --- a/assets/404.html +++ b/assets/404.html @@ -9,6 +9,8 @@ redirect_from: - /posts/ --- +{% include lang.html %} + <div class="lead"> - <p>{{site.data.locales[site.lang].not_found.statment }}</p> + <p>{{ site.data.locales[lang].not_found.statment }}</p> </div> diff --git a/assets/css/style.scss b/assets/css/style.scss index 6ff7046..a8805f4 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -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 */ diff --git a/assets/feed.xml b/assets/feed.xml index 358d44f..a244a56 100644 --- a/assets/feed.xml +++ b/assets/feed.xml @@ -26,7 +26,7 @@ permalink: /feed.xml {% assign post_absolute_url = post.url | absolute_url %} <entry> <title>{{ post.title }} - + {{ post.date | date_to_xmlschema }} {% if post.last_modified_at %} {{ post.last_modified_at | date_to_xmlschema }} diff --git a/assets/lib b/assets/lib index 24ebdb7..5f28c7d 160000 --- a/assets/lib +++ b/assets/lib @@ -1 +1 @@ -Subproject commit 24ebdb708f3f5451df953cb5f9deb3ad4433404a +Subproject commit 5f28c7d5107a1c2e30381765194269680a3d0eae diff --git a/jekyll-theme-chirpy.gemspec b/jekyll-theme-chirpy.gemspec index a5ee02f..73bbfcc 100644 --- a/jekyll-theme-chirpy.gemspec +++ b/jekyll-theme-chirpy.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "jekyll-theme-chirpy" - spec.version = "5.6.1" + spec.version = "6.0.0" spec.authors = ["Cotes Chung"] spec.email = ["cotes.chung@gmail.com"] diff --git a/package.json b/package.json index 51c1ce1..95d596c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jekyll-theme-chirpy", - "version": "5.6.1", + "version": "6.0.0", "description": "A minimal, responsive and feature-rich Jekyll theme for technical writing.", "repository": { "type": "git", diff --git a/rollup.config.js b/rollup.config.js index a0d063f..907ca3e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -38,6 +38,7 @@ function build(filename) { export default [ build('commons'), + build('home'), build('categories'), build('page'), build('post'), diff --git a/tools/init b/tools/init index af3ce76..29b7834 100755 --- a/tools/init +++ b/tools/init @@ -77,9 +77,9 @@ check_env() { _check_init } -checkout_latest_tag() { - tag=$(git describe --tags "$(git rev-list --tags --max-count=1)") - git reset --hard "$tag" +checkout_latest_release() { + hash=$(git log --grep="chore(release):" -1 --pretty="%H") + git reset --hard "$hash" } init_files() { @@ -96,10 +96,10 @@ init_files() { _sedi "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml fi - # remove the other fies + # remove the other files rm -rf _posts/* - # build assest + # build assets npm i && npm run build # track the js output @@ -114,7 +114,7 @@ commit() { main() { check_env - checkout_latest_tag + checkout_latest_release init_files commit }