ui(home): optimize the top effect of posts

Author: XPoet

languages/zh-CN.yml

@@ -24,7 +24,7 @@ archives: 归档
 about: 关于
 links: 友链
 link: 友链
-top: 顶置
+top: 置顶
 read_more: 阅读全文
 wordcount: 字
 min2read: 分钟

layout/home-content.ejs

@@ -7,13 +7,20 @@
                     <div class="home-article-item-top border-box"
                          style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '8rem' %>"
                     >
+                        <% if (post.sticky) { %>
+                            <div class="post-sticky-box cover">
+                                <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                            </div>
+                        <% } %>
                         <img class="cover-img" src="<%= post.cover %>" alt="<%= post.title %>">
                     </div>
                 <% } %>
 
                 <div class="home-article-item-bottom border-box">
-                    <% if (post.sticky) { %>
-                        <i class="fas fa-thumbtack sticky-icon"></i>
+                    <% if (post.sticky && !post?.cover) { %>
+                        <div class="post-sticky-box">
+                            <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                        </div>
                     <% } %>
                     <h3 class="home-article-title border-box">
                         <a href="<%- url_for(post.path) %>">

source/css/layout/home-content.styl

@@ -10,6 +10,31 @@
 
       keep-container(var(--home-post-hover-scale), 0, 2.8rem)
 
+      .post-sticky-box {
+        position absolute
+        top 0.8rem
+        right 0.8rem
+        z-index $z-index-1
+        display flex
+        align-items center
+        box-sizing border-box
+        padding 0.1rem 0.4rem
+        color var(--text-color-4)
+        font-size 12px
+        letter-spacing 1px
+        background var(--background-color-3)
+        border-radius 0.3rem
+        transform scale(0.88)
+        cursor default
+        disable-user-select()
+
+        &.cover {
+          top 0.6rem
+          right 0.6rem
+        }
+      }
+
+
       .home-article-item-top {
         width 100%
         overflow hidden
@@ -28,10 +53,10 @@
           height 100%
           object-fit cover
           transform-origin center center
-          transition-t("transform", "0.2", "1", "linear")
+          transition-t("transform", "0.1", "1", "linear")
 
           &:hover {
-            transform scale(1.04)
+            transform scale(1.03)
           }
         }
       }