hexo-theme-volantis 4.3.1 → 5.0.0-alpha.112

package/source/css/_style/_layout/friends-simpleuser.styl

@@ -0,0 +1,23 @@
+// layout/friends.ejs
+if hexo-config('pages.friends.layout_scheme') != 'traditional'
+  .md .simpleuser-group
+    margin: 0
+    display: grid
+    grid-template-columns: repeat(auto-fill, 112px)
+  .md .simpleuser
+    text-align: center
+    padding: 1em .5em
+    border-radius: 4px
+    img
+      display: block
+      width: 50px
+      height 50px
+      border-radius: 50px
+      object-fit: cover
+    img+span
+      display: block
+      font-size: $fontsize-meta
+      line-height: 1.2
+      color: var(--color-text)
+    &:hover
+      background: var(--color-site-bg)

package/source/css/_style/_layout/friends-traditional.styl

@@ -0,0 +1,81 @@
+// layout/friends.ejs
+if hexo-config('pages.friends.layout_scheme') == 'traditional'
+  .article.l_friends
+    .friends-group
+      .friend-content
+        display: flex
+        flex-wrap: wrap
+        margin: -0.5 * $gap
+        border-radius: $border-card
+        align-items: flex-start
+        line-height: 1.3
+        .friend-card
+          display: flex
+          border-radius: $border-codeblock
+          box-shadow: $boxshadow-card
+          padding: $gap * 0.5 0
+          margin: $gap * 0.5
+          margin-top: "calc(2.25 * %s + 32px)" % $gap
+          color: var(--color-meta)
+          background: var(--color-block)
+          justify-content: flex-start
+          align-content: flex-start
+          flex-direction: column
+          width: "calc(100%/4 - %s)" % $gap
+          @media screen and (max-width: $device-laptop)
+            width: "calc(100%/4 - %s)" % $gap
+
+          @media screen and (max-width: $device-tablet)
+            width: "calc(100%/3 - %s)" % $gap
+
+          @media screen and (max-width: $device-mobile)
+            width: "calc(100%/2 - %s)" % $gap
+
+          &:hover
+            .friend-left
+              .avatar
+                transform: scale(1.2) rotate(12deg)
+                box-shadow: $boxshadow-card-float
+
+
+
+          .friend-left
+            display: flex
+            align-self: center
+            .avatar
+              width: 64px
+              height: 64px
+              trans()
+              box-shadow: $boxshadow-card
+              margin: $gap $gap * 0.5 $gap * 0.25 $gap * 0.5
+              margin-top: "calc(-1.25 * %s - 32px)" % $gap
+              border-radius: 100%
+              border: 2px solid white
+              background: white
+
+
+          .friend-right
+            margin: $gap * 0.25 $gap * 0.5
+            display: flex
+            flex-direction: column
+            text-align: center
+            p
+              text-align: center
+
+            .friend-tags-wrapper
+              trans()
+              margin-left: -2px
+              word-break:break-all
+            p
+              margin: 0
+              &.friend-name
+                font-size: $fontsize-code
+                padding-top: 4px
+                font-weight: bold
+
+              &.tags
+                font-size: $fontsize-footnote
+                display: inline
+                background: none
+                word-wrap: break-word
+                padding-right: 4px

package/source/css/_style/_layout/loading.styl

@@ -0,0 +1,14 @@
+svg.loading
+  display: block
+  position: absolute
+  color: var(--text-p3)
+  width: 100%
+  height: 2rem
+  margin: auto
+  animation: spin infinite 2s
+  animation-timing-function: linear
+  @keyframes spin
+    from
+      transform:rotate(0deg)
+    to
+      transform:rotate(360deg)

package/source/css/{_layout → _style/_layout}/main.styl

@@ -42,11 +42,16 @@
         &.hl
           box-shadow: $boxshadow-card-float
 
-.l_main
+#l_main
   width: "calc(100% - 1 * %s)" % $sidebar
   @media screen and (max-width: $device-tablet)
     width: 100%
-  padding-right: $gap
+  if hexo-config('sidebar.position') =='right'
+    padding-right: $gap
+  if hexo-config('sidebar.position') =='left'
+    padding-left: $gap
+    @media screen and (max-width:$device-tablet)
+      padding-left: 0
   &.no_sidebar
     width: 100%
     padding-right: 0
@@ -54,9 +59,15 @@
     @media screen and (min-width: $device-2k)
       max-width: "calc(55vw - %s)" % $sidebar
     margin: auto
-    ~.l_side
+    ~#l_side
       display: none
   float: left
