diff --git a/_data/locales/ar.yml b/_data/locales/ar.yml index 7f1725f69..2ad043b57 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 3e4103cee..f8fe28ccb 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 39b585c45..6f636e34c 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 3088a3c45..7e77d95d3 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 fbc7c2b67..79e45dc96 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 975f5f011..fe8bf1f69 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 ee3a20f9e..f26cd894f 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 605969f86..73276633e 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 0d29a8708..72b034db2 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 f24b8c5ee..d79169c12 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 59ec66170..c052f9ab0 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 03aa19c50..f29e7be97 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 73e1ded3e..6f9cea8e2 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 9990c763c..2669e5539 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 831e6d38d..d0071c66b 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 3cd937c64..91aaf06e4 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 f7c256713..e8ec92867 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 6925e42a3..58b3ba53c 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 592000df1..6b3751207 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 1463e9553..624706f10 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 05ed99ed9..7d2224c26 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 668d92b40..2dfddbdf8 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 000000000..70af32815 --- /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 47b840498..000000000 --- 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 000000000..b79c87ca9 --- /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 000000000..7f78d9928 --- /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 790fd9540..d07d4aada 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 8d654359e..8e0797ece 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 0d497f018..bd12c7135 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 4b472bce3..307e5ea4b 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 afc4af604..0fda0744b 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 1bfaa759b..76d30c425 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 69ec76ed5..3bc5ff4ef 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 b13083aa9..ba3d54b7b 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 dc6f543f3..2f0adb557 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 f04629bf3..bd9a0e99d 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 cdf1f09a2..ad3d0436d 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 2690cf4a0..fa691f86c 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 a0d063f95..907ca3e72 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'),