hexo-theme-fluid 1.8.13 → 1.9.1

package/source/css/_pages/_category/{categories.styl → category-list.styl}

@@ -3,24 +3,25 @@
   &:not(:last-child)
     margin-bottom 1rem
 
-  &-sub
+  .category-sub
     pass
 
-  &-item
-    font-size 1.25rem
+  .category-item, .category-subitem
     font-weight bold
     display flex
     align-items center
 
-  &-subitem
-    font-size 1rem
-    font-weight bold
+  .category-item
+    font-size 1.25rem
 
-  &-collapse
-    margin-left: 1.25rem
+  .category-subitem
+    font-size 1.1rem
+
+  .category-collapse
+    padding-left: 1.25rem
     width 100%
 
-  &-count
+  .category-count
     font-size .9rem
     font-weight initial
     min-width 1.3em
@@ -34,7 +35,12 @@
     span
       width 2rem
 
-  &-item-action
+  .category-post
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+
+  .category-item-action
 
     &:not(.collapsed) > i
       transform rotate(90deg)
@@ -45,7 +51,7 @@
       display inline-block
       margin-left .25rem
 
-    &:hover
+    .category:hover
       z-index 1
       color var(--link-hover-color)
       text-decoration none

package/source/css/_pages/_index/index.styl

@@ -41,21 +41,23 @@
 
 .index-excerpt
   color var(--sec-text-color)
-
   margin 0.5rem 0 0.5rem 0
-  max-height calc(1.4rem * 3)
-  line-height 1.4rem
+  height calc(1.4rem * 3)
   overflow hidden
+  display flex
 
   & > div
-    float right
-    margin-left -0.25rem
     width 100%
+    line-height 1.4rem
     word-break break-word
     display -webkit-box
     -webkit-box-orient vertical
     -webkit-line-clamp 3
 
+.index-excerpt__noimg
+  height auto
+  max-height calc(1.4rem * 3)
+
 @media (max-width: 767px)
   .index-info
     padding-top 1.25rem

package/source/css/_pages/_links/links.styl

@@ -43,12 +43,13 @@
   flex 1
   display grid
   flex-direction column
+  line-height 1.5
 
 .link-title
   overflow hidden
   text-overflow ellipsis
   white-space nowrap
-  color $text_color
+  color var(--text-color)
   font-weight bold
 
 .link-intro

package/source/css/_pages/_post/comment.styl

@@ -0,0 +1,27 @@
+// Rewrite valine
+#valine.v[data-class=v]
+  .status-bar, .veditor, .vinput, .vbtn, p, pre code
+    color var(--text-color)
+
+  .vinput::placeholder
+    color var(--sec-text-color)
+
+  .vicon
+    fill var(--text-color)
+
+// Rewrite gitalk
+.gt-container
+
+  .gt-comment-content:hover
+    -webkit-box-shadow none
+    box-shadow none
+
+  .gt-comment-body
+    color var(--text-color) !important
+    transition color .2s ease-in-out
+
+// Rewrite remark42
+#remark-km423lmfdslkm34-back
+  z-index 1030
+#remark-km423lmfdslkm34-node
+  z-index 1031

package/source/css/_pages/_post/highlight.styl

@@ -0,0 +1,65 @@
+.markdown-body
+  .highlight pre, pre
+    padding 1.45rem 1rem
+
+  pre code.hljs
+    padding 0
+
+  pre[class*="language-"]
+    padding-top 1.45rem
+    padding-bottom 1.45rem
+    padding-right 1rem
+    line-height 1.5
+
+  .code-wrapper
+    position relative
+    border-radius 4px
+
+  .hljs, .highlight pre, .code-wrapper pre, figure.highlight td.gutter
+    transition color .2s ease-in-out, background-color .2s ease-in-out
+    background-color var(--highlight-bg-color)
+
+pre[class*=language-].line-numbers
+  position initial
+
+figure
+  margin 1rem 0
+
+figure.highlight
+  position relative
+
+  table
+    border 0
+    margin 0
+    width auto
+    border-radius 4px
+
+  td
+    border 0
+    padding 0
+
+  tr
+    border 0
+
+  td.code
+    width 100%
+
+  td.gutter
+    display table-cell
+    position -webkit-sticky
+    position sticky
+    left 0
+    z-index 1
+
+    pre
+      text-align right
+      padding 0 .75rem
+      border-radius initial
+      border-right 1px solid #999
+
+      span.line
+        color #999
+
+  td.code > pre
+    border-top-left-radius 0
+    border-bottom-left-radius 0

