hexo-theme-volantis 4.3.0 → 5.0.0-rc.2

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

@@ -42,11 +42,14 @@
         &.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
   &.no_sidebar
     width: 100%
     padding-right: 0
@@ -54,9 +57,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 +179,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 +199,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 +326,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,13 @@
-.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;
+    padding-left: $gap
   position: relative
   display: flex
   flex-direction: column
@@ -104,7 +111,6 @@
     trans()
     .content
       padding: 0
-      text-align: center
       display: flex
       flex-direction: column
       align-items: stretch
@@ -142,11 +148,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 +328,7 @@
         margin-bottom: 4px
 
 
-.l_side>.widget.page
+#l_side>.widget.page
   >.content
     padding-top: 0
     padding-left: $gap - 4px
@@ -338,3 +346,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

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

@@ -0,0 +1,50 @@
+// 异步加载的暗黑模式 暗黑模式 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
+
+  // minivaline v6 or ohhho Dark Color
+  if hexo-config('comments.service') == 'minivaline' || hexo-config('comments.service') == 'ohhho'
+    --ohhho-color-p: var(--color-p) !important
+    --ohhho-color-text: var(--color-text) !important
+    --ohhho-color-card: var(--color-card) !important
+    --ohhho-color-block: var(--color-block) !important
+    --ohhho-expand-before-background: linear-gradient(180deg, rgba(246,246,246,0), rgba(0,0,0,0.9)) !important
+    --ohhho-expand-after-background: rgba(0,0,0,0.9) !important
+
+  // 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/{_plugins/dark.styl → _style/_plugins/_dark/dark_plugins.styl}

@@ -1,54 +1,13 @@
-if hexo-config('plugins.backstretch.position') == 'fixed'
-  .backstretch
-    background-color: #282c34 !important
-  .backstretch-item
-    display: none !important
-else
-  #l_body
-    background-color: black !important
-img
-  filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
+// 异步加载的暗黑模式 强制覆盖样式
+
+fal,
+fad,
+fa,
+svg.iconfont,    
+img,
 .lazyload
   filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
-.pdf
-  filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
-//header
-#wrapper .title
-  color: var(--color-meta)
-.l_header ul.nav-list-h>li>a, ul.list-v >li>a
-  color: var(--color-list)
-.blur
-  background: var(--color-site-bg) !important
-.nav-main
-  .u-search-input
-    background: var(--color-card) !important
-.l_main .article .prev-next>a
-  background: var(--color-block)
-  &:hover
-    background: var(--color-card)
-.article blockquote
-  background: var(--color-block)
-.article-title a
-  color: var(--color-h1)
-details>summary
-  color: var(--color-p)
-  background: var(--color-site-bg)
-details
-  border: 1px solid var(--color-site-bg)
-  background: var(--color-site-bg)
-//search
-#u-search .modal
-  background: var(--color-card) !important
-#u-search .modal-header
-  background: var(--color-card) !important
-#u-search .modal-body
-  background: var(--color-card) !important
-#u-search .modal-body .modal-results .result:hover
-  background: var(--color-block) !important
-//phone search
-.l_header .m_search
-  @media screen and (max-width: $device-mobile)
-    background: var(--color-site-bg) !important
+
 //side
 .widget.blogger .content .social-wrapper a.social:hover
   background: var(--color-card)
@@ -63,14 +22,17 @@ 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
-.gutter
-  background: var(--color-card) !important
-  background-color: var(--color-card) !important
-.highlight figcaption
-  background-color: #21252b
-.highlight pre .line, .highlight pre .params
-  color: rgba(158, 142, 142, 0.9)
+if hexo-config('plugins.code_highlight') == "highlightjs"
+  .gutter
+    background: var(--color-card) !important
+    background-color: var(--color-card) !important
+  .highlight figcaption
+    background-color: #21252b
+  .highlight pre .line, .highlight pre .params
+    color: rgba(158, 142, 142, 0.9)
+
 //table
 *:not(.highlight) >table tr
   background-color: var(--color-card)
@@ -84,10 +46,12 @@ kbd
   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
+
 if hexo-config('comments.service')=='gitalk'
   .gt-container .gt-header-textarea
     background-color: var(--color-card)
@@ -99,26 +63,35 @@ if hexo-config('comments.service')=='gitalk'
       box-shadow: none
   .gt-container .gt-comment-admin .gt-comment-content
     background-color: var(--color-card)
