From 2918da9f29465618d557c082ff3a2f23d7519049 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 21 Mar 2023 07:20:32 +0800
Subject: [PATCH] perf(ui): improve related posts design

---
 _includes/related-posts.html       | 24 +++++++++-----------
 _layouts/home.html                 |  2 +-
 _sass/addon/commons.scss           | 34 +++++++++++++++++++++++-----
 _sass/addon/module.scss            |  6 ++---
 _sass/addon/variables.scss         |  2 +-
 _sass/colors/dark-typography.scss  |  3 +--
 _sass/colors/light-typography.scss |  3 +--
 _sass/layout/home.scss             | 36 ------------------------------
 _sass/layout/post.scss             | 13 +----------
 9 files changed, 48 insertions(+), 75 deletions(-)

diff --git a/_includes/related-posts.html b/_includes/related-posts.html
index 69e9970..0981d08 100644
--- a/_includes/related-posts.html
+++ b/_includes/related-posts.html
@@ -85,20 +85,18 @@
       {% for entry in index_list %}
         {% assign index = entry | plus: 0 %}
         {% assign post = site.posts[index] %}
-        <div class="card">
-          <a href="{{ post.url | relative_url }}">
-            <div class="card-body">
-              {% include datetime.html date=post.date class="small" lang=include.lang %}
-              <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
-              <div class="text-muted small">
-                <p>
-                  {% include no-linenos.html content=post.content %}
-                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
-                </p>
-              </div>
+        <a href="{{ post.url | relative_url }}" class="card post-preview">
+          <div class="card-body">
+            {% include datetime.html date=post.date class="small" lang=include.lang %}
+            <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
+            <div class="text-muted small">
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 | escape }}
+              </p>
             </div>
-          </a>
-        </div>
+          </div>
+        </a>
       {% endfor %}
     </div>
     <!-- .card-deck -->
diff --git a/_layouts/home.html b/_layouts/home.html
index 0fda074..1844f62 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -43,7 +43,7 @@ refactor: true
 <div id="post-list">
   {% for post in posts %}
     <a href="{{ post.url | relative_url }}" class="card-wrapper">
-      <div class="card flex-md-row-reverse">
+      <div class="card post-preview flex-md-row-reverse">
         {% if post.image %}
           {% if post.image.lqip %}
             {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 3bc5ff4..b03bd7f 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -204,12 +204,12 @@ footer {
     @extend %text-color;
 
     &:link {
-      @include no-text-decoration;
+      @extend %no-decoration;
     }
 
     &:hover {
       @extend %link-hover;
-      @include no-text-decoration;
+      @extend %no-decoration;
     }
   }
 
@@ -647,10 +647,26 @@ i {
 }
 
 .no-text-decoration {
-  @include no-text-decoration;
+  @extend %no-decoration;
 }
 
-/* Overrided BS4 Tooltip */
+.card.post-preview {
+  border-radius: $card-radius;
+  border: 0;
+  background: var(--card-bg);
+  box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0,
+    var(--card-border-color) 0 0 0 1px;
+
+  &:hover {
+    background-color: var(--card-hovor-bg);
+
+    img {
+      filter: brightness(0.7) !important;
+    }
+  }
+}
+
+/* Overwrite bootstrap tooltip */
 .tooltip-inner {
   font-size: 0.7rem;
   max-width: 220px;
@@ -733,7 +749,7 @@ $sidebar-display: 'sidebar-display';
     @extend %sidebar-links;
 
     &:hover {
-      @include no-text-decoration;
+      @extend %no-decoration;
 
       color: var(--sidebar-active-color) !important;
     }
@@ -930,6 +946,14 @@ $sidebar-display: 'sidebar-display';
 } /* #sidebar */
 
 @media (hover: hover) {
+  .card.post-preview {
+    transition: all 0.35s ease-in-out;
+
+    img {
+      transition: all 0.35s ease-in-out;
+    }
+  }
+
   #sidebar ul > li:last-child::after {
     transition: top 0.5s ease;
   }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index ba3d54b..64dc4a5 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -122,12 +122,12 @@
   -webkit-box-orient: vertical;
 }
 
-/* ---------- scss mixin --------- */
-
-@mixin no-text-decoration {
+%no-decoration {
   text-decoration: none;
 }
 
+/* ---------- scss mixin --------- */
+
 @mixin mt-mb($value) {
   margin-top: $value;
   margin-bottom: $value;
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index 83faba1..7b1ae11 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -21,9 +21,9 @@ $topbar-height: 3rem !default;
 $search-max-width: 210px !default;
 $footer-height: 5rem !default;
 $footer-height-mobile: 6rem !default; /* screen width: <= 576px */
-
 $main-content-max-width: 1250px !default;
 $bottom-min-height: 35rem !default;
+$card-radius: 0.5rem;
 
 /* syntax highlight */
 
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 2f0adb5..439c2f3 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -68,8 +68,7 @@
   --relate-post-date: var(--text-muted-color);
   --card-bg: #1e1e1e;
   --card-hovor-bg: #3a3a3a;
-  --card-border-color: #2e2e2e;
-  --card-box-shadow: var(--main-bg);
+  --card-border-color: rgba(172, 169, 169, 0.17);
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index bd9a0e9..f953832 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -63,8 +63,7 @@
   --btn-share-hover-color: var(--link-color);
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
-  --card-border-color: #ececec;
-  --card-box-shadow: rgba(234, 234, 234, 0.76);
+  --card-border-color: rgba(172, 169, 169, 0.13);
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index ad3d043..1ebf312 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -1,7 +1,6 @@
 /*
   Style for Homepage
 */
-$card-radius: 0.5rem;
 
 #post-list {
   margin-top: 1.75rem;
@@ -19,31 +18,6 @@ $card-radius: 0.5rem;
   }
 
   .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;
     }
@@ -168,16 +142,6 @@ $card-radius: 0.5rem;
   } /* .page-item */
 } /* .pagination */
 
-@media (hover: hover) {
-  #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 {
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index fa691f8..ea6ecfc 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -333,24 +333,13 @@ h1 + .post-meta {
   }
 
   a:hover {
-    text-decoration: none;
+    @extend %no-decoration;
   }
 
   .card {
-    border-color: var(--card-border-color);
-    background-color: var(--card-bg);
-    box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    transition: all 0.3s ease-in-out;
-
     h3 {
       @extend %text-color;
     }
-
-    &:hover {
-      -webkit-transform: translate3d(0, -3px, 0);
-      transform: translate3d(0, -3px, 0);
-      box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
-    }
   }
 }