css

layout/_partial/main/post_list/post_card.ejs

@@ -5,16 +5,8 @@ if (post.categories && post.categories.length > 0) {
 }
 %>
 <% if (post.cover) { %>
-  <div class='post-cover-wrap'>
+  <div class='post-cover'>
-    <% if (theme.plugins.lazyload && theme.plugins.lazyload.enable) { %>
+    <img src='<%- post.cover %>'/>
-      <% if (theme.plugins.lazyload.loadingImg) { %>
-        <div class='post-cover lazyload placeholder' data-bg='<%- post.cover %>'></div>
-      <% } else { %>
-        <div class='post-cover lazyload' data-bg='<%- post.cover %>'></div>
-      <% } %>
-    <% } else { %>
-      <div class='post-cover' style='background-image:url(<%- post.cover %>)'></div>
-    <% } %>
   </div>
 <% } %>
 <h2 class="post-title">

source/css/_layout/main.styl

@@ -22,7 +22,7 @@
 // pc上右边顶部留白
 @media screen and (min-width: $device-tablet)
   .l_main
-    margin-top: $gap * 2
+    margin-top: $gap
 
 // 移动端显示主导航栏
 @media screen and (max-width: $device-tablet)

source/css/_layout/partial/read_next.styl

@@ -14,5 +14,5 @@
         font-weight: 500
       &.unread
         color: var(--text-p1)
-        font-size: 1.75rem
+        font-size: 2rem
         font-weight: 400

source/css/_layout/partial/related_posts.styl

@@ -22,8 +22,6 @@ div.related-posts-wrap
       flex-direction: column
       overflow: hidden
       width: 360px
-      // opacity: 0.7
-
       border: 1px solid var(--hover-block)
       .img
         height: 180px
@@ -32,6 +30,7 @@ div.related-posts-wrap
           width: 100%
           height: 100%
           object-fit: cover
+          &:not(.lazyload)
             trans1: transform 1s
       @media screen and (max-width: $device-tablet)
         width: 300px

source/css/_layout/post_list.styl

@@ -50,15 +50,16 @@
     trans1 color
   .excerpt
     font-size: $fs14
-  .post-cover-wrap
-    overflow: hidden
-    margin-left: 0 - 1.5 * $gap
-    margin-top: 0 - 1.5 * $gap
-    margin-bottom: 1.25 * $gap
-    width: "calc(100% + 3 * %s)" % $gap
   .post-cover
-    background-position: center
+    overflow: hidden
-    background-size: cover
+    margin-left: -1rem
+    margin-top: -1rem
+    margin-right: -1rem
+    img
+      object-fit: cover
+      disable-select()
+      width: 100%
+      border-radius: 0
       height: 320px
       @media screen and (max-width: 900px)
         height: 280px
@@ -75,7 +76,7 @@
 .post-list .post-card.post:hover
   .post-title
     color: $color-hover
-  .post-cover
+  .post-cover img
     transform: scale(1.04)
 
 // wiki

source/css/_layout/sidebar.styl

@@ -1,8 +1,8 @@
 .l_left .wrap
   display: flex
   flex-direction: column
-  height: "calc(100% - 4 * %s)" % $gap
+  height: "calc(100% - 3 * %s)" % $gap
-  margin-top: $gap * 2
+  margin-top: $gap
   padding: $gap
   @media screen and (max-width: $device-tablet)
     height: "calc(100% - 2 * %s)" % $gap

source/css/_layout/tag-plugins/ghcard.styl

@@ -1,3 +1,9 @@
-a.ghcard
+.tag-plugin.ghcard
-  display: inline-block
   line-height: 0
+  a.ghcard
+    display: inline-block
+    img
+      border-radius: 5px
+      transition: box-shadow
+    &:hover img
+      box-shadow: $boxshadow-float, $boxshadow-card-float

source/css/_layout/tag-plugins/link.styl

@@ -12,11 +12,9 @@
   cursor: pointer
   min-width 280px
   max-width: 100%
+  width: 320px
   box-shadow: $boxshadow-card
   transition: box-shadow
-  @media screen and (max-width: $device-mobile-l)
-    max-width: 100%
-    width: 100%
   border-radius: 8px
   &:hover
     box-shadow: $boxshadow-float, $boxshadow-card-float
@@ -26,23 +24,15 @@
   div.left,div.right
     pointer-events: none
   div.right
-    width: 54px
+    width: 3rem
-    height: 54px
+    height: 3rem
-    margin: 12px
+    margin: 0.75rem
     overflow: hidden
     flex-shrink: 0
-    position: relative
-    i
-      font-size: 32px
-      line-height: 48px
-      margin-left: 4px
     img
-      display: block
+      width: 100%
-      position: absolute
+      height: 100%
-      border-radius: $border-card / 4
+      object-fit: cover
-      top: 50%
-      left: 50%
-      transform: translate(-50%, -50%)
   div.left
     overflow: hidden
     margin-left: 16px
@@ -56,7 +46,7 @@
     font-size: $fs14
   span.url
     flex-shrink: 0
-    color: var(--text-p2)
+    color: var(--text-p3)
     font-size: $fs13
 
 .md .link-group

source/css/_layout/tag-plugins/timeline.styl

@@ -46,7 +46,7 @@ div.timenode
     span
       font-weight: 500
       color: var(--text-p1)
-      padding: 0.8rem 16px
+      padding: 0.75rem 16px
     a
       visibility: hidden
       margin-left: 4px

source/css/_plugins/lazyload.styl

@@ -1,13 +1,13 @@
 if hexo-config('plugins.lazyload.blurIn') == true
   img.lazyload:not(.placeholder)
-    trans2pro: transform 0.75s filter 0.25s
+    trans2pro: transform 1s filter 0.25s
     &:not(.loaded)
       filter blur(8px)
     &.loaded
       filter none
 else
   img.lazyload:not(.placeholder)
-    trans2pro: transform 0.75s opacity 0.5s
+    trans2pro: transform 1s opacity 0.5s
     &:not(.loaded)
       opacity: 0
     &.loaded