css

_config.yml

@@ -219,10 +219,10 @@ tag_plugins:
   # {% quot %}
   quot:
     default: # 可以自行配置多种图标方案
-      prefix: https://s2.loli.net/2022/01/04/vsTB5pGrIHfPxSj.png
+      prefix: https://bu.dusays.com/2022/10/24/63567d3e092ff.png
-      suffix: https://s2.loli.net/2022/01/04/NORdtjlAhifZSns.png
+      suffix: https://bu.dusays.com/2022/10/24/63567d3e0ab55.png
     hashtag:
-      prefix: https://s2.loli.net/2022/01/04/UvHcsa73jQPnobq.png
+      prefix: https://bu.dusays.com/2022/10/24/63567d3e07da3.png
   # {% emoji %}
   emoji:
     default: https://fastly.jsdelivr.net/gh/cdn-x/emoji/qq/%s.gif

layout/_partial/main/article/read_next.ejs

@@ -30,22 +30,25 @@ function layoutDiv() {
   if (prev || next) {
     el += '<div class="related-wrap reveal" id="read-next">';
     el += '<section class="body">';
-    if (next) {
+    // prev
-      el += '<a id="next" href="' + url_for(next.path) + '">';
+    el += '<div class="item" id="prev">';
-      el += '<span class="note">' + title_next + '</span>';
-      el += next.title || next.seo_title || next.wiki;
-      el += '</a>';
-    } else {
-      el += '<div id="next"></div>';
-    }
     if (prev) {
-      el += '<a id="prev" href="' + url_for(prev.path) + '">';
+      el += '<div class="note">' + title_prev + '</div>';
-      el += '<span class="note">' + title_prev + '</span>';
+      el += '<a href="' + url_for(prev.path) + '">';
       el += prev.title || prev.seo_title || prev.wiki;
       el += '</a>';
-    } else {
-      el += '<div id="prev"></div>';
     }
+    el += '</div>';
+    // next
+    el += '<div class="item" id="next">';
+    if (next) {
+      el += '<div class="note">' + title_next + '</div>';
+      el += '<a href="' + url_for(next.path) + '">';
+      el += next.title || next.seo_title || next.wiki;
+      el += '</a>';
+    }
+    el += '</div>';
+
     el += '</section>';
     el += '</div>';
   }

source/css/_common/loading.styl

@@ -15,7 +15,7 @@ svg.loading
       transform:rotate(360deg)
 
 .loading-wrap
-  margin: 0.5rem 0
+  margin: 0
   text-align: center
   background: var(--block)
   border-radius: $border-card

source/css/_layout/partial/related.styl

@@ -1,5 +1,6 @@
 .related-wrap
-  padding: 2rem 1rem
+  padding: 1rem
+  margin: 2rem 0
   &:empty
     display: none
   section.header
@@ -22,22 +23,31 @@
   .related-posts
     width: 100%
     margin: 1rem 0
-    border-radius: $border-block
-    background: var(--block)
-    overflow: hidden
-    border: 1px solid var(--block-border)
     .item
       line-height: 1.2
       display: block
-      padding: 1rem
+      border-left: 0
+      &+.item
+        margin-top: 1rem
+      &:first-child
+        margin-top: 0
       .title
         color: var(--text-p1)
         font-weight: 500
         font-size: 1rem
-        display: -webkit-box
+        trans1 color
-        -webkit-box-orient: vertical
+        position: relative
-        overflow: hidden
+        padding-bottom: 4px
-        -webkit-line-clamp: 2
+        &:after
+          content: ''
+          position: absolute
+          left: 0
+          width: 0
+          height: 2px
+          bottom: 0
+          border-radius: 2px
+          background: $color-hover
+          trans1 width
       .excerpt
         color: var(--text-p3)
         font-size: $fs-12
@@ -45,47 +55,43 @@
         display: -webkit-box
         -webkit-box-orient: vertical
         overflow: hidden
-        -webkit-line-clamp: 3
+        -webkit-line-clamp: 2
       &:hover
-        background: var(--block-hover)
+        .title
-    .item+.item 
+          color: $color-hover
-      border-top: 1px dashed var(--block-border)
+          &:after
+            width: 100%
 
 
 .related-wrap#read-next
   .body
-    margin-top: 1rem
     display: grid
     grid-gap: 16px
     grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
-    >a
+    .item  
-      display: flex
+      border-top: 1px dashed var(--block-border)
-      flex-direction: column
+      border-bottom: 1px dashed var(--block-border)
+      padding: 1rem 0
+    .note
+      margin-bottom: 0.75rem
+      font-size: $fs-12
+      color: var(--text-p4)
+      font-weight: 500
+    a
       margin: 0
       line-height: 1.2
-      padding: 0.75rem 0.5rem
       color: var(--text-p1)
-      font-size: 1rem
+      font-size: $fs-h4
-      background: var(--card)
-      border-radius: $border-block
-      box-shadow: $boxshadow-card
-      trans2: box-shadow transform
-      &:last-child
-        text-align: right
-      .note
-        flex-shrink: 0
-        margin-bottom: 4px
-        font-size: $fs-12
-        color: var(--text-p4)
-        font-weight: 500
       &:hover
         color: $color-hover !important
-        box-shadow: $boxshadow-card-float
+    #next
-        transform: translateY(-1px)
+      text-align: right
-.wiki+.related-wrap#read-next .body>a
+.wiki+.related-wrap#read-next
-  font-size: $fs-h3
+  .item
-  &:last-child
+    a
-    color: var(--text-p4)
+      font-size: $fs-h3
+    &#prev a
+      color: var(--text-p3)
 
 
 .related-wrap#comments

source/css/_layout/sidebar/footer.styl

@@ -1,4 +1,4 @@
-.l_left .footer
+.l_left>.footer
   margin: 0.5rem var(--gap-l) 0
   @media screen and (max-width: $device-tablet)
     margin-bottom: 1rem

source/css/_layout/sidebar/sidebar.styl

@@ -237,3 +237,6 @@ nav.menu
         -webkit-box-orient: vertical
         overflow: hidden
         -webkit-line-clamp: 5
+
+.widgets .loading-wrap
+  margin: 0.5rem 0

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

@@ -137,8 +137,8 @@
     font-size: $fs-12
 
 .tag-plugin.timeline.stellar-timeline-api .body .footer
+  margin: 0 0 -0.5rem
   padding: 0.5rem 0 1rem
-  margin-bottom: -0.5rem
   user-select: none
   font-weight: 500
   display: flex