feat(ui): show preview image in home page

_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: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

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

_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: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

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

_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: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

_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: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

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

_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: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

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

_data/locales/hu-HU.yml

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

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

_data/locales/it-IT.yml

@@ -40,7 +40,6 @@ 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.
 not_found:
   statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
@@ -70,18 +69,16 @@ post:
     share_link:
       title: Copia link
       succeed: Link copiato con successo!
-  # pinned prompt of posts list on homepage
-  pin_prompt: In alto
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%b %e, %Y'
-    dayjs: 'll'
+    strftime: "%b %e, %Y"
+    dayjs: "ll"
   archives:
-    strftime: '%b'
-    dayjs: 'MMM'
+    strftime: "%b"
+    dayjs: "MMM"
 
 # categories page
 categories:

_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: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%Y/%m/%d'
-    dayjs: 'YYYY/MM/DD'
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
 
 # categories page
 categories:

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

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

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

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

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

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

_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: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%Y/%m/%d'
-    dayjs: 'YYYY/MM/DD'
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
 
 # categories page
 categories:

_includes/js-selector.html

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

_includes/refactor-content.html

@@ -45,9 +45,8 @@
 
 <!-- images -->
 
-{% assign IMG_TAG = '<img ' %}
-
-{% if _content contains IMG_TAG %}
+{% if _content contains '<img' %}
+  {% assign IMG_TAG = '<img ' %}
   {% assign _img_content = nil %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
@@ -161,6 +160,7 @@
     <!-- Bypass the HTML-proofer test -->
     {% assign _left = _left | append: ' data-proofer-ignore' %}
 
+    {% if page.layout == 'post' %}
       <!-- make sure the `<img>` is wrapped by `<a>` -->
       {% assign _parent = _right | slice: 1, 4 %}
 
@@ -171,7 +171,6 @@
           class="img-link{% unless _lqip %} shimmer{% endunless %}"
         {% endcapture %}
         {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
-
       {% else %}
         <!-- create the image wrapper -->
         {%- capture _wrapper_start -%}
@@ -181,8 +180,19 @@
         {% assign _right = _right | prepend: '></a' %}
       {% endif %}
 
+    {% endif %}
+
+    {% if page.layout == 'home' %}
+      <!-- create the image wrapper -->
+      {%- capture _wrapper_start -%}
+        <div class="preview-img {{ _class | strip }}">
+      {%- endcapture -%}
+      {% assign _img_content = _img_content | append: _wrapper_start %}
+      {% assign _right = _right | prepend: '></div' %}
+    {% endif %}
+
     <!-- combine -->
-    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
+    {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
@@ -277,5 +287,4 @@
 {% assign _content = _heading_content %}
 
 <!-- return -->
-
 {{ _content }}

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

_javascript/modules/components/img-extra.js

@@ -1,27 +0,0 @@
-/**
- * Set up image stuff
- */
-
-export function imgExtra() {
-  if ($('#core-wrapper img[data-src]') <= 0) {
-    return;
-  }
-
-  /* See: <https://github.com/dimsemenov/Magnific-Popup> */
-  $('.popup').magnificPopup({
-    type: 'image',
-    closeOnContentClick: true,
-    showCloseBtn: false,
-    zoom: {
-      enabled: true,
-      duration: 300,
-      easing: 'ease-in-out'
-    }
-  });
-
-  /* Stop shimmer when image loaded */
-  document.addEventListener('lazyloaded', function (e) {
-    const $img = $(e.target);
-    $img.parent().removeClass('shimmer');
-  });
-}

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

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

_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);

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

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

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

_layouts/home.html

@@ -1,6 +1,6 @@
 ---
 layout: page
-# The Home page layout
+refactor: true
 ---
 
 {% include lang.html %}
@@ -42,9 +42,16 @@ layout: page
 
 <div id="post-list">
   {% for post in posts %}
-    <div class="card post-preview">
-      <a href="{{ post.url | relative_url }}">
-        <div class="card-body">
+    <a href="{{ post.url | relative_url }}" class="card-wrapper">
+      <div class="card flex-md-row-reverse">
+        {% if post.image %}
+          {% if post.image.lqip %}
+            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+          {% endif %}
+          <img src="{{ post.image.path | default: post.image }}" w="15" h="8" {{ lqip }}>
+        {% endif %}
+
+        <div class="card-body d-flex flex-column">
           <h1 class="card-title">
             {{ post.title }}
           </h1>
@@ -56,16 +63,16 @@ layout: page
             </p>
           </div>
 
-          <div class="post-meta text-muted d-flex">
+          <div class="post-meta flex-grow-1 d-flex align-items-end">
             <div class="mr-auto">
               <!-- posted date -->
-              <i class="far fa-calendar fa-fw"></i>
+              <i class="far fa-calendar fa-fw mr-1"></i>
               {% include datetime.html date=post.date lang=lang %}
 
               <!-- categories -->
               {% if post.categories.size > 0 %}
-                <i class="far fa-folder-open fa-fw"></i>
-                <span>
+                <i class="far fa-folder-open fa-fw mr-1"></i>
+                <span class="categories">
                   {% for category in post.categories %}
                     {{ category }}
                     {%- unless forloop.last -%},{%- endunless -%}
@@ -75,7 +82,7 @@ layout: page
             </div>
 
             {% if post.pin %}
-              <div class="pin">
+              <div class="pin ml-1">
                 <i class="fas fa-thumbtack fa-fw"></i>
                 <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
               </div>
@@ -83,13 +90,13 @@ layout: page
           </div>
           <!-- .post-meta -->
         </div>
-      </a>
+        <!-- .card-body -->
       </div>
-    <!-- .post-review -->
+    </a>
   {% endfor %}
 </div>
 <!-- #post-list -->
 
-{% if paginator.total_pages > 0 %}
+{% if paginator.total_pages > 1 %}
   {% include post-paginator.html %}
 {% endif %}

_layouts/page.html

@@ -2,14 +2,17 @@
 layout: default
 ---
 
-{% include assets-origin.html %}
-
 {% include lang.html %}
+{% include assets-origin.html %}
 
 <div class="row">
   <!-- core -->
   <div id="core-wrapper" class="col-12 col-lg-11 col-xl-9 pr-xl-4">
-    <div class="post pl-1 pr-1 pl-md-2 pr-md-2">
+    {% capture padding %}
+      {% unless page.layout == 'home' %}pl-1 pr-1{% endunless %}
+    {% endcapture %}
+
+    <div class="post {{ padding | strip }} pl-md-2 pr-md-2">
       {% capture _content %}
       {% if layout.refactor or page.layout == 'page' %}
         {% include refactor-content.html content=content lang=lang %}

_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);

_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%);
 }
 

_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;
   }

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

_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;
+@media (hover: hover) {
+  #post-list .card {
+    transition: border-color 0.35s ease-in-out;
 
-  a:hover {
-    text-decoration: none;
+    &::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;
     }
 
-  .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);
+    .card {
+      .preview-img {
+        width: 20rem;
+        height: 11.5rem; // can hold 2 lines each for title and content
       }
 
-    &:not(:last-child) {
-      margin-bottom: 1.75rem;
+      .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;
         }
 
-    h1 {
-      font-size: 1.4rem;
-      margin: 0;
+        .card-text {
+          display: inherit !important;
         }
 
         .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;
+              margin-left: 1.75rem;
             }
           }
         }
-
-    .post-content {
-      margin-top: 0.6rem;
-      margin-bottom: 0.6rem;
-      color: var(--post-list-text-color);
-
-      > p {
-        margin: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
       }
     }
-  } /* .post-preview */
-} /* #post-list */
-
-@media (hover: hover) {
-  .post-preview {
-    transition: all 0.35s ease-in-out;
   }
 }
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
-  .post-preview {
+  #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;
   }
 }

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

rollup.config.js

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