+  if hexo-config('sidebar.position') =='left'
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
   .post-list
     position: relative
     margin-bottom: $gap
@@ -170,6 +181,7 @@
           align-items: baseline
           justify-content: center
           margin: 0 $gap 0 0
+          padding: 8px 0  // seo https://web.dev/tap-targets/
           &:last-child
             margin-right: 0
           img,i
@@ -189,7 +201,7 @@
             img
               height: 16px
               width: 16px
-              margin-right: 5px
+              margin-right: 8px // seo https://web.dev/tap-targets/
             p
               margin: 0
               font-weight: normal
@@ -316,9 +328,9 @@ article#comments
 .white-box
   background: var(--color-card)
 
-if hexo-config('plugins.scrollreveal.enable')
-  .reveal
-    visibility: hidden
+// if hexo-config('plugins.scrollreveal.enable')
+//   .reveal
+//     visibility: hidden
 
 img
   max-width 100%

package/source/css/{_layout → _style/_layout}/pagination.styl

@@ -1,4 +1,4 @@
-.l_main
+#l_main
   .prev-next
     width: 100%
     display: flex

package/source/css/{_layout → _style/_layout}/posts.styl

@@ -8,6 +8,8 @@
       color: $color-hover
   &[pin]
     margin-right: 36px
+.article-desc
+  word-break: break-word
 .post-v3
   overflow: hidden
   text-align: justify

package/source/css/{_first → _style/_layout}/search.styl

@@ -1,15 +1,4 @@
 #u-search
-  $border-card = 4px
-  display: none
-  position: fixed
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
-  padding: 60px 20px
-  z-index: 1001
-  @media screen and (max-width: $modal-threshold)
-    padding: 0px
   .modal
     position: fixed
     height: 80%
@@ -32,14 +21,7 @@
       border-radius: 0
 
 
-  	.modal-ajax-content
-    	opacity: 0
-    	visibility: hidden
-    	trans()
 
-    	&.loaded
-      	opacity: 1
-      	visibility: visible
 
 
     .modal-header
@@ -74,24 +56,6 @@
         &:hover
           transform: rotate(90deg)
 
-
-      .modal-loading
-        position: absolute
-        bottom: 0
-        left: 0
-        width: 100%
-        height: 2px
-        background: transparent
-        z-index: 1
-
-        .modal-loading-bar
-          display: block
-          position: relative
-          width: 0%
-          height: 100%
-          background: $color-theme
-          trans()
-
       #u-search-modal-form
         position: relative
         width: 100%
@@ -131,73 +95,6 @@
         color: $color-theme
         z-index: 2
 
-
-    .modal-footer
-      position: absolute
-      display: none
-      bottom: 0
-      left: 0
-      width: 100%
-      height: 50px
-      padding: 0px 15px
-      background: var(--color-card)
-      .logo
-        position: absolute
-        top: 0
-        left: 0
-        width: 100%
-        height: 100%
-        text-align: center
-        z-index: 0
-        a
-          display: inline-block
-          height: 50px
-        &.google img
-          height: 24px
-          margin-top: 13px
-        &.baidu img
-          height: 22px
-          margin-top: 14px
-        img
-          position: relative
-          display: inline-block
-          width: auto
-          height: 18px
-          margin-top: 16px
-      .modal-error
-        position: relative
-        float: left
-        vertical-align: middle
-        line-height: 50px
-        font-size: 13px
-        z-index: 1
-
-      .modal-metadata
-        position: relative
-        float: left
-        vertical-align: middle
-        line-height: 50px
-        font-size: 13px
-        z-index: 1
-
-      .nav
-        position: relative
-        display: block
-        float: right
-        vertical-align: middle
-        font-size: $fontsize-meta
-        font-weight: bold
-        line-height: 50px
-        color: var(--color-meta)
-        cursor: pointer
-        z-index: 1
-        &:hover
-          color: $color-hover
-        &.btn-next
-          margin-left: $gap
-        .icon
-          font-size: $fontsize-meta
-
     .modal-body
       position: absolute
       padding: $gap

package/source/css/{_layout → _style/_layout}/sidebar.styl

@@ -1,6 +1,12 @@
-.l_side
+#l_side
   width: $sidebar
   float: right
+  if hexo-config('sidebar.position') =='left'
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
   position: relative
   display: flex
   flex-direction: column
@@ -104,7 +110,6 @@
     trans()
     .content
       padding: 0
-      text-align: center
       display: flex
       flex-direction: column
       align-items: stretch
