feat(ui): show preview image in home page

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