Beautified the relate-posts card.

cotes2020 · cotes2020 · commit 6a93bacfedd4 · 2019-11-20T01:50:55.000+08:00
diff --git a/_includes/related-posts.html b/_includes/related-posts.html
@@ -37,7 +37,7 @@
   {% assign post_index = post_index | plus: 1 %}
 {% endfor %}
 
-{% unless score_list.size == 0 %}
+{% if score_list.size > 0 %}
   {% assign score_list = score_list | sort | reverse %}
   {% assign count = 0 %}
   <div id="related-posts" class="mt-4 mb-4 pb-3">
@@ -47,16 +47,16 @@ <h3 class="pt-2 mt-1 mb-4" data-toc-skip>Related Posts</h3>
       {% assign data = score_item | split: ":" %}
       {% assign index = data[1] | plus: 0 %}
       {% assign post = site.posts[index] %}
-      <div class="card btn-box-shadow">
+      <div class="card">
         <a href="{{ post.url }}">
           <div class="card-body">
-            <span class="timeago text-muted small">
+            <span class="timeago small">
                 {{ post.date | date: POST_DATE }}
                 <i class="hidden">{{ page.date | date_to_xmlschema }}</i>
             </span>
             <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
             <div class="text-muted small">
-              <p>{{ post.content | markdownify | strip_html | truncate: 100 }}</p>
+              <p>{{ post.content | markdownify | strip_html | truncate: 200 }}</p>
             </div>
           </div>
         </a>
@@ -66,6 +66,6 @@ <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
         {% break %}
       {% endif %}
     {% endfor %}
-    </div><!-- .card-deck -->
+    </div> <!-- .card-deck -->
   </div>
-{% endunless %}
+{% endif %}
diff --git a/assets/css/_src/main.scss b/assets/css/_src/main.scss
@@ -383,7 +383,7 @@ footer .license a {
   position: sticky;
   top: 2rem;
   transition: top 0.2s ease-in-out;
-  padding-right: 1.5rem;
+  margin-right: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 6rem;
   color: #6c757d;
@@ -859,16 +859,26 @@ table tbody td {
 }
 
 #related-posts .card {
-  border: none;
-  -webkit-transition: all .5s ease-in-out;;
-  -moz-transition: all .5s ease-in-out;;
-  transition: all .5s ease-in-out;
+  border: 1px solid #f1f1f1;
+  box-shadow: 0 0 5px 0 rgba(234, 234, 234, 0.7686274509803922);
+  -webkit-transition: all .3s ease-in-out;;
+  -moz-transition: all .3s ease-in-out;;
+  transition: all .3s ease-in-out;
+}
+
+#related-posts .card:hover {
+  -webkit-transform: translate3d(0, -8px, 0);
+  transform: translate3d(0, -8px, 0);
 }
 
 #related-posts .card h3 {
   color: #353a3d;
 }
 
+#related-posts .timeago {
+  color: rgba(30,55,70,.4);
+}
+
 #related-posts p {
   font-size: .9rem;
   margin-bottom: .5rem;
@@ -883,10 +893,6 @@ table tbody td {
   text-decoration: none;
 }
 
-#related-posts .card:hover {
-  transform: scale(1.05);
-}
-
 #related-posts ul {
   list-style-type: none;
   padding-inline-start: 1.5rem;
