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

package/source/css/_style/_plugins/index.styl

@@ -0,0 +1,24 @@
+@import 'mathjax'
+@import 'fontcolor'
+
+
+if hexo-config('plugins.code_highlight')
+  @import '_highlight'
+if hexo-config('plugins.message.enable')
+  @import 'message'
+if hexo-config('plugins.aplayer.enable')
+  @import 'aplayer'
+if hexo-config('plugins.pjax.enable') and hexo-config('plugins.pjax.animation')
+  @import 'pjaxanimate'
+if hexo-config('comments.service')=='gitalk'
+  @import 'gitalk'
+if hexo-config('custom_css.cursor.enable')
+  @import 'cursor'
+if hexo-config('rightmenu.enable') or hexo-config('rightmenus.enable')
+  @import '_rightmenu/*'
+
+
+
+// 暗黑模式样式放到最后加载
+if hexo-config('plugins.darkmode.enable')
+  @import '_dark/dark_async'

package/source/css/_style/_plugins/message.styl

@@ -0,0 +1,14 @@
+// 覆盖消息提示的样式
+//.iziToast-wrapper
+//  z-index: 2147483647 !important
+.iziToast-texts
+  max-width: 300px !important
+  min-width: 200px !important
+  @media screen and (max-width: 500px)
+    max-width: unset !important
+    min-width: unset !important
+.iziToast-title
+  margin-bottom: 6px !important
+  font-size: 1rem !important
+.iziToast-message
+  word-break: break-all !important

package/source/css/_style/_tag-plugins/Readme.md

@@ -0,0 +1,6 @@
+这里存放 tag 标签 的样式
+
+为便于管理样式, 文件名使用 tag 名称命名
+
+tag.json 索引 tag 标签名称和使用的样式文件的对应关系
+

package/source/css/{_plugins → _style/_tag-plugins}/fancybox.styl

@@ -39,22 +39,22 @@ div.gallery
     flex-wrap: nowrap
     padding: 0 !important
     align-items: stretch
-  &[col]>p
+  &[col]
     flex-wrap: wrap
     justify-content: flex-start
-  &[col='2']>p>.fancybox
+  &[col='2']>.fancybox
     width: "calc(50% - 2 * %s)" % $sp
-  &[col='3']>p>.fancybox
+  &[col='3']>.fancybox
     width: "calc(33.33% - 2 * %s)" % $sp
-  &[col='4']>p>.fancybox
+  &[col='4']>.fancybox
     width: "calc(25% - 2 * %s)" % $sp
-  &[col='5']>p>.fancybox
+  &[col='5']>.fancybox
     width: "calc(20% - 2 * %s)" % $sp
-  &[col='6']>p>.fancybox
+  &[col='6']>.fancybox
     width: "calc(16.66% - 2 * %s)" % $sp
-  &[col='7']>p>.fancybox
+  &[col='7']>.fancybox
     width: "calc(14.2857% - 2 * %s)" % $sp
-  &[col='8']>p>.fancybox
+  &[col='8']>.fancybox
     width: "calc(12.5% - 2 * %s)" % $sp
   >p
     margin: 0
@@ -89,7 +89,6 @@ div.fancybox
     line-height: 0
     margin: 0 auto
     align-items: stretch
-    cursor: zoom-in
   .gallery
     overflow: hidden
   .image-caption

package/source/css/_style/_tag-plugins/friends.styl

