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] 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'),