-if hexo-config('comments.service')=='minivaline'
-  .MiniValine .vpage .more
-    background: var(--color-site-bg)
-  .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:before
-    background: linear-gradient(180deg, rgba(246,246,246,0), rgba(0,0,0,0.9))
-  .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:after
-    background: rgba(0,0,0,0.9)
-  .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment pre
-    background: var(--color-site-bg)
-    border: 1px solid var(--color-site-bg)
-  .MiniValine .vinputs-area .vextra-area .vsmile-icons
-    background: transparent
-  .MiniValine .vlist .vcard .vcomment-body .vhead
+
+if hexo-config('comments.service')== 'minivaline' || hexo-config('comments.service')== 'ohhho'
+  // minivaline v6 or ohhho Dark Color
+  .ohhho pre
+    background: var(--color-meta)
+    border: 1px solid var(--color-block)
+  .ohhho .vlist .vcard .vcomment-body .vhead
     filter: brightness(85%)
-  .MiniValine .vbtn
-    background: var(--color-card)
-    &:hover
-      background: var(--color-block)
-  .MiniValine .vpage .more:hover
-    background: var(--color-card)
+  ////// minivaline v5 Dark Color //////////////
+  // .MiniValine .vpage .more
+  //   background: var(--color-site-bg)
+  // .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:before
+  //   background: linear-gradient(180deg, rgba(246,246,246,0), rgba(0,0,0,0.9))
+  // .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:after
+  //   background: rgba(0,0,0,0.9)
+  // .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment pre
+  //   background: var(--color-site-bg)
+  //   border: 1px solid var(--color-site-bg)
+  // .MiniValine .vinputs-area .vextra-area .vsmile-icons
+  //   background: transparent
+  // .MiniValine .vlist .vcard .vcomment-body .vhead
+  //   filter: brightness(85%)
+  // .MiniValine .vbtn
+  //   background: var(--color-card)
+  //   &:hover
+  //     background: var(--color-block)
+  // .MiniValine .vpage .more:hover
+  //   background: var(--color-card)
+
 if hexo-config('plugins.aplayer.enable')
   .aplayer
     background: var(--color-site-bg)
@@ -138,6 +111,7 @@ if hexo-config('plugins.aplayer.enable')
     border-top: 1px solid var(--color-card)
   .aplayer.aplayer-withlist .aplayer-info
     border-bottom: 1px solid var(--color-block)
+
 if hexo-config('comments.service')=='valine'
   #valine_container button
     background-color: var(--color-block) !important
@@ -146,4 +120,34 @@ if hexo-config('comments.service')=='valine'
   #valine_container .vcards .vcontent.expand:after
     background:  #393c40 !important
   .v[data-class=v] code, .v[data-class=v] pre
-    background-color: #332828 !important
+    background-color: #332828 !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
+
+// 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-card)
+  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

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

@@ -0,0 +1,96 @@
+$hl-keyword = #9c27b0
+$hl-blue = #1E80F0
+$hl-cyan = #17AFCA
+$hl-green = #3FA33F
+$hl-light-blue = #6ECDF9
+$hl-red = #EE2B29
+$hl-orange = #FB3F1B
+$hl-amber = #FD8607
+$hl-text = alpha($color-text, .9)
+.highlight pre
+  // 行
+  .line,.params
+    color: $hl-text
+
+  .line .addition
+    color: $hl-green
+  .line .deletion
+    color: $hl-red
+
+  .marked
+    background-color: alpha(#FED542, .4)
+    padding: 2px 8px 2px 0
+    border-radius: 2px
+    width: 100%
+
+  .title, .attr, .attribute
+    color: $color-md-indigo
+
+  // 注释
+  .comment
+    color: var(--color-meta)
+
+  .keyword, .meta-keyword, .javascript .function
+    color: $hl-keyword
+
+  .type, .built_in, .tag .name
+    color: $color-md-light-blue
+
+  .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
+    color: $hl-amber
+
+  .number, .preprocessor, .literal, .constant
+    color: $hl-amber
+
+  .class, .ruby .class .title, .css .rules .attribute
+    color: $color-md-orange
+
+  .string, .meta-string
+    color: darken($color-md-green, 10%)
+
+  .value, .inheritance, .header, .ruby .symbol, .xml .cdata
+    color: $color-md-green
+
+  .css .hexcolor
+    color: #66cccc
+
+  .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title
+    color: #6699cc
+
+
+.highlight.html,.highlight.css,.highlight.less,.highlight.stylus
+  .line
+    .tag .name, .selector-tag
+      color: $hl-red
+    .selector-class, .selector-attr
+      color: $hl-amber
+    .attribute
+      color: $color-md-indigo
+    .number
+      color: $hl-cyan
+
+
+.highlight.objc,.highlight.objectivec,.highlight.swift,.highlight.c
+  .line
+    .meta
+      color: $hl-keyword
+    .meta-string,.string
+      color: $hl-orange
+    .class
+      color: $hl-text
+      .title
+        color: $hl-blue
+    .comment
+      color: $hl-green
+
+.highlight.json
+  .line
+    .attr
+      color: #E24F5A
+    .literal
+      color: $color-md-indigo
+
+.highlight.yaml
+  .line
+    .attr
+      color: #E24F5A