@@ -0,0 +1,72 @@
+.users-wrap
+  overflow: hidden
+  .group-header
+    margin: 0 0 1rem
+    p
+      margin: 0
+      font-size: $fs-14
+      &:first-child
+        font-size: 1.25rem
+        font-weight: 500
+  .group-body
+    width: 100%
+    display: flex
+    flex-wrap: wrap
+    align-items: stretch
+    margin-bottom: 2rem
+  .friendsjs-wrap
+    display: block
+    .loading-wrap
+      min-height: 50px
+      margin: 2rem 0
+      text-align: center
+
+.users-wrap .user-card
+  flex-shrink: 1
+  display: flex
+  align-items: stretch
+  width: 12.5%
+  @media screen and (max-width: 980px)
+    width: 14.28%
+  @media screen and (max-width: 900px)
+    width: 16.66%
+  @media screen and (max-width: 820px)
+    width: 20%
+  @media screen and (max-width: $device-tablet)
+    width: 16.66%
+  @media screen and (max-width: $device-mobile)
+    width: 25%
+  .card-link
+    margin: 0
+    width: 100%
+    color: var(--text-p1)
+    font-size: 10px
+    font-weight: 500
+    display: flex
+    justify-content: flex-start
+    flex-direction: column
+    align-items: center
+    text-align: center
+    line-height: 1.2
+    border-radius: 4px
+    overflow: hidden
+    position: relative
+    padding: 1rem 0.5rem
+    img
+      object-fit: cover
+      display: block
+      width: 48px
+      height: 48px
+      background: var(--card)
+      border-radius: 64px
+      margin: 0 0 0.5rem
+
+// transform
+.users-wrap .user-card .card-link
+  >img
+    trans2 transform box-shadow
+  &:hover
+    background: var(--block-hover)
+    img
+      transform: scale(1.2) rotate(8deg)
+      box-shadow: $boxshadow-card-float

package/source/css/_style/_tag-plugins/sites.styl

@@ -0,0 +1,87 @@
+.sites-wrap
+  .group-header
+    margin: 0 0 1rem
+    p
+      margin: 0
+      font-size: $fs-14
+      &:first-child
+        font-size: 1.25rem
+        font-weight: 500
+  .group-body
+    width: 100%
+    margin-bottom: 2rem
+  .sitesjs-wrap
+    display: block
+    .loading-wrap
+      min-height: 50px
+      margin: 2rem 0
+      text-align: center
+
+.sites-wrap .group-body
+  display: grid
+  grid-gap: 1rem 1rem
+  grid-template-columns: repeat(auto-fill, "calc((100% - 3 * %s) / 4)" % 1rem)
+  @media screen and (max-width: $device-laptop)
+    grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
+  @media screen and (max-width: 900px)
+    grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
+  @media screen and (max-width: $device-tablet)
+    grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 1rem)
+  @media screen and (max-width: $device-mobile)
+    grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 1rem)
+  margin-bottom: 2rem
+
+.sites-wrap .group-body .site-card .card-link
+  width: 100%
+  display: flex
+  flex-direction: column
+  >img
+    width: 100%
+    height 120px
+    border-radius: 4px
+    @media screen and (max-width: $device-laptop)
+      height: 150px
+    @media screen and (max-width: 900px)
+      height: 180px
+    @media screen and (max-width: $device-tablet)
+      height: 150px
+    object-fit: cover
+    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
+  .info
+    margin-top: 0.5rem
+    line-height: 1.2
+    >img
+      width: 28px
+      height: @width
+      border-radius: @width
+      float: left
+      margin-right: 8px
+      margin-top: 2px
+    span
+      display: block
+    .title
+      font-weight: 500
+      color: var(--text-p1)
+      font-size: $fs-14
+      margin-top: 1px
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 1
+    .desc
+      font-size: 10px
+      margin-top: 2px
+      word-wrap: break-word
+      color: var(--text-p3)
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 2
+
+// transform
+.sites-wrap .site-card .card-link
+  >img
+    trans()
+  &:hover
+    >img
+      box-shadow: $boxshadow-float, $boxshadow-card-float

package/source/css/_style/_tag-plugins/swiper.styl