@@ -142,11 +147,13 @@
         :first-child
           margin-top: $gap
       h2
+        text-align: center
         font-weight: bold
         margin: $gap * 0.5
         @media screen and (max-width: $device-tablet)
           margin: $gap * 0.5
       p
+        text-align: center
         font-weight: bold
         margin: $gap * 0.5 $gap * 0.5 0 $gap * 0.5
         empty-cells: hide
@@ -320,7 +327,7 @@
         margin-bottom: 4px
 
 
-.l_side>.widget.page
+#l_side>.widget.page
   >.content
     padding-top: 0
     padding-left: $gap - 4px
@@ -338,3 +345,16 @@
       &:last-child
         display inline-block
         float right
+
+.widget-last
+  display: block !important
+  .item
+    display: flex
+    justify-content: space-between
+    font-size: 0.8rem
+  .item-title
+    width: 100%  // 设定宽度
+    display: inline-block  // 将 span 当作块级元素
+    white-space: nowrap  // 不换行
+    overflow: hidden  // 超出宽度部分隐藏
+    text-overflow: ellipsis  // 超出部分以点号替代

package/source/css/{_layout → _style/_layout}/toc.styl

@@ -1,4 +1,4 @@
-.l_side .toc-wrapper
+#l_side .toc-wrapper
   z-index: 1
   overflow: hidden
   border-radius: $border-card
@@ -83,7 +83,7 @@
   &:empty
     display:none
 
-  .toc-child 
+  .toc-child
     font-size: 1rem
     overflow: hidden
     transition: max-height 0.6s ease-in
@@ -93,5 +93,5 @@
       &>.toc-link
         list_active()
         border-left: $border-line solid $color-theme
-      &>.toc-child 
+      &>.toc-child
         max-height: 1000px

package/source/css/_style/_plugins/_dark/dark_async.styl

@@ -0,0 +1,41 @@
+// 异步加载的暗黑模式 暗黑模式 CSS 变量
+
+async_dark()
+  // tag plugin from stellar
+  --block-hover: mix($c-block-dark, $c-text-dark, 95)
+  --text-p1: $c-text-dark
+  --text-p3: mix($c-text-light, $c-site-bg-light, 60)
+  --card: $c-card-light
+
+  // waline Dark Color https://github.com/volantis-x/hexo-theme-volantis/issues/633
+  if hexo-config('comments.service')=='waline'
+    --waline-white: #000 !important
+    --waline-light-grey: #666 !important
+    --waline-dark-grey: #999 !important
+    --waline-text-color: #888 !important
+    --waline-bgcolor: #1e1e1e !important
+    --waline-bgcolor-light: #272727 !important
+    --waline-border-color: #333 !important
+    --waline-disable-bgcolor: #444 !important
+    --waline-disable-color: #272727 !important
+    --waline-bq-color: #272727 !important
+    --waline-info-bgcolor: #272727 !important
+    --waline-info-color: #666 !important
+
+
+  // Custom Files
+  for $injects_darkVar in hexo-config('injects.darkVar')
+    @import $injects_darkVar;
+  // eg:
+  // body
+  //   --color-site-body: blue !important
+
+@media (prefers-color-scheme: dark)
+  :root
+    --color-mode: 'dark'
+  :root:not([color-scheme])
+    async_dark()
+    @import 'dark_plugins'
+[color-scheme='dark']
+  async_dark()
+  @import 'dark_plugins'

package/source/css/_style/_plugins/_dark/dark_plugins.styl

