hexo-theme-volantis 4.3.1 → 5.0.0-beta.2

package/source/css/_first/{cover.styl → cover_first.styl}

@@ -18,28 +18,30 @@
   position: relative
   overflow: hidden
   margin-bottom: -100px
-  .cover-bg,#cover-backstretch
-    position: absolute
-    width: 100%
-    height: 100%
-    background-position: center
-    background-size: cover
-    &.lazyload
-      &:not(.loaded)
-        opacity: 0
-      &.loaded
-        animation-delay: 0s
-        animation-duration: .5s
-        animation-fill-mode: forwards
-        animation-timing-function: ease-out
-        animation-name: fadeIn
-        @keyframes fadeIn
-          0%
-            opacity: 0
-            filter blur(12px)
-            transform: scale(1.02)
-          100%
-            opacity: 1
+
+  if not hexo-config('plugins.parallax.enable') and hexo-config('cover.background')
+    .cover-bg
+      position: absolute
+      width: 100%
+      height: 100%
+      background-position: center
+      background-size: cover
+      &.lazyload
+        &:not(.loaded)
+          opacity: 0
+        &.loaded
+          animation-delay: 0s
+          animation-duration: .5s
+          animation-fill-mode: forwards
+          animation-timing-function: ease-out
+          animation-name: fadeIn
+          @keyframes fadeIn
+            0%
+              opacity: 0
+              filter blur(12px)
+              transform: scale(1.02)
+            100%
+              opacity: 1
 
   .cover-body
     z-index: 1
@@ -203,76 +205,100 @@
       &:hover, &.active, &:active
         opacity: 1
         border-bottom: 2px solid var(--color-site-inner)
-  &.dock .menu, &.featured .menu, &.focus .menu
-    border-radius: $border-button + 2px
-    .list-h a
-      flex-direction: column
-      align-items: center
-      padding: $gap * 0.75
-      line-height: 24px
-      @media screen and (max-width: $device-mobile)
-        padding: $gap * 0.75 $gap * 0.5
-      border-radius: $border-button
-      border-bottom: none
-      text-align: center
-      align-content: flex-end
-      color: alpha($color-text, .7)
-      font-size: 1.5rem
-      i
-        margin: $gap * 0.5
-      p
-        font-size: $fontsize-meta
-      &.active
-        i, i+p
-          color: $color-theme
-        img+p
-          color: var(--color-text)
-        background: var(--color-card)
-        backdrop-filter: none
-      &:hover
-        background: var(--color-card)
-
+  if hexo-config('cover.layout_scheme') == 'dock' || hexo-config('cover.layout_scheme') == 'featured' || hexo-config('cover.layout_scheme') == 'focus'
+    &.dock .menu, &.featured .menu, &.focus .menu
+      border-radius: $border-button + 2px
+      .list-h a
+        flex-direction: column
+        align-items: center
+        padding: $gap * 0.75
+        line-height: 24px
+        @media screen and (max-width: $device-mobile)
+          padding: $gap * 0.75 $gap * 0.5
+        border-radius: $border-button
+        border-bottom: none
+        text-align: center
+        align-content: flex-end
+        color: alpha($color-text, .7)
+        font-size: 1.5rem
+        i
+          margin: $gap * 0.5
+        p
+          font-size: $fontsize-meta
+        &.active
+          i, i+p
+            color: $color-theme
+          img+p
+            color: var(--color-text)
+          background: var(--color-card)
+          backdrop-filter: none
+        &:hover
+          background: var(--color-card)
 
-.cover-wrapper.dock .top
-  margin-bottom: $gap * 3
-.cover-wrapper.dock .menu
-  background: alpha($color-card, .5)
-  position: absolute
-  bottom: 0
-  max-width: 100%
-  .list-h
-    flex-wrap: nowrap
-    margin: 4px
-    a+a
-      margin-left: 4px
-    @media screen and (max-width: $device-mobile)
-      overflow-x: scroll
-      scrollbar(0, 0)
-  @supports (backdrop-filter: blur(20px))
-    background: alpha($color-card, .5)
-    backdrop-filter: saturate(200%) blur(20px)
-
-.cover-wrapper.featured .menu
-  .list-h
-    margin: -2px
-  .list-h a
-    margin: 2px
+if hexo-config('cover.layout_scheme') == 'dock'
+  .cover-wrapper.dock .top
+    margin-bottom: $gap * 3
+  .cover-wrapper.dock .menu
     background: alpha($color-card, .5)
