[opt] css

_config.yml

@@ -51,7 +51,7 @@ article:
   category_color:
     '探索号': '#f44336'
   # 文章许可协议
-  license: '本文采用[署名-非商业性使用-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-nc-sa/4.0/)许可协议，转载请注明出处。'
+  license: '本文采用 [署名-非商业性使用-相同方式共享 4.0 国际](https://creativecommons.org/licenses/by-nc-sa/4.0/) 许可协议，转载请注明出处。'
   # 分享
   share: # [wechat, weibo, email, link]
   # 相关文章，需要安装插件 (for layout: post)

layout/_partial/widgets/recent.ejs

@@ -33,10 +33,9 @@ function layoutDiv() {
     el += '<span class="title">'
     if (post.layout == 'wiki') {
       let proj = theme.wiki.projects[post.wiki];
-      if (proj && proj.name) {
+      let name = proj?.name || post?.wiki;
-        el += proj.name + ' / ';
+      if (name) {
-      } else if (post.wiki) {
+        el += '<strong>' + name + '</strong>' + '<span class="dot"></span>';
-        el += post.wiki + ' / ';
       }
     }
     el += (post.title || post.seo_title || post.wiki) + '</span>';

source/css/_common/span.styl

@@ -3,6 +3,7 @@ span.dot,span.sep
   margin: 0 .25em
 span.dot:before
   content: '·'
+  font-weight: 900
 span.sep:before
   content: '/'
   padding-left: 2px

source/css/_layout/partial/related.styl

@@ -31,19 +31,11 @@
       color: var(--text-p1)
       font-weight: 500
       font-size: 1rem
-      trans1 color
+      trans2 color border
       position: relative
-      padding-bottom: 4px
+      padding-bottom: 2px
-      &:after
+      border-bottom: 1px dashed var(--text-meta)
-        content: ''
+      line-height: 1.6
-        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
@@ -55,8 +47,7 @@
     &:hover
       .title
         color: $color-hover
-        &:after
+        border-bottom: 1px solid $color-hover
-          width: 100%
 
 
 .related-wrap#read-next

source/css/_layout/sidebar/footer.styl

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

source/css/_layout/sidebar/header.styl

@@ -0,0 +1,111 @@
+.l_left nav.menu
+  margin-bottom: 1.5rem
+
+nav.menu
+  margin: 1rem 0
+  background: var(--block)
+  border-radius: 6px
+  display: flex
+  padding: 1px
+  flex-wrap: wrap
+  &::-webkit-scrollbar
+    display: none
+  &::-webkit-scrollbar-track-piece
+    background: transparent
+  &::-webkit-scrollbar-thumb
+    display: none
+  a.nav-item
+    text-overflow: ellipsis
+    word-break: keep-all
+    margin: 1px
+    border-radius: 4px
+    font-size: $fs-14
+    font-weight: 500
+    overflow: hidden
+    padding: 0.375rem 0.5rem
+    color: var(--text-p3)
+    text-align: center
+    &.active, &:hover
+      color: var(--text-p1)
+      background: var(--card)
+      box-shadow: $boxshadow-button
+
+.l_left .menu a.nav-item
+  flex-grow: 1
+
+
+.logo-wrap
+  display: flex
+  align-items: center
+  overflow: hidden
+  a
+    color: inherit
+    display: flex
+    align-items: center
+  a.avatar
+    display: block
+    position: relative
+    width: 50px
+    height: 50px
+    flex-shrink: 0
+    border-radius: 50px
+    overflow: hidden
+    margin-right: 1rem
+    div.bg
+      width: 100%
+      height: 100%
+      background-size: cover
+    img.avatar
+      margin: 2px
+      object-fit: cover
+      width: "calc(100% - 2 * %s)" % @margin
+      height: "calc(100% - 2 * %s)" % @margin
+      border-radius: @width
+    if hexo-config('style.animated_avatar.animate')
+      div.bg
+        trans1: opacity
+        position: absolute
+        opacity: 0 !important
+        z-index: -1
+      @keyframes spin
+        from
+          transform:rotate(0deg)
+        to
+          transform:rotate(360deg)
+    if hexo-config('style.animated_avatar.animate') == 'always'
+      div.bg
+        opacity: 1 !important
+        animation: spin infinite 4s
+        animation-timing-function: linear
+    if hexo-config('style.animated_avatar.animate') == 'auto'
+      &:hover
+        div.bg
+          opacity: 1 !important
+          animation: spin infinite 4s
+          animation-timing-function: linear
+
+  a.title
+    font-size: 1.75rem
+    font-weight: 900
+    color: inherit
+    line-height: 1.2
+    display: block
+    position: relative
+    .main
+      color: var(--text-p0)
+    .sub
+      color: var(--text-p1)
+      trans2 opacity transform
+      white-space: nowrap
+    .hover
+      position: absolute
+      bottom: 0
+      transform: translateY(8px)
+      overflow: visible
+    &:hover
+      .normal
+        opacity: 0
+        transform: translateY(-8px)
+      .hover
+        transform: translateY(0)
+        opacity: 1 !important

source/css/_layout/sidebar/sidebar.styl

@@ -3,7 +3,7 @@
   flex-direction: column
   word-break: break-all
   text-align: justify
-  height: "calc(100vh - 1 * %s)" % var(--gap-l)
+  height: 100vh
   .header
     margin: var(--gap-l) var(--gap-l) 0
     margin-top: "calc(2 * %s)" % var(--gap-l)
@@ -14,7 +14,6 @@
     height: 100vh
   
 
-
 .l_left[layout=wiki]
   padding-bottom: 0
   height: 100vh
@@ -24,83 +23,6 @@
     margin-bottom: 6rem
 
 
-.logo-wrap
-  display: flex
-  align-items: center
-  overflow: hidden
-  a
-    color: inherit
-    display: flex
-    align-items: center
-  a.avatar
-    display: block
-    position: relative
-    width: 50px
-    height: 50px
-    flex-shrink: 0
-    border-radius: 50px
-    overflow: hidden
-    margin-right: 1rem
-    div.bg
-      width: 100%
-      height: 100%
-      background-size: cover
-    img.avatar
-      margin: 2px
-      object-fit: cover
-      width: "calc(100% - 2 * %s)" % @margin
-      height: "calc(100% - 2 * %s)" % @margin
-      border-radius: @width
-    if hexo-config('style.animated_avatar.animate')
-      div.bg
-        trans1: opacity
-        position: absolute
-        opacity: 0 !important
-        z-index: -1
-      @keyframes spin
-        from
-          transform:rotate(0deg)
-        to
-          transform:rotate(360deg)
-    if hexo-config('style.animated_avatar.animate') == 'always'
-      div.bg
-        opacity: 1 !important
-        animation: spin infinite 4s
-        animation-timing-function: linear
-    if hexo-config('style.animated_avatar.animate') == 'auto'
-      &:hover
-        div.bg
-          opacity: 1 !important
-          animation: spin infinite 4s
-          animation-timing-function: linear
-
-  a.title
-    font-size: 1.75rem
-    font-weight: 900
-    color: inherit
-    line-height: 1.2
-    display: block
-    position: relative
-    .main
-      color: var(--text-p0)
-    .sub
-      color: var(--text-p1)
-      trans2 opacity transform
-      white-space: nowrap
-    .hover
-      position: absolute
-      bottom: 0
-      transform: translateY(8px)
-      overflow: visible
-    &:hover
-      .normal
-        opacity: 0
-        transform: translateY(-8px)
-      .hover
-        transform: translateY(0)
-        opacity: 1 !important
-
-
 .l_left .widgets .widget-wrapper.logo-wrap.wiki
   margin-bottom: 1.5rem
   flex-direction: column
@@ -114,38 +36,3 @@
       color: $color-hover
       filter: unset !important
 
-.l_left nav.menu
-  margin-bottom: 1.5rem
-
-nav.menu
-  margin: 1rem 0
-  background: var(--block)
-  border-radius: 6px
-  display: flex
-  padding: 1px
-  flex-wrap: wrap
-  &::-webkit-scrollbar
-    display: none
-  &::-webkit-scrollbar-track-piece
-    background: transparent
-  &::-webkit-scrollbar-thumb
-    display: none
-  a.nav-item
-    text-overflow: ellipsis
-    word-break: keep-all
-    margin: 1px
-    border-radius: 4px
-    font-size: $fs-14
-    font-weight: 500
-    overflow: hidden
-    padding: 0.375rem 0.5rem
-    color: var(--text-p3)
-    text-align: center
-    &.active, &:hover
-      color: var(--text-p1)
-      background: var(--card)
-      box-shadow: $boxshadow-button
-
-.l_left .menu a.nav-item
-  flex-grow: 1
-

source/css/_layout/widgets/ghrepo.styl

@@ -1,6 +1,5 @@
 .widget-wrapper.ghrepo
-  .widget-body
+  .repo
-    a.repo
     display: block
     padding: 0.75rem 0.5rem
     color: var(--text-p2)
@@ -15,7 +14,6 @@
     &:hover
       box-shadow: $boxshadow-card-float
       transform: translateY(-1px)
-    a.repo
     svg
       margin-right: 4px
     .flex-row

source/css/_layout/widgets/ghuser.styl

@@ -8,7 +8,8 @@
   padding: 1rem
   box-shadow: $boxshadow-card
 
-.widget-wrapper.ghuser .widget-body .avatar
+.widget-wrapper.ghuser 
+  .avatar
     display: block
     border-radius: 100%
     margin: 1rem auto 1.25rem auto
@@ -19,17 +20,17 @@
     @media screen and (max-width: $device-tablet)
       max-width: 50%
 
-.widget-wrapper.ghuser .widget-body .username
+  .username
     font-weight: 900
     font-size: $fs-h2
     color: var(--text-p0)
     margin: 0.5rem 0
 
-.widget-wrapper.ghuser .widget-body .bio
+  .bio
     font-size: $fs-13
     margin: 0.5rem 0
 
-.widget-wrapper.ghuser .widget-body .follow 
+  .follow 
     font-weight: 500
     border-radius: 64px
     padding: 0.5rem 1rem
@@ -48,7 +49,7 @@
     &:hover
       background: $color-hover
 
-.widget-wrapper.ghuser .widget-body .menu 
+  .menu 
     margin-bottom: 0
     background: none
     a:hover 
@@ -67,14 +68,14 @@
         border-radius: 4px
         background: $color-theme
 
-.widget-wrapper.ghuser .widget-body .buttons
+  .buttons
     margin: 1rem 0
     align-self: stretch
     display: grid
     grid-gap: 2px
     grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
 
-.widget-wrapper.ghuser .widget-body .btn
+  .btn
     display: flex 
     flex-direction: column
     align-items: center
@@ -85,14 +86,10 @@
     trans1: background
     &:hover
       background: var(--block)
-
+    .title
-
-.widget-wrapper.ghuser .widget-body .buttons .btn .title
       font-size: 1rem
       font-weight: 700
-
+    .desc
-
-.widget-wrapper.ghuser .widget-body .buttons .btn .desc
       font-size: $fs-12
       color: var(--text-p3)
       font-weight: 500

source/css/_layout/widgets/recent.styl

@@ -0,0 +1,15 @@
+.widget-wrapper.recent .widget-body
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  margin-top: 0.25rem
+  a
+    line-height: 1.2
+    font-size: $fs-13
+    margin: 0.25rem 0
+    .title  
+      font-size: $fs-13
+      color: var(--text-p2)
+    &:hover
+      color: $color-hover
+

source/css/_layout/widgets/related.styl

@@ -0,0 +1,8 @@
+.widget-wrapper.related .widget-body a
+  margin-top: 0.5rem
+  margin-bottom: 1rem
+  .title 
+    font-weight: 700
+    font-size: $fs-14
+  .excerpt
+    -webkit-line-clamp: 3

source/css/_layout/widgets/tagcloud.styl

@@ -0,0 +1,8 @@
+.widget-wrapper.tagcloud .widget-body
+  margin-top: 0.25rem
+  a  
+    word-break: break-word
+    color: var(--text-p2)
+    line-height: 1.5
+    &:hover
+      color: $color-hover

source/css/_layout/widgets/timeline.styl

@@ -0,0 +1,17 @@
+.widget-wrapper.timeline 
+  .widget-body
+    margin-top: 0.5rem
+  .tag-plugin.timeline .timenode
+    .header
+      margin-bottom: 0.5rem
+      txt-ellipsis()
+      .user-info
+        background: var(--block)
+        &:hover
+          background: $color-hover
+          color: var(--card)
+      &:before
+        display: none
+    &+.timenode
+      margin-top: 0.75rem
+      

source/css/_layout/widgets/toc_common.styl

@@ -1,10 +1,13 @@
+.widget-wrapper.toc .widget-header
+  margin-top: 1rem
+
 .widget-wrapper.toc.single .widget-header
   font-weight: 500
   font-size: $fs-12
   >span
     margin: 0.5rem 0
 
-.toc .widget-body
+.widget-wrapper.toc .widget-body
   margin-top: 0
   ul ul, ul ol
     padding-left: 0
@@ -34,7 +37,7 @@
       padding-left: 2.9rem
 
 
-.toc .toc-item
+.widget-wrapper.toc .toc-item
   color: var(--text-p2)
   font-size: $fs-12
   padding: 0
@@ -44,7 +47,7 @@
     border-left-color: @color
   .toc-child .toc-item
     padding: 0
-.toc a.toc-link
+.widget-wrapper.toc a.toc-link
   color: inherit
   display: block
   line-height: 1.2

source/css/_layout/widgets/toc_wiki.styl

@@ -1,7 +1,3 @@
-.widget-wrapper.toc
-  .widget-header
-    margin-top: 1rem
-
 .widget-wrapper.toc.multi .widget-header
   color: var(--text-p1)
   font-size: $fs-14

source/css/_layout/widgets/widgets.styl

@@ -1,7 +1,8 @@
-.widgets .loading-wrap
+.widgets 
+  .loading-wrap
     margin: 0.5rem 0
 
-.l_left .widgets
+.widgets
   overflow: scroll
   flex-grow: 1
   scrollbar-width: none
@@ -9,6 +10,7 @@
   z-index: 1
   line-height: 1.2
   .widget-wrapper
+    display: block
     margin: 1rem 0 2rem
     .widget-header
       padding-left: var(--gap-l)
@@ -52,55 +54,3 @@
       margin-top: 0
   .widget-wrapper+.widget-wrapper .widget-header
     margin-top: 3rem
-
-
-.l_left .widgets
-  .widget-wrapper.recent .widget-body
-    display: flex
-    flex-direction: column
-    align-items: flex-start
-    margin-top: 0.25rem
-    a
-      line-height: 1.2
-      font-size: $fs-13
-      margin: 0.25rem 0
-      padding: 2px 0
-      .title  
-        font-size: $fs-13
-        color: var(--text-p2)
-      &:hover
-        color: $color-hover
-  .widget-wrapper.related .widget-body a
-    margin-top: 0.5rem
-    margin-bottom: 1rem
-    .title 
-      font-weight: 700
-      font-size: $fs-14
-    .excerpt
-      -webkit-line-clamp: 3
-
-  .widget-wrapper.tagcloud .widget-body
-    margin-top: 0.25rem
-    a  
-      word-break: break-word
-      color: var(--text-p2)
-      line-height: 1.5
-      &:hover
-        color: $color-hover
-  
-  .widget-wrapper.timeline .widget-body
-    margin-top: 0.5rem
-    .tag-plugin.timeline .timenode
-      .header
-        margin-bottom: 0.5rem
-        txt-ellipsis()
-        .user-info
-          background: var(--block)
-          &:hover
-            background: $color-hover
-            color: var(--card)
-        &:before
-          display: none
-      &+.timenode
-        margin-top: 0.75rem
-