@@ -0,0 +1,44 @@
+.swiper-container
+  width: 100%
+  border-radius: 4px
+  --gap-p: 2rem
+.swiper-container:not(.swiper-container-initialized)
+  display: none
+div.swiper-slide
+  text-align: center
+  display: -webkit-box
+  display: -ms-flexbox
+  display: -webkit-flex
+  display: flex
+  align-self: center
+  -webkit-box-pack: center
+  -ms-flex-pack: center
+  -webkit-justify-content: center
+  justify-content: center
+  -webkit-box-align: center
+  -ms-flex-align: center
+  -webkit-align-items: center
+  align-items: center
+  width: 50%
+  img
+    border-radius: 4px
+
+.swiper-container[width='max'] div.swiper-slide
+  width: 100%
+
+.swiper-container[width='min'] div.swiper-slide
+  width: 25%
+
+.swiper-button-prev,.swiper-button-next
+  padding: 1rem 0.5rem
+  margin-top: -2rem !important
+  border-radius: 4px
+  background: alpha(white, 0.25)
+  trans1 background
+  --swiper-theme-color: black !important
+  &:after
+    font-size: 1.2rem !important
+    font-weight: 700 !important
+  &:hover
+    background: white !important
+    --swiper-theme-color: $color-hover !important

package/source/css/_style/_tag-plugins/tag.json

@@ -0,0 +1,35 @@
+{
+  "note": ["note.styl"],
+  "tabs": ["tabs.styl"],
+  "u": ["text.styl"],
+  "emp": ["text.styl"],
+  "wavy": ["text.styl"],
+  "del": ["text.styl"],
+  "kbd": ["text.styl"],
+  "psw": ["text.styl"],
+  "span": ["span.styl"],
+  "p": ["span.styl"],
+  "noteblock": ["note.styl"],
+  "folding": ["folding.styl"],
+  "checkbox": ["checkbox.styl"],
+  "radio": ["checkbox.styl"],
+  "timeline": ["timeline.styl"],
+  "timenode": ["timeline.styl"],
+  "link": ["link.styl"],
+  "btn": ["btns.styl"],
+  "btns": ["btns.styl"],
+  "table": ["table.styl"],
+  "ghcard": ["ghcard.styl"],
+  "sites": ["sites.styl"],
+  "menu": ["dropmenu.styl"],
+  "inlineimage": ["image.styl"],
+  "image": ["image.styl"],
+  "gallery": ["fancybox.styl"],
+  "audio": ["media.styl"],
+  "video": ["media.styl"],
+  "videos": ["media.styl"],
+  "frame": ["frame.styl"],
+  "contributors": ["friends.styl"],
+  "friends": ["friends.styl"],
+  "swiper": ["swiper.styl"]
+}

package/source/css/_style/_tag-plugins/text.styl

@@ -0,0 +1,31 @@
+.article
+  del
+    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

package/source/css/_style/index.styl

@@ -0,0 +1,8 @@
+@import '_base/*'
+
+@import '_layout/*'
+
+@import '_tag-plugins/*'
+
+// 暗黑模式样式放到最后加载
+@import '_plugins/index'

package/source/css/first.styl

@@ -1,12 +1,23 @@
-// 本文件样式最佳方案是内联写在HTML中 暂未找到内联自动化方案
-// https://blog.skk.moe/post/improve-fcp-for-my-blog/
-#safearea{
+#safearea {
   display: none
 }
+// https://web.dev/content-visibility/
+// https://www.caniuse.com/?search=content-visibility
+/*
+  * Workaround for Chrome bug, part 1
+  * Chunk rendering for all but the first article.
+  * /layout/_partial/scripts/content-visibility-scroll-fix.ejs
+*/
+.post-story + .post-story{
+  content-visibility: auto;
+  contain-intrinsic-size: 10px 500px;
+}
+
 @import '_defines/*'
 
 // Project
-@import '_base'
 @import '_first/*'
-if hexo-config('plugins.darkmodejs.enable')
-  @import '_plugins/darkmode'
+
+// Custom Files
+for $injects_first in hexo-config('injects.first')
+  @import $injects_first;

package/source/css/style.styl

@@ -1,11 +1,13 @@
+#safearea{
+  display: block
+}
+
 @import '_defines/*'
 
 // Project
-@import '_tag-plugins/*'
-@import '_highlight'
-@import '_plugins/index'
-@import '_layout/*'
+@import '_style'
+
+// Custom Files
+for $injects_style in hexo-config('injects.style')
+  @import $injects_style;
 
-#safearea{
-  display: block
-}