+    position: absolute
+    bottom: 0
+    max-width: 100%
+    .list-h
+      flex-wrap: nowrap
+      margin: 4px
+      a+a
+        margin-left: 4px
+      @media screen and (max-width: $device-mobile)
+        overflow-x: scroll
+        scrollbar(0, 0)
     @supports (backdrop-filter: blur(20px))
       background: alpha($color-card, .5)
       backdrop-filter: saturate(200%) blur(20px)
 
-.cover-wrapper.focus .menu
-  .list-h
-    margin: 2px
-  trans()
-  &:hover
-    background: alpha($color-card, .5)
-    @supports (backdrop-filter: blur(20px))
+if hexo-config('cover.layout_scheme') == 'featured'
+  .cover-wrapper.featured .menu
+    .list-h
+      margin: -2px
+    .list-h a
+      margin: 2px
       background: alpha($color-card, .5)
-      backdrop-filter: saturate(200%) blur(20px)
-  .list-h a
-    margin: 2px
+      @supports (backdrop-filter: blur(20px))
+        background: alpha($color-card, .5)
+        backdrop-filter: saturate(200%) blur(20px)
+
+if hexo-config('cover.layout_scheme') == 'focus'
+  .cover-wrapper.focus .menu
+    .list-h
+      margin: 2px
+    trans()
     &:hover
-      opacity: 1
-      background: var(--color-card)
+      background: alpha($color-card, .5)
+      @supports (backdrop-filter: blur(20px))
+        background: alpha($color-card, .5)
+        backdrop-filter: saturate(200%) blur(20px)
+    .list-h a
+      margin: 2px
+      &:hover
+        opacity: 1
+        background: var(--color-card)
+
+if hexo-config('plugins.parallax.enable')
+  .cover-wrapper
+    #parallax-window
+      position: absolute
+      width: 100%
+      height: 100%
+      background: transparent
+
+  .parallax-mirror
+    animation-delay: 0s
+    animation-duration: .5s
+    animation-fill-mode: forwards
+    animation-timing-function: ease-out
+    animation-name: fadeIn
+    @keyframes fadeIn
+      0%
+        opacity: 0
+        filter blur(12px)
+      100%
+        opacity: 1

package/source/css/_first/dark_first.styl

@@ -0,0 +1,75 @@
+// 首屏加载的暗黑模式
+fitst_dark()
+  // Base Dark Color
+  --color-site-body: black
+  --color-read-bkg: convert(hexo-config('color_scheme.dark.site_bg'))
+  --color-read-post: convert(hexo-config('color_scheme.dark.card'))
+  --color-site-bg: convert(hexo-config('color_scheme.dark.site_bg'))
+  --color-site-inner: convert(hexo-config('color_scheme.dark.site_inner'))
+  --color-site-footer: convert(hexo-config('color_scheme.dark.site_footer'))
+  --color-card: convert(hexo-config('color_scheme.dark.card'))
+  --color-text: convert(hexo-config('color_scheme.dark.text'))
+
+  --color-block: convert(hexo-config('color_scheme.dark.block'))
+  --color-codeblock: convert(hexo-config('color_scheme.dark.codeblock'))
+  --color-inlinecode: convert(hexo-config('color_scheme.dark.inlinecode'))
+  --color-h1: convert(hexo-config('color_scheme.dark.h1'))
+  --color-h2: convert(hexo-config('color_scheme.dark.h2'))
+  --color-h3: convert(hexo-config('color_scheme.dark.h3'))
+  --color-h4: convert(hexo-config('color_scheme.dark.h4'))
+  --color-h5: convert(hexo-config('color_scheme.dark.h5'))
+  --color-h6: convert(hexo-config('color_scheme.dark.h6'))
+  --color-p: convert(hexo-config('color_scheme.dark.p'))
+  --color-list: convert(hexo-config('color_scheme.dark.list'))
+  --color-list-hl: convert(hexo-config('color_scheme.dark.list_hl'))
+  --color-meta: convert(hexo-config('color_scheme.dark.meta'))
+  --color-link: convert(hexo-config('color_scheme.dark.meta'))
+
+  img
+    filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important
+  //header
+  #wrapper .title
+    color: var(--color-meta) !important
+  .l_header ul.nav-list-h>li>a, ul.list-v >li>a
+    color: var(--color-list) !important
+  .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) !important
+    &:hover
+      background: var(--color-card) !important
+  .article blockquote
+    background: var(--color-block) !important
+  .article-title a
+    color: var(--color-h1) !important
+  details>summary
+    color: var(--color-p) !important
+    background: var(--color-site-bg) !important
+  details
+    border: 1px solid var(--color-site-bg) !important
+    background: var(--color-site-bg) !important
+
+  //search
+  #u-search .modal,
+  #u-search .modal-header,
+  #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
+
+if hexo-config('plugins.darkmode.enable')
+  @media (prefers-color-scheme: dark)
+    :root
+      --color-mode: 'dark'
+    :root:not([color-scheme])
+      fitst_dark()
+  [color-scheme='dark']
+    fitst_dark()