@@ -0,0 +1,136 @@
+// 异步加载的暗黑模式 强制覆盖样式
+
+fa-solid,
+fa-regular,
+fa-duotone,
+fa-light,
+fa-thin,
+fal,
+fad,
+fa,
+svg.iconfont,
+img,
+.lazyload
+  filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
+
+//side
+.widget.blogger .content .social-wrapper a.social:hover
+  background: var(--color-card)
+.widget >.content ul.entry a .badge, .widget >.content ul.popular-posts a .badge
+  color: unset !important
+.content
+  color: var(--color-p)
+.widget >.content a
+  color: var(--color-p) !important
+  &:hover
+    color: var(--color-list-hl) !important
+.note
+  background: var(--color-block) !important
+div.tabs ul.nav-tabs li.tab.active a
+  color: var(--color-p)
+  background: var(--color-card)
+kbd
+  background: var(--color-block) !important
+.cover-wrapper.dock .menu .list-h a:hover, .cover-wrapper.featured .menu .list-h a:hover, .cover-wrapper.focus .menu .list-h a:hover
+  color: var(--color-text) !important
+
+//highlight
+if hexo-config('plugins.code_highlight') == "highlightjs"
+  .gutter
+    background: var(--color-card) !important
+    background-color: var(--color-card) !important
+  .highlight figcaption
+    background-color: #14161a
+  .highlight pre .line, .highlight pre .params
+    color: rgba(158, 142, 142, 0.9)
+
+//table
+*:not(.highlight) >table tr
+  background-color: var(--color-card)
+*:not(.highlight) >table th
+  background: var(--color-site-bg)
+*:not(.highlight) table td,*:not(.highlight) table th
+  border-color: var(--color-site-bg)
+*:not(.highlight) >table tr:hover
+  background: var(--color-codeblock)
+.timenode .highlight
+  border-color: var(--color-site-bg) !important
+blockquote p
+  color: var(--color-p)
+
+// tags
+#archive-page .archive .all-tags ul li span
+  color: var(--color-text)
+  background: #6f6f72
+
+// btn-copy
+.btn-copy:hover
+  background: var(--color-site-body)
+
+if hexo-config('comments.service')=='gitalk'
+  .gt-container .gt-header-textarea
+    background-color: var(--color-card)
+    &:hover
+      background-color: var(--color-block)
+  .gt-container .gt-comment-content
+    background-color: var(--color-card)
+    &:hover
+      box-shadow: none
+  .gt-container .gt-comment-admin .gt-comment-content
+    background-color: var(--color-card)
+
+if hexo-config('plugins.aplayer.enable')
+  .aplayer
+    background: var(--color-site-bg)
+  .aplayer .aplayer-list ol li:hover
+    background: rgba($color-theme,.2)
+  .aplayer .aplayer-list ol li.aplayer-list-light
+    background: var(--color-block)
+  .aplayer-info
+    background: var(--color-site-bg) !important
+  .aplayer .aplayer-lrc:before
+    background: linear-gradient(180deg,#282c34 0,hsla(0,0%,100%,0))
+  .aplayer .aplayer-lrc:after
+    background: linear-gradient(180deg,hsla(0,0%,0%,0) 0,hsla(0,0%,13%,.8))
+  .aplayer-pic
+    filter: brightness(convert(hexo-config('color_scheme.dark.brightness')))
+  .aplayer .aplayer-list ol li
+    border-top: 1px solid var(--color-card)
+  .aplayer.aplayer-withlist .aplayer-info
+    border-bottom: 1px solid var(--color-block)
+  .aplayer .aplayer-notice
+    background-color: var(--color-site-bg) !important
+
+if hexo-config('comments.service')=='twikoo'
+  .OwO
+    .OwO-body
+      color: silver !important
+      background-color: #252627 !important
+      border-color: #4a4b50 !important
+      .OwO-bar
+        border-top: 1px solid #4a4b50 !important
+        background:#4a4b50 !important
+        color: #ccc !important
+        .OwO-packages
+          li:hover
+            background-color: #252627 !important
+          .OwO-package-active
+            background-color: #252627 !important
+      .OwO-items
+        .OwO-item
+          background:#4a4b50 !important
+          color: #ccc !important
+      .OwO-items-image
+        .OwO-item:hover
+          background-color: #252627 !important
+          
+if hexo-config('comments.service')=='discuss'
+  #Discuss .D-emot
+    background: #333841
+
+// Custom Files
+for $injects_dark in hexo-config('injects.dark')
+  @import $injects_dark;
+// eg:
+// body
+//   --color-site-body: blue !important

package/source/css/_style/_plugins/_highlight/highlightjs/clipboard.styl

@@ -0,0 +1,36 @@
+//代码块复制按钮
+.highlight
+  //方便copy代码按钮（btn-copy）的定位
+  position: relative
+
+.btn-copy
+  z-index: 1
+  display: inline-block
+  cursor: pointer
+  border: none
+  disable-user-select()
+  -webkit-appearance: none
+  font-family: Menlo, $fontfamily-code
+  font-size: 11px
+  font-weight: bold
+  padding: $gap * 0.25 $gap * 0.5
+  >i
+    margin-right: 4px
+  color: var(--color-meta)
+  background: var(--color-block)
+  border-radius: 3px
+  box-shadow: $boxshadow-card
+  position: absolute
+  top: 1px
+  right: 1px
+  opacity: 0
+  trans()
+  &:hover
+    color: $color-hover
+    background: bgcolor($color-hover)
+
+.highlight:hover .btn-copy
+  opacity: 1
+
+.article pre:hover .btn-copy
+  opacity: 1