feat(ui): show preview image in home page

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

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