package/source/css/_first/fontfamily_first.styl

@@ -0,0 +1,17 @@
+if hexo-config('custom_css.fontfamily.bodyfont')
+  if hexo-config('custom_css.fontfamily.bodyfont.name')
+    @font-face
+      font-family: hexo-config('custom_css.fontfamily.bodyfont.name')
+      src: url(hexo-config('custom_css.fontfamily.bodyfont.url'))
+      font-weight: hexo-config('custom_css.fontfamily.bodyfont.weight')
+      font-style: hexo-config('custom_css.fontfamily.bodyfont.style')
+      font-display: swap
+
+if hexo-config('custom_css.fontfamily.logofont')
+  if hexo-config('custom_css.fontfamily.logofont.name')
+    @font-face
+      font-family: hexo-config('custom_css.fontfamily.logofont.name')
+      src: url(hexo-config('custom_css.fontfamily.logofont.url'))
+      font-weight: hexo-config('custom_css.fontfamily.logofont.weight')
+      font-style: hexo-config('custom_css.fontfamily.logofont.style')
+      font-display: swap

package/source/css/_first/{navbar.styl → navbar_first.styl}

@@ -28,10 +28,13 @@
 
     .nav-main
       trans()
-      // transform: translateY(0 - $navbar-height)
+    
+    // https://github.com/volantis-x/hexo-theme-volantis/issues/658
     &.sub .nav-main
       transform: translateY(0 - 1 * $navbar-height)
     .nav-sub
+      ::-webkit-scrollbar
+        display:none
       trans()
       opacity: 0
       height: $navbar-height
@@ -345,15 +348,6 @@ ul.list-v
     display: block
   trans()
 
-
-.cover-wrapper
-  .l_header
-    trans(0.5s)
-    transform: translateY(-2 * $navbar-height)
-    &.show
-      transform: translateY(0)
-
-
 .l_header
   if hexo-config('custom_css.navbar.width') == 'auto'
     max-width: 65vw

package/source/css/_first/search_first.styl

@@ -0,0 +1,12 @@
+#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

package/source/css/{_base/index.styl → _style/_base/base.styl}

@@ -1,57 +1,9 @@
 :root
