From 97b8dfeed6ce7677f6472e28dc3b03f3c2968b12 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 18 Mar 2023 06:28:44 +0800 Subject: [PATCH 01/18] feat(ui): show preview image in home page --- _data/locales/ar.yml | 10 +- _data/locales/bg-BG.yml | 2 - _data/locales/cs-CZ.yml | 10 +- _data/locales/de-DE.yml | 2 - _data/locales/el-GR.yml | 12 +- _data/locales/en.yml | 10 +- _data/locales/es-ES.yml | 4 +- _data/locales/fi-FI.yml | 10 +- _data/locales/fr-FR.yml | 2 - _data/locales/hu-HU.yml | 8 +- _data/locales/id-ID.yml | 2 - _data/locales/it-IT.yml | 13 +- _data/locales/ko-KR.yml | 6 +- _data/locales/my-MM.yml | 2 - _data/locales/pt-BR.yml | 2 - _data/locales/ru-RU.yml | 2 - _data/locales/tr-TR.yml | 2 - _data/locales/uk-UA.yml | 2 - _data/locales/vi-VN.yml | 3 - _data/locales/zh-CN.yml | 6 +- _includes/js-selector.html | 23 +- _includes/refactor-content.html | 43 +-- _javascript/home.js | 8 + _javascript/modules/components/img-extra.js | 27 -- .../modules/components/img-lazyload.js | 15 + _javascript/modules/components/img-popup.js | 22 ++ _javascript/modules/components/pageviews.js | 8 +- _javascript/modules/plugins.js | 3 +- _javascript/page.js | 10 +- _javascript/post.js | 6 +- _layouts/home.html | 33 ++- _layouts/page.html | 9 +- _sass/addon/commons.scss | 11 +- _sass/addon/module.scss | 11 +- _sass/colors/dark-typography.scss | 13 +- _sass/colors/light-typography.scss | 9 +- _sass/layout/home.scss | 265 +++++++++++------- _sass/layout/post.scss | 4 +- rollup.config.js | 1 + 39 files changed, 347 insertions(+), 284 deletions(-) create mode 100644 _javascript/home.js delete mode 100644 _javascript/modules/components/img-extra.js create mode 100644 _javascript/modules/components/img-lazyload.js create mode 100644 _javascript/modules/components/img-popup.js diff --git a/_data/locales/ar.yml b/_data/locales/ar.yml index 7f1725f..2ad043b 100644 --- a/_data/locales/ar.yml +++ b/_data/locales/ar.yml @@ -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..f8fe28c 100644 --- a/_data/locales/bg-BG.yml +++ b/_data/locales/bg-BG.yml @@ -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..6f636e3 100644 --- a/_data/locales/cs-CZ.yml +++ b/_data/locales/cs-CZ.yml @@ -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..7e77d95 100644 --- a/_data/locales/de-DE.yml +++ b/_data/locales/de-DE.yml @@ -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..79e45dc 100644 --- a/_data/locales/el-GR.yml +++ b/_data/locales/el-GR.yml @@ -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..fe8bf1f 100644 --- a/_data/locales/en.yml +++ b/_data/locales/en.yml @@ -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..f26cd89 100644 --- a/_data/locales/es-ES.yml +++ b/_data/locales/es-ES.yml @@ -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..7327663 100644 --- a/_data/locales/fi-FI.yml +++ b/_data/locales/fi-FI.yml @@ -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..d79169c 100644 --- a/_data/locales/hu-HU.yml +++ b/_data/locales/hu-HU.yml @@ -38,9 +38,9 @@ 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. @@ -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..c052f9a 100644 --- a/_data/locales/id-ID.yml +++ b/_data/locales/id-ID.yml @@ -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..f29e7be 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..6f9cea8 100644 --- a/_data/locales/ko-KR.yml +++ b/_data/locales/ko-KR.yml @@ -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..2669e55 100644 --- a/_data/locales/my-MM.yml +++ b/_data/locales/my-MM.yml @@ -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..d0071c6 100644 --- a/_data/locales/pt-BR.yml +++ b/_data/locales/pt-BR.yml @@ -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..91aaf06 100644 --- a/_data/locales/ru-RU.yml +++ b/_data/locales/ru-RU.yml @@ -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/tr-TR.yml b/_data/locales/tr-TR.yml index f7c2567..e8ec928 100644 --- a/_data/locales/tr-TR.yml +++ b/_data/locales/tr-TR.yml @@ -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..58b3ba5 100644 --- a/_data/locales/uk-UA.yml +++ b/_data/locales/uk-UA.yml @@ -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..6b37512 100644 --- a/_data/locales/vi-VN.yml +++ b/_data/locales/vi-VN.yml @@ -39,7 +39,6 @@ copyright: 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. - 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 +67,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..624706f 100644 --- a/_data/locales/zh-CN.yml +++ b/_data/locales/zh-CN.yml @@ -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/_includes/js-selector.html b/_includes/js-selector.html index 05ed99e..7d2224c 100644 --- a/_includes/js-selector.html +++ b/_includes/js-selector.html @@ -9,14 +9,17 @@ {% 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 = site.data.assets[origin].lazysizes.js %} + + {% unless page.layout == 'home' %} + {% assign _urls = _urls + | append: ',' + | append: site.data.assets[origin]['magnific-popup'].js + | append: ',' + | append: site.data.assets[origin].clipboard.js + %} + {% endunless %} {% include jsdelivr-combine.html urls=_urls %} {% endif %} @@ -43,9 +46,9 @@ {% endif %} {% case page.layout %} - {% when 'categories', 'post', 'page' %} + {% when 'home', 'categories', 'post', 'page' %} {% assign type = page.layout %} - {% when 'home', 'archives', 'category', 'tag' %} + {% when 'archives', 'category', 'tag' %} {% assign type = 'misc' %} {% else %} {% assign type = 'commons' %} diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 668d92b..2dfddbd 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -45,9 +45,8 @@ -{% assign IMG_TAG = ' {% assign _left = _left | append: ' data-proofer-ignore' %} - - {% assign _parent = _right | slice: 1, 4 %} + {% if page.layout == 'post' %} + + {% assign _parent = _right | slice: 1, 4 %} - {% if _parent == '' %} - - {% assign _size = _img_content | size | minus: 1 %} - {% capture _class %} - class="img-link{% unless _lqip %} shimmer{% endunless %}" - {% endcapture %} - {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %} + {% if _parent == '' %} + + {% assign _size = _img_content | size | minus: 1 %} + {% capture _class %} + class="img-link{% unless _lqip %} shimmer{% endunless %}" + {% endcapture %} + {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %} + {% else %} + + {%- capture _wrapper_start -%} + + {%- endcapture -%} + {% assign _img_content = _img_content | append: _wrapper_start %} + {% assign _right = _right | prepend: '> {%- capture _wrapper_start -%} - +
{%- endcapture -%} {% assign _img_content = _img_content | append: _wrapper_start %} - {% assign _right = _right | prepend: '> - {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %} + {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %} {% endfor %} @@ -277,5 +287,4 @@ {% assign _content = _heading_content %} - {{ _content }} 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/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: */ - $('.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/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/plugins.js b/_javascript/modules/plugins.js index 8d65435..8e0797e 100644 --- a/_javascript/modules/plugins.js +++ b/_javascript/modules/plugins.js @@ -1,6 +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'; diff --git a/_javascript/page.js b/_javascript/page.js index 0d497f0..bd12c71 100644 --- a/_javascript/page.js +++ b/_javascript/page.js @@ -1,9 +1,15 @@ import { basic, initSidebar, initTopbar } from './modules/layouts'; -import { imgExtra, initClipboard, smoothScroll } from './modules/plugins'; +import { + imgLazy, + imgPopup, + initClipboard, + smoothScroll +} from './modules/plugins'; basic(); initSidebar(); initTopbar(); -imgExtra(); +imgLazy(); +imgPopup(); initClipboard(); smoothScroll(); diff --git a/_javascript/post.js b/_javascript/post.js index 4b472bc..307e5ea 100644 --- a/_javascript/post.js +++ b/_javascript/post.js @@ -1,6 +1,7 @@ import { basic, initSidebar, initTopbar } from './modules/layouts'; import { - imgExtra, + imgLazy, + imgPopup, initLocaleDatetime, initClipboard, smoothScroll, @@ -11,7 +12,8 @@ import { basic(); initSidebar(); initTopbar(); -imgExtra(); +imgLazy(); +imgPopup(); initLocaleDatetime(); initClipboard(); toc(); diff --git a/_layouts/home.html b/_layouts/home.html index afc4af6..0fda074 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -1,6 +1,6 @@ --- layout: page -# The Home page layout +refactor: true --- {% include lang.html %} @@ -42,9 +42,16 @@ layout: page
{% for post in posts %} -
- -
+ +
+ {% if post.image %} + {% if post.image.lqip %} + {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} + {% endif %} + + {% endif %} + +

{{ post.title }}

@@ -56,16 +63,16 @@ layout: page

-
+
- + {% include datetime.html date=post.date lang=lang %} {% if post.categories.size > 0 %} - - + + {% for category in post.categories %} {{ category }} {%- unless forloop.last -%},{%- endunless -%} @@ -75,7 +82,7 @@ layout: page
{% if post.pin %} -
+
{{ site.data.locales[lang].post.pin_prompt }}
@@ -83,13 +90,13 @@ layout: page
- -
- + +
+ {% endfor %}
-{% 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 1bfaa75..76d30c4 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,14 +2,17 @@ layout: default --- -{% include assets-origin.html %} - {% include lang.html %} +{% include assets-origin.html %}
-
+ {% capture padding %} + {% unless page.layout == 'home' %}pl-1 pr-1{% endunless %} + {% endcapture %} + +
{% capture _content %} {% if layout.refactor or page.layout == 'page' %} {% include refactor-content.html content=content lang=lang %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 69ec76e..3bc5ff4 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -278,7 +278,7 @@ i { } [data-topbar-visible='true'] & > div { - top: 6rem; + top: 5.5rem; } } @@ -422,7 +422,6 @@ i { .post-meta { font-size: 0.85rem; - word-spacing: 1px; a { &:not([class]):hover { @@ -549,7 +548,6 @@ i { .img-link { color: transparent; display: inline-flex; - overflow: hidden; } .shimmer { @@ -1275,7 +1273,7 @@ $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 @@ -1307,11 +1305,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); diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index b13083a..ba3d54b 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -75,6 +75,7 @@ %no-cursor { -webkit-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; } @@ -109,9 +110,18 @@ color: rgba(117, 117, 117, 0.9); -webkit-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; } +%text-clip { + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + /* ---------- scss mixin --------- */ @mixin no-text-decoration { @@ -146,7 +156,6 @@ @mixin align-center { position: relative; left: 50%; - -webkit-transform: translateX(-50%); transform: translateX(-50%); } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index dc6f543..2f0adb5 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -54,8 +54,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,9 +66,9 @@ --btn-share-color: #6c757d; --btn-share-hover-color: #bfc1ca; --relate-post-date: var(--text-muted-color); - --card-bg: #212121; + --card-bg: #1e1e1e; --card-hovor-bg: #3a3a3a; - --card-border-color: rgb(53, 53, 60); + --card-border-color: #2e2e2e; --card-box-shadow: var(--main-bg); --kbd-wrap-color: #6a6a6a; --kbd-text-color: #d3d3d3; @@ -101,13 +99,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-typography.scss b/_sass/colors/light-typography.scss index f04629b..bd9a0e9 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -10,7 +10,7 @@ /* Common color */ --text-color: #34343c; - --text-muted-color: gray; + --text-muted-color: #8e8e8e; --heading-color: black; --blockquote-border-color: #eeeeee; --blockquote-text-color: #9a9a9a; @@ -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, @@ -57,13 +57,12 @@ --btn-paginator-hover-color: var(--sidebar-bg); --btn-paginator-border-color: var(--sidebar-bg); --btn-text-color: #676666; - --pin-bg: #f5f5f5; - --pin-color: #999fa4; /* Posts */ --toc-highlight: #563d7c; --btn-share-hover-color: var(--link-color); - --card-hovor-bg: #eeeeee; + --card-bg: white; + --card-hovor-bg: #e2e2e2; --card-border-color: #ececec; --card-box-shadow: rgba(234, 234, 234, 0.76); --label-color: #616161; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index cdf1f09..ad3d043 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -1,6 +1,122 @@ /* Style for Homepage */ +$card-radius: 0.5rem; + +#post-list { + margin-top: 1.75rem; + + a.card-wrapper { + display: block; + + &:hover { + text-decoration: none; + } + + &:not(:last-child) { + margin-bottom: 1.25rem; + } + } + + .card { + border-radius: $card-radius; + border: 0; + background: var(--card-bg); + box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, + rgba(172, 169, 169, 0.08) 0 0 0 1px; + + &::before { + content: ''; + position: absolute; + background: var(--card-hovor-bg); + opacity: 0; + width: 100%; + height: 100%; + border-radius: $card-radius; + z-index: 1; + } + + &:hover { + border-color: var(--card-hovor-bg); + + &::before { + opacity: 0.5; + } + } + + %img-radius { + border-radius: $card-radius $card-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; + @include mt-mb(0.5rem); + + font-size: 1.25rem; + } + + %muted { + color: var(--text-muted-color) !important; + } + + .card-text.post-content { + margin-top: 0; + margin-bottom: 0.5rem; + + @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); @@ -52,87 +168,58 @@ } /* .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); - } - - &: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; - } - } - - em { - @extend %normal-font-style; - } - - .pin { - i { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - padding-left: 3px; - color: var(--pin-color); - } - - span { - display: none; - } - } - } - - .post-content { - margin-top: 0.6rem; - margin-bottom: 0.6rem; - color: var(--post-list-text-color); - - > p { - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - } - } /* .post-preview */ -} /* #post-list */ - @media (hover: hover) { - .post-preview { - transition: all 0.35s ease-in-out; + #post-list .card { + transition: border-color 0.35s ease-in-out; + + &::before { + transition: opacity 0.35s ease-in-out; + } + } +} + +/* Tablet */ +@media all and (min-width: 768px) { + #post-list { + %img-radius { + border-radius: 0 $card-radius $card-radius 0; + } + + .card { + .preview-img { + width: 20rem; + height: 11.5rem; // can hold 2 lines each for title and content + } + + .card-body { + min-height: 10.75rem; + width: 60%; + padding: 1.75rem 1.75rem 1.25rem 1.75rem; + + .card-title { + margin-top: 0; + margin-bottom: 0.5rem; + } + + .card-text { + display: inherit !important; + } + + .post-meta { + i { + &:not(:first-child) { + margin-left: 1.75rem; + } + } + } + } + } } } /* Hide SideBar and TOC */ @media all and (max-width: 830px) { - .post-preview { + #post-list .card { margin-left: -0.5rem; margin-right: -0.5rem; } @@ -151,27 +238,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 +261,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..fa691f8 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -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; 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'), From 2918da9f29465618d557c082ff3a2f23d7519049 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 07:20:32 +0800 Subject: [PATCH 02/18] perf(ui): improve related posts design --- _includes/related-posts.html | 24 +++++++++----------- _layouts/home.html | 2 +- _sass/addon/commons.scss | 34 +++++++++++++++++++++++----- _sass/addon/module.scss | 6 ++--- _sass/addon/variables.scss | 2 +- _sass/colors/dark-typography.scss | 3 +-- _sass/colors/light-typography.scss | 3 +-- _sass/layout/home.scss | 36 ------------------------------ _sass/layout/post.scss | 13 +---------- 9 files changed, 48 insertions(+), 75 deletions(-) diff --git a/_includes/related-posts.html b/_includes/related-posts.html index 69e9970..0981d08 100644 --- a/_includes/related-posts.html +++ b/_includes/related-posts.html @@ -85,20 +85,18 @@ {% for entry in index_list %} {% assign index = entry | plus: 0 %} {% assign post = site.posts[index] %} -
- -
- {% include datetime.html date=post.date class="small" lang=include.lang %} -

{{ post.title }}

-
-

- {% include no-linenos.html content=post.content %} - {{ content | markdownify | strip_html | truncate: 200 | escape }} -

-
+ +
+ {% include datetime.html date=post.date class="small" lang=include.lang %} +

{{ post.title }}

+
+

+ {% include no-linenos.html content=post.content %} + {{ content | markdownify | strip_html | truncate: 200 | escape }} +

- -
+
+ {% endfor %}
diff --git a/_layouts/home.html b/_layouts/home.html index 0fda074..1844f62 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -43,7 +43,7 @@ refactor: true
{% for post in posts %} -
+
{% if post.image %} {% if post.image.lqip %} {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 3bc5ff4..b03bd7f 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -204,12 +204,12 @@ footer { @extend %text-color; &:link { - @include no-text-decoration; + @extend %no-decoration; } &:hover { @extend %link-hover; - @include no-text-decoration; + @extend %no-decoration; } } @@ -647,10 +647,26 @@ i { } .no-text-decoration { - @include no-text-decoration; + @extend %no-decoration; } -/* Overrided BS4 Tooltip */ +.card.post-preview { + border-radius: $card-radius; + border: 0; + background: var(--card-bg); + box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, + var(--card-border-color) 0 0 0 1px; + + &:hover { + background-color: var(--card-hovor-bg); + + img { + filter: brightness(0.7) !important; + } + } +} + +/* Overwrite bootstrap tooltip */ .tooltip-inner { font-size: 0.7rem; max-width: 220px; @@ -733,7 +749,7 @@ $sidebar-display: 'sidebar-display'; @extend %sidebar-links; &:hover { - @include no-text-decoration; + @extend %no-decoration; color: var(--sidebar-active-color) !important; } @@ -930,6 +946,14 @@ $sidebar-display: 'sidebar-display'; } /* #sidebar */ @media (hover: hover) { + .card.post-preview { + transition: all 0.35s ease-in-out; + + img { + transition: all 0.35s ease-in-out; + } + } + #sidebar ul > li:last-child::after { transition: top 0.5s ease; } diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index ba3d54b..64dc4a5 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -122,12 +122,12 @@ -webkit-box-orient: vertical; } -/* ---------- scss mixin --------- */ - -@mixin no-text-decoration { +%no-decoration { text-decoration: none; } +/* ---------- scss mixin --------- */ + @mixin mt-mb($value) { margin-top: $value; margin-bottom: $value; diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 83faba1..7b1ae11 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -21,9 +21,9 @@ $topbar-height: 3rem !default; $search-max-width: 210px !default; $footer-height: 5rem !default; $footer-height-mobile: 6rem !default; /* screen width: <= 576px */ - $main-content-max-width: 1250px !default; $bottom-min-height: 35rem !default; +$card-radius: 0.5rem; /* syntax highlight */ diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 2f0adb5..439c2f3 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -68,8 +68,7 @@ --relate-post-date: var(--text-muted-color); --card-bg: #1e1e1e; --card-hovor-bg: #3a3a3a; - --card-border-color: #2e2e2e; - --card-box-shadow: var(--main-bg); + --card-border-color: rgba(172, 169, 169, 0.17); --kbd-wrap-color: #6a6a6a; --kbd-text-color: #d3d3d3; --kbd-bg-color: #242424; diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index bd9a0e9..f953832 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -63,8 +63,7 @@ --btn-share-hover-color: var(--link-color); --card-bg: white; --card-hovor-bg: #e2e2e2; - --card-border-color: #ececec; - --card-box-shadow: rgba(234, 234, 234, 0.76); + --card-border-color: rgba(172, 169, 169, 0.13); --label-color: #616161; --relate-post-date: rgba(30, 55, 70, 0.4); --footnote-target-bg: lightcyan; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index ad3d043..1ebf312 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -1,7 +1,6 @@ /* Style for Homepage */ -$card-radius: 0.5rem; #post-list { margin-top: 1.75rem; @@ -19,31 +18,6 @@ $card-radius: 0.5rem; } .card { - border-radius: $card-radius; - border: 0; - background: var(--card-bg); - box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, - rgba(172, 169, 169, 0.08) 0 0 0 1px; - - &::before { - content: ''; - position: absolute; - background: var(--card-hovor-bg); - opacity: 0; - width: 100%; - height: 100%; - border-radius: $card-radius; - z-index: 1; - } - - &:hover { - border-color: var(--card-hovor-bg); - - &::before { - opacity: 0.5; - } - } - %img-radius { border-radius: $card-radius $card-radius 0 0; } @@ -168,16 +142,6 @@ $card-radius: 0.5rem; } /* .page-item */ } /* .pagination */ -@media (hover: hover) { - #post-list .card { - transition: border-color 0.35s ease-in-out; - - &::before { - transition: opacity 0.35s ease-in-out; - } - } -} - /* Tablet */ @media all and (min-width: 768px) { #post-list { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index fa691f8..ea6ecfc 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -333,24 +333,13 @@ h1 + .post-meta { } a:hover { - text-decoration: none; + @extend %no-decoration; } .card { - border-color: var(--card-border-color); - background-color: var(--card-bg); - box-shadow: 0 0 5px 0 var(--card-box-shadow); - transition: all 0.3s ease-in-out; - h3 { @extend %text-color; } - - &:hover { - -webkit-transform: translate3d(0, -3px, 0); - transform: translate3d(0, -3px, 0); - box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15); - } } } From aadf9393d5c7f7528d453c4e68eba4f5cbb85bd9 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 08:44:10 +0800 Subject: [PATCH 03/18] perf(ui): uniform the muted text color --- _sass/addon/commons.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index b03bd7f..151ce62 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -666,6 +666,11 @@ i { } } +/* overwrite bootstrap muted */ +.text-muted { + color: var(--text-muted-color) !important; +} + /* Overwrite bootstrap tooltip */ .tooltip-inner { font-size: 0.7rem; From 34499f0c927ce8fea3705dc2f0f0e6805cabda43 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 08:59:17 +0800 Subject: [PATCH 04/18] perf(ui): improve hover effect of trending tags --- _includes/trending-tags.html | 6 ++---- _sass/addon/commons.scss | 25 +++++++++---------------- _sass/layout/post.scss | 10 ++++++++++ 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/_includes/trending-tags.html b/_includes/trending-tags.html index a36108c..131480b 100644 --- a/_includes/trending-tags.html +++ b/_includes/trending-tags.html @@ -1,6 +1,4 @@ -{% comment %} - The trending tags list -{% endcomment %} + {% assign MAX = 10 %} @@ -41,7 +39,7 @@
{% for tag_name in trending_tags %} {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %} - {{ tag_name }} + {{ tag_name }} {% endfor %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 151ce62..8aba040 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -260,20 +260,15 @@ 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; } } @@ -522,7 +517,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; @@ -531,14 +525,6 @@ i { &:not(:last-child) { margin-right: 0.2rem; } - - &:hover { - @extend %tag-hover; - - border-bottom: none; - text-decoration: none; - color: #d2603a; - } } .rounded-10 { @@ -678,6 +664,13 @@ i { text-align: left; } +/* Overwrite bootstrap outline button */ +.btn.btn-outline-primary { + &:hover { + border-color: #007bff !important; + } +} + .disabled { color: rgb(206, 196, 196); pointer-events: auto; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index ea6ecfc..e4cd2cf 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -155,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 { From 7626e4d00544346a46b6e5ff2f3a99d234defe09 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 09:52:15 +0800 Subject: [PATCH 05/18] perf(ui): improve hover effect for post preview cards - home cards - navigator buttons at the bottom post --- _sass/addon/commons.scss | 44 ++++++++++++++++++------------ _sass/colors/dark-typography.scss | 5 ++-- _sass/colors/light-typography.scss | 3 +- _sass/layout/post.scss | 35 ++++++++++++++---------- 4 files changed, 52 insertions(+), 35 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 8aba040..226d83d 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -395,6 +395,32 @@ 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; @@ -636,22 +662,6 @@ i { @extend %no-decoration; } -.card.post-preview { - border-radius: $card-radius; - border: 0; - background: var(--card-bg); - box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0, - var(--card-border-color) 0 0 0 1px; - - &:hover { - background-color: var(--card-hovor-bg); - - img { - filter: brightness(0.7) !important; - } - } -} - /* overwrite bootstrap muted */ .text-muted { color: var(--text-muted-color) !important; @@ -666,7 +676,7 @@ i { /* Overwrite bootstrap outline button */ .btn.btn-outline-primary { - &:hover { + &:not(.disabled):hover { border-color: #007bff !important; } } diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 439c2f3..c7db19f 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -67,8 +67,9 @@ --btn-share-hover-color: #bfc1ca; --relate-post-date: var(--text-muted-color); --card-bg: #1e1e1e; - --card-hovor-bg: #3a3a3a; - --card-border-color: rgba(172, 169, 169, 0.17); + --card-hovor-bg: #464d51; + --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 10px 0, + rgb(137, 135, 135, 0.3) 0 0 0 1px; --kbd-wrap-color: #6a6a6a; --kbd-text-color: #d3d3d3; --kbd-bg-color: #242424; diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index f953832..a1cc2d8 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -63,7 +63,8 @@ --btn-share-hover-color: var(--link-color); --card-bg: white; --card-hovor-bg: #e2e2e2; - --card-border-color: rgba(172, 169, 169, 0.13); + --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; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index e4cd2cf..3e29d34 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); @@ -172,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 { @@ -207,14 +205,12 @@ h1 + .post-meta { } &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-radius: $card-radius 0 0 $card-radius; left: 0.5px; } &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-radius: 0 $card-radius $card-radius 0; right: 0.5px; } } @@ -227,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; From f0266c1f784acd50219b6e6a5a28d7e4b42a1418 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 09:57:18 +0800 Subject: [PATCH 06/18] refactor(scss): update vendor prefix --- _sass/addon/commons.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 226d83d..a4a83e3 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -579,22 +579,18 @@ i { @-webkit-keyframes shimmer { 0% { - -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { - -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes shimmer { 0% { - -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { - -webkit-transform: translateX(100%); transform: translateX(100%); } } @@ -771,7 +767,6 @@ $sidebar-display: 'sidebar-display'; 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; @@ -783,12 +778,9 @@ $sidebar-display: 'sidebar-display'; 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); } } @@ -1232,9 +1224,7 @@ $sidebar-display: 'sidebar-display'; height: $size; border-radius: 50%; border: 1px solid var(--btn-backtotop-border-color); - transition: -webkit-transform 0.2s ease-out; transition: transform 0.2s ease-out; - transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out; i { @@ -1294,7 +1284,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; @@ -1395,14 +1384,12 @@ $sidebar-display: 'sidebar-display'; [#{$sidebar-display}] { #sidebar { - -webkit-transform: translateX(0); transform: translateX(0); } #topbar-wrapper, #main-wrapper, footer { - -webkit-transform: translateX(#{$sidebar-width}); transform: translateX(#{$sidebar-width}); } } @@ -1790,7 +1777,6 @@ $sidebar-display: 'sidebar-display'; position: absolute; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } From 414dd132aed70f4bd96cb712d00eacc82d2753e9 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 10:40:44 +0800 Subject: [PATCH 07/18] perf(ui): improve categories color in dark mode --- _sass/colors/dark-typography.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index c7db19f..e381616 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); @@ -90,7 +90,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; @@ -114,6 +114,10 @@ } .categories { + &.card { + border-color: var(--main-border-color); + } + .card-header { background-color: var(--card-header-bg); } From 2a4d67d65cc283ff1dc4bdd8a6440f976004fb97 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 10:59:20 +0800 Subject: [PATCH 08/18] refactor: uniform block border radius scope: - categories - posts (prompt, code snippets) --- _sass/addon/module.scss | 2 +- _sass/addon/variables.scss | 2 +- _sass/jekyll-theme-chirpy.scss | 29 +++++++++++++---------------- _sass/layout/categories.scss | 9 ++++++--- _sass/layout/home.scss | 4 ++-- _sass/layout/post.scss | 4 ++-- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 64dc4a5..603554a 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -92,7 +92,7 @@ } %rounded { - border-radius: 6px; + border-radius: $base-radius; } %img-caption { diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss index 7b1ae11..bc6f866 100644 --- a/_sass/addon/variables.scss +++ b/_sass/addon/variables.scss @@ -23,7 +23,7 @@ $footer-height: 5rem !default; $footer-height-mobile: 6rem !default; /* screen width: <= 576px */ $main-content-max-width: 1250px !default; $bottom-min-height: 35rem !default; -$card-radius: 0.5rem; +$base-radius: 0.5rem; /* syntax highlight */ diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss index 1424a57..c72e4c3 100644 --- a/_sass/jekyll-theme-chirpy.scss +++ b/_sass/jekyll-theme-chirpy.scss @@ -6,19 +6,16 @@ * MIT Licensed */ -@import - "colors/light-typography", - "colors/dark-typography", - - "addon/variables", - "variables-hook", - "addon/module", - "addon/syntax", - "addon/commons", - - "layout/home", - "layout/post", - "layout/tags", - "layout/archives", - "layout/categories", - "layout/category-tag"; +@import 'colors/light-typography'; +@import 'colors/dark-typography'; +@import 'addon/variables'; +@import 'variables-hook'; +@import 'addon/module'; +@import 'addon/syntax'; +@import 'addon/commons'; +@import 'layout/home'; +@import 'layout/post'; +@import 'layout/tags'; +@import 'layout/archives'; +@import 'layout/categories'; +@import 'layout/category-tag'; diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss index 31c8e8e..574f624 100644 --- a/_sass/layout/categories.scss +++ b/_sass/layout/categories.scss @@ -9,8 +9,14 @@ .categories { margin-bottom: 2rem; + &.card, + .list-group { + @extend %rounded; + } + .card-header { padding-right: 12px; + border-radius: $base-radius $base-radius 0 0; } i { @@ -42,9 +48,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 +66,5 @@ } .rotate { - -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 1ebf312..801ec55 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -19,7 +19,7 @@ .card { %img-radius { - border-radius: $card-radius $card-radius 0 0; + border-radius: $base-radius $base-radius 0 0; } .preview-img { @@ -146,7 +146,7 @@ @media all and (min-width: 768px) { #post-list { %img-radius { - border-radius: 0 $card-radius $card-radius 0; + border-radius: 0 $base-radius $base-radius 0; } .card { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 3e29d34..203c69c 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -205,12 +205,12 @@ h1 + .post-meta { } &:first-child { - border-radius: $card-radius 0 0 $card-radius; + border-radius: $base-radius 0 0 $base-radius; left: 0.5px; } &:last-child { - border-radius: 0 $card-radius $card-radius 0; + border-radius: 0 $base-radius $base-radius 0; right: 0.5px; } } From 7c23a4ebc53b9e231c214e04f8ac0803cbcdb720 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 22:41:21 +0800 Subject: [PATCH 09/18] perf(ui): lighten the link color in light-mode --- _sass/colors/light-typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index a1cc2d8..b83d452 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -14,7 +14,7 @@ --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; From 003e7b60c93988a7bfae4c03a8346d4f8a5f0bb6 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 21 Mar 2023 23:47:01 +0800 Subject: [PATCH 10/18] perf(ux): improve LQIP fade in effect --- _sass/addon/commons.scss | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index a4a83e3..ca88541 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -85,13 +85,9 @@ a { 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 +101,11 @@ img { &.lazyloading { background: var(--img-bg); } + + &.lazyloaded { + -webkit-animation: fade-in 0.35s ease-in; + animation: fade-in 0.35s ease-in; + } } &.shadow { @@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display'; } /* #sidebar */ @media (hover: hover) { - .card.post-preview { - transition: all 0.35s ease-in-out; - - img { - transition: all 0.35s ease-in-out; - } - } - #sidebar ul > li:last-child::after { transition: top 0.5s ease; } + + .post-preview { + transition: background-color 0.35s ease-in-out; + } } .profile-wrapper { From 8cbbcfa26da0addd88affada23a65770250f2404 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 22 Mar 2023 23:58:57 +0800 Subject: [PATCH 11/18] perf(ui): improve the color of prompts in dark mode --- _sass/colors/dark-typography.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index e381616..ffb3599 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -74,11 +74,11 @@ --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; From e38309f3bd1302ffe60b682136b6efaf96f4d9ae Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Thu, 23 Mar 2023 21:16:12 +0800 Subject: [PATCH 12/18] perf(ui): improve inline code in light mode --- _sass/colors/light-syntax.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss index a4dde91..b4b30c8 100644 --- a/_sass/colors/light-syntax.scss +++ b/_sass/colors/light-syntax.scss @@ -68,9 +68,9 @@ /* --- custom light colors --- */ --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 +78,5 @@ [class^='prompt-'] { --inline-code-bg: #fbfafa; - --highlighter-rouge-color: rgb(82, 82, 82); } } /* light-syntax */ From 0c80552d772b874e2a161f1270294faa3af18d4a Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Fri, 24 Mar 2023 02:19:37 +0800 Subject: [PATCH 13/18] perf(ui): mute the marker in lists --- _sass/addon/commons.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index ca88541..36f33b5 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -534,6 +534,10 @@ i { dl > dd { margin-left: 1rem; } + + ::marker { + color: var(--text-muted-color); + } } /* .post-content */ .tag:hover { From 6d99f5cc36a69e5ccff51f81ba448c798d92e12e Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Fri, 24 Mar 2023 02:46:48 +0800 Subject: [PATCH 14/18] feat(ui): improve code snippet design --- _includes/refactor-content.html | 4 +- _sass/addon/syntax.scss | 77 ++++++++++++++++++--------------- _sass/colors/dark-syntax.scss | 1 + _sass/colors/light-syntax.scss | 1 + 4 files changed, 45 insertions(+), 38 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 2dfddbd..e3ee11d 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -219,11 +219,11 @@ {% if _left contains 'file="' %} {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %} - {% assign _label_icon = 'far fa-file-code' %} + {% assign _label_icon = 'far fa-file-code fa-fw' %} {% else %} {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %} {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %} - {% assign _label_icon = 'fas fa-code small' %} + {% assign _label_icon = 'fas fa-code fa-fw small' %} {% endif %} {% capture _label %} diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index e3a93bb..21d0b7c 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 */ @@ -140,13 +137,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 +175,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.25rem; /* 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 +244,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/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/light-syntax.scss b/_sass/colors/light-syntax.scss index b4b30c8..040a5f5 100644 --- a/_sass/colors/light-syntax.scss +++ b/_sass/colors/light-syntax.scss @@ -67,6 +67,7 @@ .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: #3f596f; --highlight-lineno-color: #c2c6cc; From 83bbe4ac939edfd1706e68c080562e3462f83519 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 25 Mar 2023 02:58:58 +0800 Subject: [PATCH 15/18] feat(ui): redesign the sidebar --- _data/assets/cross_origin.yml | 2 +- _includes/sidebar.html | 24 +- _sass/addon/commons.scss | 395 +++++++++-------------------- _sass/addon/module.scss | 7 +- _sass/addon/variables.scss | 10 +- _sass/colors/dark-typography.scss | 12 +- _sass/colors/light-typography.scss | 8 +- _sass/jekyll-theme-chirpy.scss | 4 +- _tabs/tags.md | 2 +- assets/css/style.scss | 8 +- 10 files changed, 159 insertions(+), 313 deletions(-) diff --git a/_data/assets/cross_origin.yml b/_data/assets/cross_origin.yml index 01d558f..75aa59e 100644 --- a/_data/assets/cross_origin.yml +++ b/_data/assets/cross_origin.yml @@ -11,7 +11,7 @@ cdns: # fonts -webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap +webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap # Libraries diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 5dd8fc2..6dee0ec 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -1,11 +1,10 @@