package/source/css/_pages/_post/markdown.styl

@@ -0,0 +1,91 @@
+// Rewrite github-markdown.css
+.markdown-body
+  font-size 1rem
+  line-height 1.6
+  font-family $font-family
+  margin-bottom 2rem
+  color var(--post-text-color)
+
+  h1, h2
+    border-bottom-color var(--line-color)
+
+  h1, h2, h3, h4, h5, h6
+    color var(--post-heading-color)
+    transition color .2s ease-in-out, border-bottom-color 0.2s ease-in-out
+    font-weight bold
+    margin-bottom .75em
+    margin-top 2em
+
+    &:focus
+      outline none
+
+  a
+    color var(--post-link-color)
+
+  strong
+    font-weight bold
+
+  code
+    tab-size 4
+    background-color var(--inlinecode-bg-color)
+    transition background-color .2s ease-in-out
+
+  table
+    tr
+      background-color var(--board-bg-color)
+      transition background-color .2s ease-in-out
+    tr:nth-child(2n)
+      background-color var(--board-bg-color)
+      transition background-color .2s ease-in-out
+    th, td
+      border-color var(--line-color)
+      transition border-color .2s ease-in-out
+
+  pre
+    font-size $code-font-size !important
+
+    .mermaid
+      text-align center
+
+      & > svg
+        min-width 100%
+
+  p > img, p > a > img, figure > img, figure > a > img
+    max-width 90%
+    margin 1.5rem auto
+    display block
+    box-shadow $img-shadow
+    border-radius 4px
+    background-color transparent
+
+  blockquote
+    color var(--sec-text-color)
+
+  details
+    cursor pointer
+
+    summary
+      outline none
+
+// Rewrite hr
+hr, .markdown-body hr
+  background-color initial
+  border-top 1px solid var(--line-color)
+  transition border-top-color .2s ease-in-out
+
+.markdown-body hr
+  height 0
+  margin 2rem 0
+
+// Rewrite figcaption
+.markdown-body
+  figcaption.image-caption
+    font-size .8rem
+    color var(--post-text-color)
+    opacity 0.65
+    line-height 1
+    margin -0.75rem auto 2rem
+    text-align center
+
+  figcaption:not(.image-caption)
+    display none

package/source/css/_pages/_post/{post.styl → post-page.styl}

@@ -13,6 +13,9 @@
     padding-left 1rem
     padding-right 1rem
 
+  .anchorjs-link-left
+    opacity 0 !important
+
 .post-content
     h1, h2, h3, h4, h5, h6
       anchor-offset()
@@ -28,25 +31,27 @@
     object-fit cover
     max-width 100%
 
+@media (max-width: 767px)
+  .page-content, .post-content
+    overflow-x hidden
+
 .post-metas
   display flex
-  flex-direction row
   flex-wrap wrap
+  font-size .9rem
 
 .post-meta
-  & > i
-    margin-right .15rem
 
-  & > a:not(.hover-with-bg)
-    margin-right .15rem
+  & > *:not(.hover-with-bg)
+    margin-right .2rem
 
 .post-prevnext
-  margin-top 2rem
   display flex
   flex-wrap wrap
   justify-content space-between
-  margin-left -0.5rem
-  margin-right -0.5rem
+  font-size .9rem
+  margin-left -.35rem
+  margin-right -.35rem
 
   .post-prev, .post-next
     display flex
@@ -124,75 +129,10 @@
     -webkit-transform translateX(0)
     transform translateX(0)
 