-  --color-site-body: $color-site-bg
-  --color-site-bg: $color-site-bg
-  --color-site-inner: $color-site-inner
-  --color-site-footer: $color-site-footer
-  --color-card: $color-card
-  --color-text: $color-text
-  --color-block: $color-block
-  --color-inlinecode: $color-inlinecode
-  --color-codeblock: $color-codeblock
-  --color-h1: $color-h1
-  --color-h2: $color-h2
-  --color-h3: $color-h3
-  --color-h4: $color-h4
-  --color-h5: $color-h5
-  --color-h6: $color-h6
-  --color-p: $color-p
-  --color-list: $color-list
-  --color-list-hl: $color-list-hl
-  --color-meta: $color-meta
-
-*
-  box-sizing: border-box
-  outline: none
-  margin: 0
-  padding: 0
-
-html
-  color: var(--color-text)
-  width: 100%
-  height: 100%
-  font-family: $fontfamily
-  font-size: $fontsize-root
-  >
-    if hexo-config('custom_css.scrollbar.size')
-      scrollbar(convert(hexo-config('custom_css.scrollbar.size')), convert(hexo-config('custom_css.scrollbar.border')) || 0px)
-
-body
-  background-color: var(--color-site-body)
-  text-rendering: optimizelegibility
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
-  line-height: $lineheight
-  -webkit-text-size-adjust: 100%
-  -ms-text-size-adjust: 100%
-  &.modal-active
-    overflow: hidden
-    @media screen and (max-width: $modal-threshold)
-      position: fixed
-      top: 0
-      right: 0
-      bottom: 0
-      left: 0
-
-
+  // tag plugin from stellar 
+  --block-hover: mix($c-block-light, $c-text-light, 98)
+  --text-p1: $c-text-light
+  --text-p3: mix($c-text-light, $c-site-bg-light, 60)
+  --card: $c-card-light
 
 ::-moz-selection {
   background: $color-selection
@@ -79,14 +31,6 @@ h1,h2,h3,h4,h6
   font-weight: normal
 
 a
-  color: $color-link
-  cursor: pointer
-  text-decoration: none
-  trans()
-  &:hover
-    color: $color-hover
-  &:active,&:hover
-    outline: 0
   &:not([href])
     cursor: default
 
@@ -119,13 +63,7 @@ pre
   display: table-cell
   vertical-align: middle
 
-
-ul,ol
-  padding-left: 0
-  li
-    list-style: none
-
-article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
+article,aside,details,figcaption,figure,footer,hgroup,main,menu,nav,section,summary
   display: block
 
 article
@@ -152,26 +90,10 @@ sup
   vertical-align: text-top
 sub
   vertical-align: text-bottom
-img
-  border: 0
-  background: none
-  max-width: 100%
-
-svg:not(:root)
-  overflow: hidden
 
 figure
   margin: 1em 40px
 
-hr
-  -moz-box-sizing: content-box
-  box-sizing: content-box
-  height: 0
-  border: 0
-  border-radius: 1px
-  border-bottom: 1px solid alpha($color-text, .1)
-
-
 pre
   overflow: auto
 
@@ -187,20 +109,14 @@ code,kbd,pre,samp
   font-family: monospace, monospace
   font-size: 1em
 
-
-button,input,optgroup,select,textarea
+optgroup,select,textarea
   color: inherit /* 1 */
   font: inherit /* 2 */
   margin: 0 /* 3 */
 
-button
-  overflow: visible
-
-button,select
+select
   text-transform: none
 
-
-button,
 html input[type="button"], /* 1 */
 input[type="reset"],
 input[type="submit"]

package/source/css/_style/_base/fontfamily_async.styl

@@ -0,0 +1,8 @@
+if hexo-config('custom_css.fontfamily.codefont')
+  if hexo-config('custom_css.fontfamily.codefont.name')
+    @font-face
+      font-family: hexo-config('custom_css.fontfamily.codefont.name')
+      src: url(hexo-config('custom_css.fontfamily.codefont.url'))
+      font-weight: hexo-config('custom_css.fontfamily.codefont.weight')
+      font-style: hexo-config('custom_css.fontfamily.codefont.style')
+      font-display: swap

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

@@ -55,36 +55,9 @@
       max-width: 100%
       margin: 0
       box-shadow: none
-  s,del
+  s
     color: mix($color-p, $color-card, 60)
     text-decoration-color: @color
-  u
-    color: var(--color-text)
-    text-decoration: none
-    border-bottom: 1px solid $color-mac-red
-  emp
-    color: var(--color-text)
-    border-bottom: 4px dotted $color-mac-red
-  wavy
-    color: var(--color-text)
-    text-decoration-style: wavy
-    text-decoration-line: underline
-    text-decoration-color: $color-mac-red
-  psw
-    color: transparent
-    background: mix($color-text, $color-card, 50)
-    border-radius: 2px
-    trans()
-    &:hover
-      color: var(--color-p)
-      background: none
-  kbd
-    border-radius: 4px
-    border: 1px solid mix($color-block, $color-text, 80)
-    border-bottom-width: 2px
-    background: mix($color-block, $color-card, 50)
-    padding-left: 4px
-    padding-right: 4px
   p
     margin-top: $gap-p
     margin-bottom: $gap-p
@@ -300,7 +273,7 @@
       border-radius: 2px
     .body .vlts-rps
       display: flex
-      overflow: scroll
+      // overflow: scroll
       .item
         &+.item
           margin-left: $gap

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)