-// toc
-
-#toc
-  position -webkit-sticky
-  position sticky
-  top 2rem
-  padding 3rem 0 0 0
-  visibility hidden
-
-.toc-header
-  margin-bottom .5rem
-  font-weight 500
-  line-height 1.2
-
-  &, & > i
-    font-size 1.25rem
-
-.toc-body
-  max-height 75vh
-  overflow-y auto
-  overflow -moz-scrollbars-none
-  -ms-overflow-style none
-
-  ol
-    list-style none
-    padding-inline-start 1rem
-
-  &::-webkit-scrollbar
-    display none
-
-.tocbot-list
-  ol
-    list-style none
-    padding-left 1rem
-
-  a
-    font-size 0.95rem
-
-.tocbot-link
-  color var(--text-color)
-
-.tocbot-active-link
-  font-weight bold
-  color var(--link-hover-color)
-
-.tocbot-is-collapsed
-  max-height 0
-
-.tocbot-is-collapsible
-  overflow hidden
-  transition all .3s ease-in-out
-
-@media (max-width: 1024px)
-  .toc-container
-    padding-left 0
-    padding-right 0
-
-.markdown-body .image-caption
-  font-size .8rem
-  color var(--post-text-color)
-  opacity 0.65
-  line-height 1
-  margin -0.75rem auto 2rem
-  text-align center
-
-.custom, .comments
+.custom, #comments
   margin-top 2rem
 
-.comments
+#comments
   noscript
     display block
     text-align center
@@ -202,3 +142,32 @@
   font-size .8em
   padding .45rem
   float right
+
+a.fancybox:hover
+  text-decoration none
+
+// Rewrite mathjax
+mjx-container, .mjx-container
+  overflow-x auto
+  overflow-y hidden !important
+  padding .5em 0
+
+  &:focus, svg:focus
+    outline none
+
+.mjx-char
+  line-height 1
+
+// Rewrite katex
+.katex-block
+  overflow-x auto
+
+.katex, .mjx-mrow
+  white-space pre-wrap !important
+
+// Rewrite hint
+.footnote-ref [class*=hint--][aria-label]:after
+  max-width 12rem
+  white-space nowrap
+  overflow hidden
+  text-overflow ellipsis

package/source/css/_pages/_post/{tag_plugin.styl → post-tag.styl}

@@ -4,41 +4,43 @@
   border-left 0.35rem solid
   border-radius 0.25rem
   margin 1.5rem 0
-  color $text-color
+  color var(--text-color)
+  transition color .2s ease-in-out
   font-size 0.9rem
 
   a
-    color $text-color
+    color var(--text-color)
+    transition color .2s ease-in-out
 
   *:last-child
     margin-bottom 0
 
 .note-primary
-  background-color #f5f0fa
+  background-color rgba(#b7a0e0, 0.25)
   border-color #6f42c1
 
 .note-secondary, note-default
-  background-color #f7f7f7
+  background-color rgba(#bbbbbb, 0.25)
   border-color #777
 
 .note-success
-  background-color #eff8f0
+  background-color rgba(#aedcae, 0.25)
   border-color #5cb85c
 
 .note-danger
-  background-color #fcf1f2
+  background-color rgba(#eca9a7, 0.25)
   border-color #d9534f
 
 .note-warning
-  background-color #fdf8ea
+  background-color rgba(#f8d6a6, 0.25)
   border-color #f0ad4e
 
 .note-info
-  background-color #eef7fa
+  background-color rgba(#a0c5e4, 0.25)
   border-color #428bca
 
 .note-light
-  background-color #fefefe
+  background-color rgba(#fefefe, 0.25)
   border-color #0f0f0f
 
 // label
@@ -48,47 +50,42 @@
   font-size 85%
   margin 0
   padding .2em .4em
-  color $text-color
+  color var(--text-color)
+  transition color .2s ease-in-out
 
 .label-default
-  background #f7f7f7
+  background rgba(#bbbbbb, 0.25)
 
 .label-primary
-  background #f5f0fa
+  background rgba(#b7a0e0, 0.25)
 
 .label-info
-  background #eef7fa
+  background rgba(#a0c5e4, 0.25)
 
 .label-success
-  background #eff8f0
+  background rgba(#aedcae, 0.25)
 
 .label-warning
-  background #fdf8ea
+  background rgba(#f8d6a6, 0.25)
 
 .label-danger
-  background #fcf1f2
+  background rgba(#eca9a7, 0.25)
 
 // button
 .markdown-body .btn
-  background #2F4154
+  border 1px solid var(--line-color)
+  background-color var(--button-bg-color)
+  color var(--text-color)
+  transition color .2s ease-in-out, background .2s ease-in-out, border-color .2s ease-in-out
   border-radius .25rem
-  color #fff !important
   display inline-block
   font-size .875em
   line-height 2
   padding 0 .75rem
-  text-decoration none
-  transition-property background
-  transition-delay 0s
-  transition-duration 0.2s
-  transition-timing-function ease-in-out
-  -webkit-box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
-  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
   margin-bottom 1rem
 
   &:hover
-    background #23ae92
-    color #fff !important
+    background-color var(--button-hover-bg-color)
     text-decoration none
 
 // group-image
@@ -113,3 +110,8 @@
 
   &:not(:last-child)
     margin-right .25rem
+
+// checkbox
+input[type=checkbox]
+  margin 0 0.2em 0.2em 0
+  vertical-align middle

package/source/css/_variables/base.styl

@@ -1,20 +1,20 @@
-// Font
+// font
 $font-size = theme-config("font.font_size", "16px")
 $letter-spacing = theme-config("font.letter_spacing", "0.02em")
-$font-family = theme-config("font.font_family", 'var(--font-family-sans-serif)')
+$font-family = theme-config("font.font_family", "var(--font-family-sans-serif)")
 $code-font-size = theme-config("font.code_font_size", "85%")
 
-// Colors
-
 // body
 $body-bg-color = theme-config("color.body_bg_color", "#eee")
 $body-bg-color-dark = theme-config("color.body_bg_color_dark", "#181c27")
 
-// global
+// text
 $text-color = theme-config("color.text_color", "#3c4858")
 $text-color-dark = theme-config("color.text_color_dark", "#c4c6c9")
 $sec-text-color = theme-config("color.sec_text_color", "#718096")
 $sec-text-color-dark = theme-config("color.sec_text_color_dark", "#a7a9ad")
+
+// post
 $post-text-color = theme-config("color.post_text_color", "#2c3e50")
 $post-text-color-dark = theme-config("color.post_text_color_dark", "#c4c6c9")
 $post-heading-color = theme-config("color.post_heading_color", "#1a202c")
@@ -25,7 +25,12 @@ $link-hover-color = theme-config("color.link_hover_color", "#30a9de")
 $link-hover-color-dark = theme-config("color.link_hover_color_dark", "#30a9de")
 $link-hover-bg-color = theme-config("color.link_hover_bg_color", "#ebedef")
 $link-hover-bg-color-dark = theme-config("color.link_hover_bg_color_dark", "#364151")
-$line-color-dark = #435266
+$line-color = theme-config("color.line_color", "#eaecef")
+$line-color-dark = theme-config("color.line_color_dark", "#435266")
+$button-bg-color = theme-config("color.button_bg_color", "#f6f8fa")
+$button-bg-color-dark = theme-config("color.button_bg_color_dark", "#2f4154")
+$button-hover-bg-color = theme-config("color.button_hover_bg_color", "#f2f3f5")
+$button-hover-bg-color-dark = theme-config("color.button_hover_bg_color_dark", "#46647e")
 
 // navbar
 $navbar-bg-color = theme-config("color.navbar_bg_color", "#2f4154")
@@ -37,14 +42,30 @@ $navbar-glass-px = theme-config-unit("navbar.ground_glass.px", 0, "px")
 $navbar-glass-alpha = theme-config-origin("navbar.ground_glass.alpha", 0)
 
 // banner
-$banner-width-height-ratio = theme-config-origin("banner.width_height_ratio", 1)
+$banner-width-height-ratio = theme-config-origin("banner.width_height_ratio", 0)
+
+// subtitle
+$subtitle-color = theme-config("color.subtitle_color", "#fff")
+$subtitle-color-dark = theme-config("color.subtitle_color_dark", "d0d0d0")
 
 // scroll arrow
-$scroll-arrow-height-limit = theme-config-origin("scroll_down_arrow.banner_height_limit", 80)
+$scroll-arrow-height-limit = theme-config-origin("scroll_down_arrow.banner_height_limit", 0)
 
 // board
 $board-bg-color = theme-config("color.board_color", "#fff")
 $board-bg-color-dark = theme-config("color.board_color_dark", "#252d38")
 
-// Shadow
+// scrollbar
+$scrollbar-color = theme-config("color.scrollbar_color", "#c4c6c9")
+$scrollbar-color-dark = theme-config("color.scrollbar_color_dark", "#687582")
+$scrollbar-hover-color = theme-config("color.scrollbar_hover_color", "#a6a6a6")
+$scrollbar-hover-color-dark = theme-config("color.scrollbar_hover_color_dark", "#9da8b3")
+
+// code
+$highlight-bg-color = hexo-config("code.highlight.highlightjs.light.backgroundColor") && hexo-config("code.highlight.highlightjs.light.backgroundColor") != "white" ? unquote(hexo-config("code.highlight.highlightjs.light.backgroundColor")):#f6f8fa
+$highlight-bg-color-dark = hexo-config("code.highlight.highlightjs.dark.backgroundColor") && hexo-config("code.highlight.highlightjs.dark.backgroundColor") != "white" ? unquote(hexo-config("code.highlight.highlightjs.dark.backgroundColor")):#2d333b
+$inlinecode-bg-color = rgba(175, 184, 193, .2)
+$inlinecode-bg-color-dark = rgba(99, 110, 123, .4)
+
+// shadow
 $img-shadow = 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)

package/source/css/highlight-dark.styl

@@ -0,0 +1,6 @@
+if hexo-config("code.highlight.enable") && hexo-config("dark_mode.enable")
+  if hexo-config("code.highlight.highlightjs.dark.file")
+    @require hexo-config("code.highlight.highlightjs.dark.file")
+
+  if hexo-config("code.highlight.prismjs.dark.file")
+    @require hexo-config("code.highlight.prismjs.dark.file")

package/source/css/highlight.styl

@@ -0,0 +1,6 @@
+if hexo-config("code.highlight.enable")
+  if hexo-config("code.highlight.highlightjs.light.file")
+    @require hexo-config("code.highlight.highlightjs.light.file")
+
+  if hexo-config("code.highlight.prismjs.light.file")
+    @require hexo-config("code.highlight.prismjs.light.file")

package/source/css/main.styl

@@ -4,9 +4,16 @@
 // --------------------------------------
 
 @import "_variables/base"
+for $inject_variable in hexo-config("injects.variable")
+  @import $inject_variable;
 
 @import "_functions/base"
 
 @import "_mixins/base"
+for $inject_mixin in hexo-config("injects.mixin")
+  @import $inject_mixin;
 
 @import "_pages/pages"
+
+for $inject_style in hexo-config("injects.style")
+  @import $inject_style;

package/source/js/boot.js

@@ -1,4 +1,4 @@
-/* global Fluid, CONFIG */
+/* global Fluid */
 
 Fluid.boot = {};
 
@@ -11,14 +11,6 @@ Fluid.boot.registerEvents = function() {
   Fluid.events.registerImageLoadedEvent();
 };
 
-Fluid.boot.initPlugins = function() {
-  CONFIG.anchorjs.enable && Fluid.plugins.initAnchor();
-  CONFIG.toc.enable && Fluid.plugins.initTocBot();
-  CONFIG.image_zoom.enable && Fluid.plugins.initFancyBox();
-  CONFIG.copy_btn && Fluid.plugins.initCopyCode();
-};
-
 document.addEventListener('DOMContentLoaded', function() {
   Fluid.boot.registerEvents();
-  Fluid.boot.initPlugins();
 });