更新

themes/butterfly/source/css/_global/function.styl

@@ -0,0 +1,199 @@
+.limit-one-line
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+.limit-more-line
+  display: -webkit-box
+  overflow: hidden
+  -webkit-box-orient: vertical
+
+.fontawesomeIcon
+  display: inline-block
+  font-weight: 600
+  font-style: normal
+  font-variant: normal
+  font-family: 'Font Awesome 5 Free'
+  text-rendering: auto
+  -webkit-font-smoothing: antialiased
+
+maxWidth600()
+  @media screen and (max-width: 600px)
+    {block}
+
+maxWidth768()
+  @media screen and (max-width: 768px)
+    {block}
+
+minWidth768()
+  @media screen and (min-width: 768px)
+    {block}
+
+maxWidth1024()
+  @media screen and (max-width: 1024px)
+    {block}
+
+maxWidth900()
+  @media screen and (max-width: 900px)
+    {block}
+
+minWidth900()
+  @media screen and (min-width: 900px)
+    {block}
+
+minWidth2000()
+  @media screen and (min-width: 2000px)
+    {block}
+
+// animation
+if hexo-config('enter_transitions')
+  #content-inner,
+  #footer
+    animation: main 1s
+
+  #page-header
+    animation: header-effect 1s
+
+  #site-title,
+  #site-subtitle
+    animation: titlescale 1s
+
+  #nav.show
+    animation: headerNoOpacity 1s
+
+  canvas:not(#ribbon-canvas),
+  #web_bg
+    animation: to_show 4s
+
+  #ribbon-canvas
+    animation: ribbon_to_show 4s
+
+  #sidebar-menus
+    &.open
+      for i in 1 2 3 4
+        > :nth-child({i})
+          animation: sidebarItem (i / 5)s
+
+.card-announcement-animation
+  color: #FF0000
+  animation: announ_animation .8s linear infinite
+
+.scroll-down-effects
+  animation: scroll-down-effect 1.5s infinite
+
+if hexo-config('avatar.effect') == true
+  .avatar-img
+    animation: avatar_turn_around 2s linear infinite
+
+.reward-main
+  animation: donate_effcet .3s .1s ease both
+
+@keyframes scroll-down-effect
+  0%
+    top: 0
+    opacity: .4
+
+  50%
+    top: -16px
+    opacity: 1
+
+  100%
+    top: 0
+    opacity: .4
+
+@keyframes header-effect
+  0%
+    opacity: 0
+    transform: translateY(-50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes headerNoOpacity
+  0%
+    transform: translateY(-50px)
+
+  100%
+    transform: translateY(0)
+
+@keyframes main
+  0%
+    opacity: 0
+    transform: translateY(50px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes titlescale
+  0%
+    opacity: 0
+    transform: scale(.7)
+
+  100%
+    opacity: 1
+    transform: scale(1)
+
+@keyframes search_close
+  0%
+    opacity: 1
+    transform: scale(1)
+
+  100%
+    opacity: 0
+    transform: scale(.7)
+
+@keyframes to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+@keyframes ribbon_to_show
+  0%
+    opacity: 0
+
+  100%
+    opacity: hexo-config('canvas_ribbon.alpha')
+
+@keyframes avatar_turn_around
+  from
+    transform: rotate(0)
+
+  to
+    transform: rotate(360deg)
+
+@keyframes sub_menus
+  0%
+    opacity: 0
+    transform: translateY(10px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes donate_effcet
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes announ_animation
+  0%,
+  to
+    transform: scale(1)
+
+  50%
+    transform: scale(1.2)
+
+@keyframes sidebarItem
+  0%
+    transform: translateX(200px)
+
+  100%
+    transform: translateX(0)

themes/butterfly/source/css/_global/index.styl

@@ -0,0 +1,217 @@
+[data-theme='light']
+  --global-bg: $body-bg
+  --font-color: $font-black
+  --hr-border: lighten($theme-hr-color, 50%)
+  --hr-before-color: lighten($theme-hr-color, 30%)
+  --search-bg: $search-bg
+  --search-input-color: $search-input-color
+  --search-result-title: $search-result-title
+  --preloader-bg: $preloader-bg
+  --preloader-color: $preloader-word-color
+  --tab-border-color: $tab-border-color
+  --tab-botton-bg: $tab-botton-bg
+  --tab-botton-color: $tab-botton-color
+  --tab-button-hover-bg: $tab-button-hover-bg
+  --tab-button-active-bg: $tab-button-active-bg
+  --card-bg: $card-bg
+  --sidebar-bg: $sidebar-background
+  --btn-hover-color: $button-hover-color
+  --btn-color: $button-color
+  --btn-bg: $button-bg
+  --text-bg-hover: $text-bg-hover
+  --light-grey: $light-grey
+  --white: $white
+  --text-highlight-color: $text-highlight-color
+  --blockquote-color: $blockquote-color
+  --blockquote-bg: $blockquote-background-color
+  --reward-pop: $reward-pop-up-bg
+  --toc-link-color: $toc-link-color
+
+html
+  height: 100%
+  font-size: 20px
+
+body
+  position: relative
+  min-height: 100%
+  background: var(--global-bg)
+  color: var(--font-color)
+  font-size: $font-size
+  font-family: $font-family
+  line-height: $text-line-height
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+
+  if !hexo-config('copy.enable')
+    user-select: none
+
+*::-webkit-scrollbar
+  width: 8px
+  height: 8px
+
+*::-webkit-scrollbar-thumb
+  background: var(--btn-bg)
+
+*::-webkit-scrollbar-track
+  background-color: transparent
+
+input::placeholder
+  color: var(--font-color)
+
+#web_bg
+  position: fixed
+  z-index: -999
+  width: 100%
+  height: 100%
+  background: $web-bg
+  background-attachment: local
+  background-position: center
+  background-size: cover
+  background-repeat: no-repeat
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  position: relative
+  margin: 1rem 0 .7rem
+  color: var(--text-highlight-color)
+  font-weight: bold
+
+  code
+    font-size: inherit !important
+
+*
+  box-sizing: border-box
+
+hr
+  position: relative
+  margin: 2rem auto
+  border: 2px dashed var(--hr-border)
+
+  if hexo-config('hr_icon.enable')
+    width: calc(100% - 4px)
+
+    &:hover
+      &:before
+        left: calc(95% - 20px)
+
+    &:before
+      position: absolute
+      top: $hr-icon-top
+      left: 5%
+      z-index: 1
+      color: var(--hr-before-color)
+      content: $hr-icon
+      font-size: 20px
+      line-height: 1
+      transition: all 1s ease-in-out
+      @extend .fontawesomeIcon
+
+.table-wrap
+  overflow-x: scroll
+  margin: 0 0 1rem
+
+table
+  display: table
+  width: 100%
+  border-spacing: 0
+  border-collapse: collapse
+  empty-cells: show
+
+  thead
+    background: alpha($table-thead-bg, 10%)
+
+  th,
+  td
+    padding: .3rem .6rem
+    border: 1px solid var(--light-grey)
+    vertical-align: middle
+
+*::selection
+  background: $theme-text-selection-color
+  color: #F7F7F7
+
+button
+  padding: 0
+  outline: 0
+  border: none
+  background: none
+  cursor: pointer
+
+a
+  color: $a-link-color
+  text-decoration: none
+  word-wrap: break-word
+  transition: all .2s
+  overflow-wrap: break-word
+
+  &:hover
+    color: $light-blue
+
+// font
+if $site-name-font
+  #site-title,
+  #site-subtitle,
+  #site-name,
+  #aside_content .author-info__name,
+  #aside_content .author-info__description
+    font-family: $site-name-font
+
+.is-center
+  text-align: center
+
+.copy-true
+  user-select: all
+
+.pull-left
+  float: left
+
+.pull-right
+  float: right
+
+.button--animated
+  position: relative
+  z-index: 1
+  transition: color 1s
+
+  &:before
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: -1
+    background: var(--btn-hover-color)
+    content: ''
+    transition: transform .5s ease-out
+    transform: scaleX(0)
+    transform-origin: 0 50%
+
+  &:hover
+    &:before
+      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
+      transform: scaleX(1)
+
+img
+  max-width: 100%
+  transition: all .2s
+
+img[src=''],
+img:not([src])
+  opacity: 0
+
+.img-alt
+  margin: -.5rem 0 .5rem
+  color: #858585
+
+  &:hover
+    text-decoration: none !important
+
+.post-ad
+  margin: 2rem 0
+
+.ad-height
+  display: block !important
+  height: auto !important

themes/butterfly/source/css/_highlight/highlight.styl

@@ -0,0 +1,186 @@
+// https://github.com/equinusocio/vsc-material-theme
+$highlight_theme = hexo-config('highlight_theme')
+$highlighEnable = hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
+$prismjsEnable = hexo-config('prismjs_settings') && hexo-config('prismjs_settings.enable')
+wordWrap = !hexo-config('highlight_settings.line_number') && hexo-config('code_word_wrap')
+
+@require 'theme'
+
+if $highlighEnable
+  @require 'highlight/index'
+
+if $prismjsEnable
+  @require 'prismjs/index'
+
+$code-block
+  overflow: auto
+  margin: 0 0 1rem
+  padding: 0
+  background: $highlight-background
+  color: $highlight-foreground
+  line-height: $line-height-code-block
+
+  if wordWrap
+    counter-reset: line
+    white-space: pre-wrap
+
+blockquote
+  margin: 0 0 1rem
+  padding: .1rem .8rem
+  border-left: .2rem solid $blockquote-padding-color
+  background-color: var(--blockquote-bg)
+  color: var(--blockquote-color)
+
+  a
+    word-break: break-all
+
+  p
+    margin: 0 !important
+    padding: .5rem 0
+
+  footer
+    padding: 0 0 .5rem
+
+    cite
+      &:before
+        padding: 0 .3em
+        content: '—'
+
+#article-container
+  pre,
+  code
+    font-size: $code-font-size
+    font-family: $code-font-family !important
+
+  code
+    padding: .1rem .2rem
+    background: $code-background
+    color: $code-foreground
+    word-wrap: break-word
+    word-break: break-word
+    overflow-wrap: break-word
+
+  pre
+    @extend $code-block
+    padding: 10px 20px
+
+    code
+      padding: 0
+      background: none
+      color: $highlight-foreground
+      text-shadow: none
+
+  figure.highlight
+    @extend $code-block
+    position: relative
+
+    pre
+      margin: 0
+      padding: 8px 0
+      border: none
+
+    figcaption,
+    .caption
+      padding: .3rem 0 .1rem .7rem
+      font-size: $code-font-size
+      line-height: 1em
+
+      a
+        float: right
+        padding-right: 10px
+        color: $highlight-foreground
+
+        &:hover
+          border-bottom-color: $highlight-foreground
+
+  .highlight-tools
+    position: relative
+    display: flex
+    align-items: center
+    overflow: hidden
+    min-height: 1.2rem
+    height: 2.15em
+    background: $highlight-tools.bg-color
+    color: $highlight-tools.color
+    font-size: $code-font-size
+
+    &.closed + table
+      display: none
+
+    .expand
+      position: absolute
+      padding: .4rem .7rem
+      cursor: pointer
+      transition: transform .3s
+
+      & + .code-lang
+        left: 1.7rem
+
+      &.closed
+        transition: all .3s
+        transform: rotate(-90deg) !important
+
+    .code-lang
+      position: absolute
+      left: .7rem
+      text-transform: uppercase
+      font-weight: bold
+      font-size: 1.15em
+      user-select: none
+
+    .copy-notice
+      position: absolute
+      right: 1.7rem
+      opacity: 0
+
+    .copy-button
+      position: absolute
+      right: .7rem
+      cursor: pointer
+      transition: color .2s
+
+      &:hover
+        color: $theme-color
+
+  .gutter
+    user-select: none
+
+  .gist table
+    width: auto
+
+    td
+      border: none
+
+  if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
+    figure.highlight
+      margin: 0 0 1.2rem
+      border-radius: 7px
+      box-shadow: 0 5px 10px 0 $highlight-mac-border
+      -webkit-transform: translateZ(0)
+
+      .highlight-tools
+        &:after
+          position: absolute
+          left: .7rem
+          width: 12px
+          height: 12px
+          border-radius: 50%
+          background: #fc625d
+          box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
+          content: ' '
+
+        .expand
+          right: 0
+
+          &.closed
+            transition: all .3s
+            transform: rotate(90deg) !important
+
+          & ~ .copy-notice
+            right: 2.8rem
+
+          & ~ .copy-button
+            right: 1.8rem
+
+        .code-lang
+          left: 3.8rem !important

themes/butterfly/source/css/_highlight/highlight/diff.styl

@@ -0,0 +1,77 @@
+figure.highlight
+  table
+    &::-webkit-scrollbar-thumb
+      background: $highlight-scrollbar
+
+  pre .deletion
+    color: $highlight-deletion
+
+  pre .addition
+    color: $highlight-addition
+
+  pre .meta
+    color: $highlight-purple
+
+  pre
+    .comment
+      color: $highlight-comment
+
+    .variable,
+    .attribute,
+    .regexp,
+    .ruby .constant,
+    .xml .tag .title,
+    .xml .pi,
+    .xml .doctype,
+    .html .doctype,
+    .css .id,
+    .tag .name,
+    .css .class,
+    .css .pseudo
+      color: $highlight-red
+
+    .tag
+      color: $highlight-aqua
+
+    .number,
+    .preprocessor,
+    .literal,
+    .params,
+    .constant,
+    .command
+      color: $highlight-orange
+
+    .built_in
+      color: $highlight-yellow
+
+    .ruby .class .title,
+    .css .rules .attribute,
+    .string,
+    .value,
+    .inheritance,
+    .header,
+    .ruby .symbol,
+    .xml .cdata,
+    .special,
+    .number,
+    .formula
+      color: $highlight-green
+
+    .keyword,
+    .title,
+    .css .hexcolor
+      color: $highlight-aqua
+
+    .function,
+    .python .decorator,
+    .python .title,
+    .ruby .function .title,
+    .ruby .title .keyword,
+    .perl .sub,
+    .javascript .title,
+    .coffeescript .title
+      color: $highlight-blue
+
+    .tag .attr,
+    .javascript .function
+      color: $highlight-purple

themes/butterfly/source/css/_highlight/highlight/index.styl

@@ -0,0 +1,39 @@
+if $highlight_theme != false
+  @require 'diff'
+
+#article-container
+  figure.highlight
+    .line
+      if wordWrap
+        &:before
+          display: inline-block
+          padding: 0 .3rem 0 0
+          min-width: 1.6rem
+          color: $highlight-gutter.color
+          content: counter(line)
+          counter-increment: line
+          text-align: left
+
+      &.marked
+        background-color: $highlight-selection
+
+    table
+      display: block
+      overflow: auto
+      border: none
+
+      td
+        padding: 0
+        border: none
+
+    .gutter pre
+      padding-right: .5rem
+      padding-left: .5rem
+      background-color: $highlight-gutter.bg-color
+      color: $highlight-gutter.color
+      text-align: right
+
+    .code pre
+      padding-right: .5rem
+      padding-left: .5rem
+      width: 100%

themes/butterfly/source/css/_highlight/prismjs/diff.styl

@@ -0,0 +1,302 @@
+if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
+  // prism-base16-ateliersulphurpool.light
+  pre[class*='language-']
+    .token.function
+      color: #ffb62c
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: rgba(149, 165, 166, .8)
+
+    .token.punctuation
+      color: #5e6687
+
+    .token.namespace
+      opacity: .7
+
+    .token.operator,
+    .token.boolean,
+    .token.number
+      color: #c76b29
+
+    .token.property
+      color: #c08b30
+
+    .token.tag
+      color: #3d8fd1
+
+    .token.string
+      color: #22a2c9
+
+    .token.selector
+      color: #6679cc
+
+    .token.attr-name
+      color: #c76b29
+
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string
+      color: #22a2c9
+
+    .token.attr-value,
+    .token.keyword,
+    .token.control,
+    .token.directive,
+    .token.unit
+      color: #ac9739
+
+    .token.statement,
+    .token.regex,
+    .token.atrule
+      color: #22a2c9
+
+    .token.placeholder,
+    .token.variable
+      color: #3d8fd1
+
+    .token.deleted
+      text-decoration: line-through
+
+    .token.inserted
+      border-bottom: 1px dotted #202746
+      text-decoration: none
+
+    .token.italic
+      font-style: italic
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.important
+      color: #c94922
+
+    .token.entity
+      cursor: help
+
+    pre > code.highlight
+      outline: .4em solid #c94922
+      outline-offset: .4em
+
+if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+  // prism-atom-dark
+  pre[class*='language-']
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: #7C7C7C
+
+    .token.punctuation
+      color: #c5c8c6
+
+    .namespace
+      opacity: .7
+
+    .token.property,
+    .token.keyword,
+    .token.tag
+      color: #96CBFE
+
+    .token.class-name
+      color: #FFFFB6
+
+    .token.boolean,
+    .token.constant
+      color: #99CC99
+
+    .token.symbol,
+    .token.deleted
+      color: #f92672
+
+    .token.number
+      color: #FF73FD
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted
+      color: #A8FF60
+
+    .token.variable
+      color: #C6C5FE
+
+    .token.operator
+      color: #EDEDED
+
+    .token.entity
+      color: #FFFFB6
+      cursor: help
+
+    .token.url
+      color: #96CBFE
+
+    .language-css .token.string,
+    .style .token.string
+      color: #87C38A
+
+    .token.atrule,
+    .token.attr-value
+      color: #F9EE98
+
+    .token.function
+      color: #DAD085
+
+    .token.regex
+      color: #E9C062
+
+    .token.important
+      color: #fd971f
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.italic
+      font-style: italic
+
+if $highlight_theme == 'pale night'
+  // prism-dracula
+  pre[class*='language-']
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata
+      color: #6272a4
+
+    .token.punctuation
+      color: #f8f8f2
+
+    .namespace
+      opacity: .7
+
+    .token.property,
+    .token.tag,
+    .token.constant,
+    .token.symbol,
+    .token.deleted
+      color: #ff79c6
+
+    .token.boolean,
+    .token.number
+      color: #bd93f9
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted
+      color: #50fa7b
+
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string,
+    .token.variable
+      color: #f8f8f2
+
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name
+      color: #f1fa8c
+
+    .token.keyword
+      color: #8be9fd
+
+    .token.regex,
+    .token.important
+      color: #ffb86c
+
+    .token.important,
+    .token.bold
+      font-weight: bold
+
+    .token.italic
+      font-style: italic
+
+    .token.entity
+      cursor: help
+
+if $highlight_theme == 'ocean'
+  // prism-material-oceanic
+  pre[class*='language-']
+    &.language-css > code,
+    &.language-sass > code,
+    &.language-scss > code
+      color: #fd9170 !important
+
+    .namespace
+      opacity: .7
+
+    .token.atrule,
+    .token.symbol,
+    .token.constant,
+    .token.boolean,
+    .token.function
+      color: #c792ea
+
+    .token.attr-name,
+    .token.builtin,
+    .token.class
+      color: #ffcb6b
+
+    .token.attr-value,
+    .token.attribute,
+    .token.pseudo-class,
+    .token.pseudo-element,
+    .token.string
+      color: #c3e88d
+
+    .token.cdata,
+    .token.property,
+    .token.char,
+    .token.inserted
+      color: #80cbc4
+
+    .token.class-name,
+    .token.color,
+    .token.hexcode,
+    .token.regex
+      color: #f2ff00
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype
+      color: #546e7a
+
+    .token.deleted,
+    .token.variable,
+    .token.entity,
+    .token.selector,
+    .token.tag,
+    .token.unit
+      color: #f07178
+
+    .token.id
+      color: #c792ea
+      font-weight: bold
+
+    .token.important
+      color: #c792ea
+      font-weight: bold
+
+    .token.keyword
+      color: #c792ea
+      font-style: italic
+
+    .token.number,
+    .token.url
+      color: #fd9170
+
+    .token.operator,
+    .token.punctuation
+      color: #89ddff

themes/butterfly/source/css/_highlight/prismjs/index.styl

@@ -0,0 +1,20 @@
+if hexo-fonfig('prismjs_settings.line_number')
+  @require 'line-number'
+
+if $highlight_theme != false
+  @require 'diff'
+
+#article-container
+  pre[class*='language-']
+    &::-webkit-scrollbar-thumb
+      background: $highlight-scrollbar
+
+    &:not(.line-numbers)
+      padding: 10px 20px
+
+    .caption
+      margin-left: -3.8em
+      padding: .2rem .8rem !important
+
+      a
+        padding: 0 !important

themes/butterfly/source/css/_highlight/prismjs/line-number.styl

@@ -0,0 +1,34 @@
+#article-container
+  pre[class*='language-']
+    &.line-numbers
+      position: relative
+      padding-left: 3.8em
+      counter-reset: linenumber
+      line-height: $line-height-code-block
+
+      > code
+        position: relative
+        white-space: inherit
+        line-height: $line-height-code-block
+
+      .line-numbers-rows
+        position: absolute
+        top: 0
+        left: -3.8em
+        width: 3em
+        letter-spacing: -1px
+        font-size: 100%
+        pointer-events: none
+        user-select: none
+
+        & > span
+          display: block
+          counter-increment: linenumber
+          pointer-events: none
+
+          &:before
+            display: block
+            padding-right: .8em
+            color: $highlight-gutter.color
+            content: counter(linenumber)
+            text-align: right

themes/butterfly/source/css/_highlight/theme.styl

@@ -0,0 +1,119 @@
+if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
+  $highlight-background = #212121
+  $highlight-selection = #61616150
+  $highlight-foreground = #EEFFFF
+  $highlight-mac-border = rgba(0, 0, 0, .4)
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: alpha($highlight-foreground, .8),
+    bg-color: darken($highlight-background, 2)
+  }
+  $highlight-scrollbar = darken($highlight-background, 6)
+
+  if $highlighEnable
+    $highlight-comment = #969896
+    $highlight-red = #FF5370
+    $highlight-orange = #F78C6C
+    $highlight-yellow = #FFCB6B
+    $highlight-green = #C3E88D
+    $highlight-aqua = #89DDFF
+    $highlight-blue = #82AAFF
+    $highlight-purple = #C792EA
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == 'pale night'
+  $highlight-background = #292D3E
+  $highlight-selection = #717CB450
+  $highlight-foreground = #A6ACCD
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 2)
+  }
+  $highlight-scrollbar = darken($highlight-background, 6)
+
+  if $highlighEnable
+    $highlight-comment = #676E95
+    $highlight-red = #FF5370
+    $highlight-orange = #F78C6C
+    $highlight-yellow = #FFCB6B
+    $highlight-green = #C3E88D
+    $highlight-aqua = #89DDFF
+    $highlight-blue = #82AAFF
+    $highlight-purple = #C792EA
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == 'ocean'
+  $highlight-background = #0F111A
+  $highlight-selection = #717CB450
+  $highlight-foreground = #8F93A2
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 2)
+  }
+  $highlight-scrollbar = darken($highlight-background, 5)
+
+  if $highlighEnable
+    $highlight-comment = rgba(101, 115, 126, .8)
+    $highlight-red = #FF5370
+    $highlight-orange = #F78C6C
+    $highlight-yellow = #FFCB6B
+    $highlight-green = #C3E88D
+    $highlight-aqua = #89DDFF
+    $highlight-blue = #82AAFF
+    $highlight-purple = #C792EA
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
+  $highlight-background = #F6F8FA
+  $highlight-selection = #80CBC440
+  $highlight-foreground = #90A4AE
+  $highlight-mac-border = rgba(144, 164, 174, .4)
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 5)
+  }
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-scrollbar = darken($highlight-background, 8)
+
+  if $highlighEnable
+    $highlight-comment = rgba(149, 165, 166, .8)
+    $highlight-red = #E53935
+    $highlight-orange = #F76D47
+    $highlight-yellow = #FFB62C
+    $highlight-green = #91B859
+    $highlight-aqua = #39ADB5
+    $highlight-blue = #6182B8
+    $highlight-purple = #7C4DFF
+    $highlight-deletion = #BF42BF
+    $highlight-addition = #105EDE
+
+if $highlight_theme == false
+  $highlight-background = #F6F8FA
+  $highlight-foreground = #90A4AE
+  $highlight-selection = #80CBC440
+  $highlight-gutter = {
+    color: alpha($highlight-foreground, .5),
+    bg-color: $highlight-background
+  }
+  $highlight-tools = {
+    color: $highlight-foreground,
+    bg-color: darken($highlight-background, 5)
+  }
+  $highlight-scrollbar = darken($highlight-background, 8)

themes/butterfly/source/css/_layout/404.styl

@@ -0,0 +1,77 @@
+if hexo-config('error_404.enable')
+  #error-wrap
+    position: absolute
+    top: 50%
+    right: 0
+    left: 0
+    margin: 0 auto
+    padding: 0 1rem
+    max-width: 1000px
+    transform: translate(0, -50%)
+
+    .error-content
+      display: flex
+      flex-direction: row
+      justify-content: center
+      align-items: center
+      margin: 0 1rem
+      height: 18rem
+      border-radius: 8px
+      background: var(--card-bg)
+      box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+
+      +maxWidth768()
+        flex-direction: column
+        margin: 0
+        height: 25rem
+
+      .error-img
+        flex: 1
+        height: 100%
+        border-top-left-radius: 8px
+        border-bottom-left-radius: 8px
+        background-color: $theme-color
+        background-position: center
+        background-size: cover
+
+        +maxWidth768()
+          flex: 1
+          width: 100%
+          border-top-right-radius: 8px
+          border-bottom-left-radius: 0
+
+      .error-info
+        flex: 1
+        padding: .5rem
+        text-align: center
+        font-size: 14px
+        if $site-name-font
+          font-family: $site-name-font
+
+        +maxWidth768()
+          flex: 1.1
+          width: 100%
+
+        .error_title
+          margin-top: -4rem
+          font-size: 9em
+
+          +maxWidth768()
+            margin-top: -3rem
+
+        .error_subtitle
+          @extend .limit-more-line
+          margin-top: -3.5rem
+          word-break: break-word
+          font-size: 1.6em
+          -webkit-line-clamp: 2
+
+        a
+          display: inline-block
+          margin-top: .5rem
+          padding: .3rem 1.5rem
+          background: var(--btn-bg)
+          color: var(--btn-color)
+
+          i
+            padding-right: .3rem

themes/butterfly/source/css/_layout/aside.styl

@@ -0,0 +1,340 @@
+#aside_content
+  width: 25%
+
+  +minWidth900()
+    if hexo-config('aside.position') == 'right'
+      padding-left: 15px
+    else
+      padding-right: 15px
+
+  +maxWidth900()
+    width: 100%
+
+  if hexo-config('aside.mobile') == false
+    +maxWidth768()
+      display: none
+
+  > .card-widget:first-child
+    margin-top: 0
+
+    +maxWidth900()
+      margin-top: 1rem
+
+  .card-widget
+    position: relative
+    overflow: hidden
+    margin-top: 1rem
+    border-radius: 8px
+    background: var(--card-bg)
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s
+
+    &:hover
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
+  .card-info
+    img
+      width: 110px
+      height: 110px
+      border-radius: 70px
+      transition: all .5s
+
+      &:hover
+        transform: rotate(360deg)
+
+    .author-info
+      &__name
+        font-weight: 500
+        font-size: 1.57em
+
+      &__description
+        margin-top: -.3rem
+
+    .card-info-data
+      display: table
+      padding: .7rem 0
+      width: 100%
+      table-layout: fixed
+
+      & > .card-info-data-item
+        display: table-cell
+
+        a
+          .headline
+            @extend .limit-one-line
+            color: var(--font-color)
+            font-size: 1em
+
+          .length-num
+            margin-top: -.3rem
+            color: var(--text-highlight-color)
+            font-size: 1.4em
+
+    .card-info-social-icons
+      margin: .3rem 0 -.3rem
+
+      .social-icon
+        margin: 0 .5rem
+        color: var(--font-color)
+        font-size: 1.4em
+        cursor: pointer
+
+      i
+        transition: all .3s
+
+        &:hover
+          transform: rotate(540deg)
+
+    #card-info-btn
+      display: block
+      background-color: var(--btn-bg)
+      color: var(--btn-color)
+      text-align: center
+      line-height: 2.4
+
+      span
+        padding-left: .5rem
+
+  .card-content
+    padding: 1rem 1.2rem
+
+  .item-headline
+    padding-bottom: .3rem
+    font-size: 1.2em
+
+    span
+      margin-left: .5rem
+
+  .sticky_layout
+    +minWidth900()
+      position: sticky
+      position: -webkit-sticky
+      top: 20px
+
+  .card-tag-cloud
+    a
+      display: inline-block
+      padding: 0 .1rem
+
+      &:hover
+        color: $text-hover !important
+
+  .aside-list
+    & > span
+      display: block
+      margin-bottom: .5rem
+      text-align: center
+
+    & > .aside-list-item
+      display: flex
+      align-items: center
+      padding: .3rem 0
+
+      &:first-child
+        padding-top: 0
+
+      &:not(:last-child)
+        border-bottom: 1px dashed #f5f5f5
+
+      &:last-child
+        padding-bottom: 0
+
+      .thumbnail
+        overflow: hidden
+        width: w = 4.2em
+        height: w
+
+        & > img
+          width: 100%
+          height: 100%
+          transition: all .6s
+          object-fit: cover
+
+          &:hover
+            transform: scale(1.1)
+
+      .content
+        flex: 1
+        padding-left: 10px
+        word-break: break-all
+
+        & > .name
+          @extend .limit-more-line
+          -webkit-line-clamp: 1
+
+        & > time,
+        & > .name
+          display: block
+          color: $theme-meta-color
+          font-size: 85%
+
+        & > .title,
+        & > .comment
+          @extend .limit-more-line
+          color: var(--font-color)
+          font-size: 95%
+          line-height: 1.5
+          -webkit-line-clamp: 2
+
+          &:hover
+            color: $text-hover
+
+      &.no-cover
+        min-height: 4.4em
+
+  .card-archives ul.card-archive-list,
+  .card-categories ul.card-category-list
+    margin: 0
+    padding: 0
+    list-style: none
+
+  .card-archives ul.card-archive-list > .card-archive-list-item,
+  .card-categories ul.card-category-list > .card-category-list-item
+    a
+      display: inline-block
+      padding: .15rem .5rem
+      width: 100%
+      color: var(--font-color)
+      transition: all .4s
+
+      &:hover
+        padding: .15rem .85rem
+        background-color: var(--text-bg-hover)
+
+      span
+        @extend .limit-one-line
+        display: inline-block
+        vertical-align: bottom
+
+        &:first-child
+          width: 80%
+
+        &:last-child
+          width: 20%
+          text-align: right
+
+    &.more
+      span
+        padding-right: .3rem
+        width: auto !important
+        transition: .5s
+
+      &:hover
+        span
+          padding-right: .6rem
+
+  .card-categories
+    .card-category-list
+      &.child
+        padding: 0 0 0 .8rem
+
+      > .parent
+        .card-category-list
+          &-name
+            width: 70% !important
+
+          &-count
+            width: calc(100% - 70% - 20px)
+            text-align: right
+
+        i
+          float: right
+          margin-right: -.35rem
+          padding: .35rem
+          transition: transform .3s
+          transform: rotate(0)
+
+          &.expand
+            transform: rotate(-90deg)
+
+        if hexo-config('aside.card_categories.expand') == false
+          + .child
+            display: none
+
+  .card-webinfo
+    .webinfo
+      .webinfo-item
+        display: flex
+        align-items: center
+        padding: .1rem .5rem 0
+
+        div
+          &:first-child
+            flex: 1
+            padding-right: 1rem
+
+  // toc
+  #card-toc
+    +maxWidth900()
+      position: fixed
+      right: 45px
+      bottom: 30px
+      z-index: 100
+      display: none
+      width: $toc-mobile-width
+      transform-origin: right bottom
+      animation: toc-open .3s
+
+      .toc-child
+        display: block !important
+
+    .toc-content
+      overflow-y: auto
+      max-height: calc(100vh - 120px)
+
+      ol,
+      li
+        list-style: none
+
+      > ol
+        padding: 0 !important
+
+      ol
+        margin: 0
+        padding-left: .4rem
+
+      .toc-link
+        display: block
+        padding-left: .3rem
+        border-left: 3px solid transparent
+        color: var(--toc-link-color)
+        transition: all .2s ease-in-out
+
+        &.active
+          border-left-color: darken($theme-toc-color, 20%)
+          background: $theme-toc-color
+          color: $toc-active-color
+
+      &:before
+        position: absolute
+        top: .6rem
+        right: 1.2rem
+        color: #a9a9a9
+        content: attr(progress-percentage)
+        font-style: italic
+        font-size: 1.2rem
+
+@keyframes toc-open
+  0%
+    transform: scale(.7)
+
+  100%
+    transform: scale(1)
+
+@keyframes toc-close
+  0%
+    transform: scale(1)
+
+  100%
+    transform: scale(.7)
+
++minWidth900()
+  html.hide-aside
+    .layout
+      justify-content: center
+
+      > .aside_content
+        display: none
+
+      > div:first-child
+        width: 80%

themes/butterfly/source/css/_layout/chat.styl

@@ -0,0 +1,8 @@
+// chat
+if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
+  #chatra:not(.chatra--expanded)
+    visibility: hidden !important
+    width: 1px !important
+    height: 1px !important
+    opacity: 0 !important
+    pointer-events: none

themes/butterfly/source/css/_layout/comments.styl

@@ -0,0 +1,64 @@
+#post-comment
+  .comment-head
+    margin-bottom: 1rem
+
+    .comment-headline
+      display: inline-block
+      vertical-align: middle
+      font-weight: 700
+      font-size: 1.43em
+
+    #comment-switch
+      display: inline-block
+
+      if hexo-config('comments.text')
+        float: right
+        margin: .1rem auto 0
+        padding: .2rem .8rem
+        width: max-content
+        border-radius: 8px
+        background: $comments-switch-bg
+      else
+        vertical-align: middle
+
+        > span
+          display: none
+
+      .first-comment
+        color: $comments-switch-first-text
+
+      .second-comment
+        color: $comments-switch-second-text
+
+      .switch-btn
+        position: relative
+        display: inline-block
+        margin: -4px .4rem 0
+        width: 42px
+        height: 22px
+        border-radius: 34px
+        background-color: $comments-switch-first-text
+        vertical-align: middle
+        cursor: pointer
+        transition: .4s
+
+        &:before
+          position: absolute
+          bottom: 4px
+          left: 4px
+          width: 14px
+          height: 14px
+          border-radius: 50%
+          background-color: $comments-switch-round
+          content: ''
+          transition: .4s
+
+        &.move
+          background-color: $comments-switch-second-text
+
+          &:before
+            transform: translateX(20px)
+
+  .comment-wrap
+    > div:nth-child(2)
+      display: none

themes/butterfly/source/css/_layout/footer.styl

@@ -0,0 +1,33 @@
+#footer
+  position: relative
+  background: $light-blue
+  background-attachment: local
+  background-position: bottom
+  background-size: cover
+
+  if hexo-config('footer_bg') != false
+    &:before
+      position: absolute
+      width: 100%
+      height: 100%
+      background-color: alpha($dark-black, .5)
+      content: ''
+
+#footer-wrap
+  position: relative
+  padding: 2rem 1rem
+  color: var(--light-grey)
+  text-align: center
+
+  a
+    color: var(--light-grey)
+
+    &:hover
+      text-decoration: underline
+
+  .footer-separator
+    margin: 0 .2rem
+
+  .icp-icon
+    padding: 0 4px
+    vertical-align: text-bottom

themes/butterfly/source/css/_layout/head.styl

@@ -0,0 +1,366 @@
+#page-header
+  position: relative
+  width: 100%
+  background-color: $light-blue
+  background-position: center center
+  background-size: cover
+  background-repeat: no-repeat
+  transition: all .5s
+
+  // index
+  &.full_page
+    height: $index_top_img_height
+    background-attachment: fixed
+
+    #site-info
+      position: absolute
+      top: $index_site_info_top
+      padding: 0 .5rem
+      width: 100%
+
+  #site-title,
+  #site-subtitle,
+  #scroll-down .scroll-down-effects
+    text-align: center
+    text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+    line-height: 1.5
+
+  #site-title
+    margin: 0
+    color: var(--white)
+    font-size: 1.85em
+
+    +minWidth768()
+      font-size: 2.85em
+
+  #site-subtitle
+    color: var(--light-grey)
+    font-size: 1.15em
+
+    +minWidth768()
+      font-size: 1.72em
+
+  #site_social_icons
+    display: none
+    margin: 0 auto
+    width: 15rem
+    text-align: center
+
+    +maxWidth768()
+      display: block
+
+    .social-icon
+      margin: 0 .5rem
+      color: var(--light-grey)
+      text-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .15)
+      font-size: 1.43em
+      cursor: pointer
+
+  #scroll-down
+    position: absolute
+    bottom: 0
+    width: 100%
+    cursor: pointer
+
+    .scroll-down-effects
+      position: relative
+      width: 100%
+      color: var(--light-grey)
+      font-size: 30px
+
+  // page
+  &.not-index-bg
+    height: 20rem
+
+    +maxWidth768()
+      height: 14rem
+
+  #page-site-info
+    position: absolute
+    top: 10rem
+    padding: 0 .5rem
+    width: 100%
+
+    +maxWidth768()
+      top: 7rem
+
+  // post
+  &.post-bg
+    height: 20rem
+
+    +maxWidth768()
+      height: 18rem
+
+    &:before
+      position: absolute
+      top: 0
+      left: 0
+      display: block
+      width: 100%
+      height: 100%
+      background-color: alpha($dark-black, .5)
+      content: ''
+
+  &.no-top-img
+    margin-bottom: .5rem
+    height: 60px
+    background: 0
+
+    #nav
+      background: rgba(255, 255, 255, .8)
+      box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)
+
+      a
+        color: var(--font-color)
+        text-shadow: none
+
+  #post-info
+    position: absolute
+    bottom: 5rem
+    padding: 0 8%
+    width: 100%
+    text-align: center
+
+    +maxWidth900()
+      bottom: 1.5rem
+      text-align: left
+
+    +maxWidth768()
+      bottom: 1.1rem
+      padding: 0 1.1rem
+
+#post-info
+  .post-title
+    @extend .limit-more-line
+    margin-bottom: .4rem
+    font-size: 2.5em
+    font-weight: normal
+    color: var(--white)
+    line-height: 1.5
+    -webkit-line-clamp: 3
+
+    +maxWidth768()
+      font-size: 1.72em
+
+  #post-meta
+    color: var(--light-grey)
+    font-size: 95%
+
+    +minWidth768()
+      > .meta-secondline
+        > span:first-child
+          display: none
+
+    +maxWidth768()
+      font-size: 90%
+
+      > .meta-firstline,
+      > .meta-secondline
+        display: inline
+
+    .post-meta
+      &-separator
+        margin: 0 .25rem
+
+      &-icon
+        margin-right: .2rem
+
+      &-label
+        if hexo-config('post_meta.post.label')
+          margin-right: .2rem
+        else
+          display: none
+
+    a
+      color: var(--light-grey)
+      transition: all .3s ease-out
+
+      &:hover
+        color: $text-hover
+        text-decoration: underline
+
+    if hexo-config('post_meta.post.date_format') == 'relative'
+      time
+        display: none
+
+// for not top_img
+#post
+  & > #post-info
+    margin-bottom: 1.5rem
+
+    .post-title
+      padding-bottom: .2rem
+      border-bottom: 1px solid var(--light-grey)
+      color: var(--text-highlight-color)
+
+[data-theme='light']
+  #post
+    #post-info
+      #post-meta,
+      #post-meta a
+        color: #78818a
+
+// css hack
+// all browser in ios and safari in all apple device
+_::-webkit-full-page-media,
+_:future,
+:root #page-header.full_page
+  background-attachment: scroll !important
+
+#nav
+  position: absolute
+  top: 0
+  z-index: 90
+  display: flex
+  flex-wrap: wrap
+  align-items: center
+  padding: 0 36px
+  width: 100%
+  height: 60px
+  font-size: 1.3em
+  opacity: 0
+  transition: all .5s
+
+  +maxWidth768()
+    padding: 0 16px
+
+  &:not(.fixed)
+    #menus
+      padding-right: 0 !important
+
+  &.show
+    opacity: 1
+
+  #blog_name
+    flex: 1
+
+  #toggle-menu
+    display: none
+    padding: .1rem 0 0 .3rem
+    vertical-align: top
+
+    &:hover
+      color: var(--white)
+
+  a
+    color: var(--light-grey)
+
+    &:hover
+      color: var(--white)
+
+  &.fixed
+    position: fixed
+    top: -60px
+    z-index: 91
+    background: rgba(255, 255, 255, .8)
+    box-shadow: 0 5px 6px -5px alpha($grey, .6)
+    transition: transform .2s ease-in-out, opacity .2s ease-in-out
+
+    a,
+    #site-name,
+    #toggle-menu
+      color: var(--font-color)
+      text-shadow: none
+
+      &:hover
+        color: $light-blue
+
+  &.visible
+    transition: all .5s
+    transform: translate3d(0, 100%, 0)
+
+  #site-name
+    text-shadow: .1rem .1rem .2rem rgba($dark-black, .15)
+    font-weight: bold
+    cursor: pointer
+
+  .menus_items
+    display: inline
+
+    .menus_item
+      position: relative
+      display: inline-block
+      padding: 0 0 0 .7rem
+
+      &:hover
+        .menus_item_child
+          display: block
+
+        i.expand
+          transform: rotate(180deg) !important
+
+      i.expand
+        padding: 4px
+        transition: transform .3s
+
+      & > a
+        &:after
+          position: absolute
+          bottom: 0
+          left: 0
+          z-index: -1
+          width: 0
+          height: 3px
+          background-color: lighten($theme-color, 30%)
+          content: ''
+          transition: all .3s ease-in-out
+
+        &:hover
+          &:after
+            width: 100%
+
+      .menus_item_child
+        position: absolute
+        right: 0
+        display: none
+        margin-top: 8px
+        padding: 0
+        width: max-content
+        background-color: var(--sidebar-bg)
+        box-shadow: 0 5px 20px -4px rgba($dark-black, .5)
+        animation: sub_menus .3s .1s ease both
+
+        &:before
+          position: absolute
+          top: -8px
+          left: 0
+          width: 100%
+          height: 20px
+          content: ''
+
+        li
+          list-style: none
+
+          &:hover
+            background: var(--text-bg-hover)
+
+          a
+            display: inline-block
+            padding: .3rem .7rem
+            width: 100%
+            color: var(--font-color)
+            text-shadow: none
+
+  &.hide-menu
+    #toggle-menu
+      display: inline-block !important
+
+      .site-page
+        font-size: inherit
+
+    .menus_items
+      display: none !important
+
+    #search_button span
+      display: none !important
+
+  #search_button
+    display: inline
+    padding: 0 0 0 .7rem
+
+  .site-page
+    position: relative
+    padding-bottom: .3rem
+    text-shadow: .05rem .05rem .1rem rgba($dark-black, .3)
+    font-size: .78em
+    cursor: pointer

themes/butterfly/source/css/_layout/loading.styl

@@ -0,0 +1,95 @@
+if hexo-config('preloader')
+  .loading-bg
+    position: fixed
+    z-index: 1000
+    width: 50%
+    height: 100%
+    background-color: var(--preloader-bg)
+
+  #loading-box
+    .loading-left-bg
+      @extend .loading-bg
+
+    .loading-right-bg
+      @extend .loading-bg
+      right: 0
+
+    .spinner-box
+      position: fixed
+      z-index: 1001
+      display: flex
+      justify-content: center
+      align-items: center
+      width: 100%
+      height: 100vh
+
+      .configure-border-1
+        position: absolute
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: #ffab91
+        animation: configure-clockwise 3s ease-in-out 0s infinite alternate
+
+      .configure-border-2
+        left: -115px
+        padding: 3px
+        width: 115px
+        height: 115px
+        background: rgb(63, 249, 220)
+        transform: rotate(45deg)
+        animation: configure-xclockwise 3s ease-in-out 0s infinite alternate
+
+      .loading-word
+        position: absolute
+        color: var(--preloader-color)
+        font-size: .8rem
+
+      .configure-core
+        width: 100%
+        height: 100%
+        background-color: var(--preloader-bg)
+
+    &.loaded
+      .loading-left-bg
+        transition: all .5s
+        transform: translate(-100%, 0)
+
+      .loading-right-bg
+        transition: all .5s
+        transform: translate(100%, 0)
+
+      .spinner-box
+        display: none
+
+  @keyframes configure-clockwise
+    0%
+      transform: rotate(0)
+
+    25%
+      transform: rotate(90deg)
+
+    50%
+      transform: rotate(180deg)
+
+    75%
+      transform: rotate(270deg)
+
+    100%
+      transform: rotate(360deg)
+
+  @keyframes configure-xclockwise
+    0%
+      transform: rotate(45deg)
+
+    25%
+      transform: rotate(-45deg)
+
+    50%
+      transform: rotate(-135deg)
+
+    75%
+      transform: rotate(-225deg)
+
+    100%
+      transform: rotate(-315deg)

themes/butterfly/source/css/_layout/pagination.styl

@@ -0,0 +1,79 @@
+#pagination
+  overflow: hidden
+  margin-top: 1rem
+  width: 100%
+
+  .pagination
+    text-align: center
+
+  .page-number
+    display: inline-block
+    margin: 0 .2rem
+    min-width: w = 1.2rem
+    height: w
+    text-align: center
+    line-height: w
+    cursor: pointer
+
+    &.current
+      background: $theme-paginator-color
+      color: var(--white)
+      cursor: default
+
+  img.prev-cover,
+  img.next-cover
+    position: absolute
+    width: 100%
+    height: 100%
+    opacity: .4
+    transition: all .6s
+    object-fit: cover
+
+  .pagination-info
+    position: absolute
+    top: 50%
+    padding: 1rem 2rem
+    width: 100%
+    transform: translate(0, -50%)
+
+  .prev_info,
+  .next_info
+    @extend .limit-one-line
+    color: var(--white)
+    font-weight: 500
+
+  .next-post
+    .pagination-info
+      text-align: right
+
+  .pull-full
+    width: 100% !important
+
+  .prev-post .label,
+  .next-post .label
+    color: var(--light-grey)
+    text-transform: uppercase
+    font-size: 90%
+
+  .prev-post,
+  .next-post
+    width: 50%
+
+    +maxWidth768()
+      width: 100%
+
+    a
+      position: relative
+      display: block
+      overflow: hidden
+      height: 150px
+
+    &:hover
+      img.prev-cover,
+      img.next-cover
+        opacity: .8
+        transform: scale(1.1)
+
+  &.pagination-post
+    margin: 2rem 0 !important
+    background: $dark-black

themes/butterfly/source/css/_layout/post.styl

@@ -0,0 +1,277 @@
+beautify()
+  headStyle(fontsize)
+    padding-left: unit(fontsize + .4, 'rem')
+
+    code
+      font-size: unit(fontsize, 'rem')
+
+    &:before
+      margin-left: unit((-(fontsize + .2)), 'rem')
+      font-size: unit(fontsize, 'rem')
+
+    &:hover
+      padding-left: unit(fontsize + .6, 'rem')
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    transition: all .2s ease-out
+
+    &:before
+      position: absolute
+      top: calc(50% - .35rem)
+      color: $title-prefix-icon-color
+      content: $title-prefix-icon
+      line-height: 1
+      transition: all .2s ease-out
+      @extend .fontawesomeIcon
+
+    &:hover
+      &:before
+        color: $light-blue
+
+  h1
+    headStyle(1)
+
+  h2
+    headStyle(.9)
+
+  h3
+    headStyle(.8)
+
+  h4
+    headStyle(.7)
+
+  h5
+    headStyle(.6)
+
+  h6
+    headStyle(.6)
+
+  ol,
+  ul
+    margin-top: .4rem
+    padding: 0 0 0 .8rem
+    list-style: none
+    counter-reset: li
+
+    +maxWidth768()
+      padding: 0 0 0 .4rem
+
+    p
+      margin: 0 0 .5rem
+
+    ol,
+    ul
+      padding-left: .6rem
+
+      +maxWidth768()
+        padding-left: .2rem
+
+    li
+      &:not(.tab)
+        position: relative
+        margin: .2rem 0
+
+      &:hover
+        &:before
+          transform: rotate(360deg)
+
+      &:before
+        position: absolute
+        top: 0
+        left: 0
+        background: $light-blue
+        color: $white
+        cursor: pointer
+        transition: all .3s ease-out
+
+  ol
+    > li
+      &:not(.tab)
+        padding: .2em .2em .2em 1.8em
+
+      &:before
+        margin-top: .65em
+        width: w = 1.45em
+        height: h = w
+        border-radius: .5 * w
+        content: counter(li)
+        counter-increment: li
+        text-align: center
+        font-size: .85em
+        line-height: h
+
+  ul
+    > li:not(.tab)
+      padding: .2em .2em .2em 1.4em
+
+      &:hover
+        &:before
+          border-color: $pseudo-hover
+
+      &:before
+        $w = .42em
+        top: .78em
+        width: w = $w
+        height: h = w
+        border: .5 * w solid $light-blue
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+
+no-beautify()
+  ol,
+  ul
+    margin-top: .4rem
+
+    p
+      margin: 0 0 .5rem
+
+    ol,
+    ul
+      padding-left: .5rem
+
+    li
+      position: relative
+      margin: .3rem 0
+      padding-left: .3rem
+
+#article-container
+  word-wrap: break-word
+  overflow-wrap: break-word
+
+  a
+    color: $theme-link-color
+
+    &:hover
+      text-decoration: underline
+
+  img
+    margin: 0 auto .8rem
+
+  p
+    margin: 0 0 .8rem
+
+  iframe
+    margin: 0 0 1rem
+
+  if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'site'
+    beautify()
+  else if hexo-config('beautify.enable') && hexo-config('beautify.field') == 'post'
+    no-beautify()
+
+    &.post-content
+      beautify()
+  else
+    no-beautify()
+
+#post
+  img
+    display: block
+
+  .tag_share
+    .post-meta
+      &__tag-list
+        display: inline-block
+
+      &__tags
+        display: inline-block
+        margin: .4rem .4rem .4rem 0
+        padding: 0 .6rem
+        width: fit-content
+        border: 1px solid $light-blue
+        border-radius: .6rem
+        color: $light-blue
+        font-size: .85em
+        transition: all .2s ease-in-out
+
+        &:hover
+          background: $light-blue
+          color: var(--white)
+
+    .post_share
+      display: inline-block
+      float: right
+      margin: .4rem 0
+      width: fit-content
+
+      .social-share
+        font-size: .85em
+
+        .social-share-icon
+          margin: 0 4px
+          width: w = 1.85em
+          height: w
+          font-size: 1.2em
+          line-height: w
+
+  .post-copyright
+    position: relative
+    margin: 2rem 0 .5rem
+    padding: .5rem .8rem
+    border: 1px solid var(--light-grey)
+    transition: box-shadow .3s ease-in-out
+
+    &:before
+      position: absolute
+      top: t = .5rem
+      right: t
+      width: w = .8rem
+      height: w
+      border-radius: w
+      background: $light-blue
+      content: ''
+
+    &:after
+      position: absolute
+      top: t = .7rem
+      right: t
+      width: w = .4rem
+      height: w
+      border-radius: w
+      background: var(--card-bg)
+      content: ''
+
+    &:hover
+      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
+
+    .post-copyright
+      &-meta
+        color: $light-blue
+        font-weight: bold
+
+      &-info
+        padding-left: .3rem
+
+        a
+          text-decoration: underline
+          word-break: break-word
+
+          &:hover
+            text-decoration: none
+
+  .post-outdate-notice
+    position: relative
+    margin: 0 0 1rem
+    padding: .5em 1.2em
+    border-radius: 3px
+    background-color: $noticeOutdate-bg
+    color: $noticeOutdate-color
+
+    if hexo-config('noticeOutdate.style') == 'flat'
+      padding: .5em 1em .5em 2.6em
+      border-left: 5px solid $noticeOutdate-border
+
+      &:before
+        @extend .fontawesomeIcon
+        position: absolute
+        top: 50%
+        left: .9em
+        color: $noticeOutdate-border
+        content: '\f071'
+        transform: translateY(-50%)

themes/butterfly/source/css/_layout/relatedposts.styl

@@ -0,0 +1,54 @@
+.relatedPosts
+  margin-top: 1rem
+
+  & > .headline
+    margin-bottom: 5px
+    font-weight: 700
+    font-size: 1.43em
+
+  & > .relatedPosts-list
+    & > div
+      position: relative
+      display: inline-block
+      overflow: hidden
+      margin: 3px
+      width: calc(33.333% - 6px)
+      height: 200px
+      background: $dark-black
+      vertical-align: bottom
+
+      &:hover
+        .cover
+          opacity: .8
+          transform: scale(1.1)
+
+      +maxWidth768()
+        margin: 2px
+        width: calc(50% - 4px)
+        height: 150px
+
+      +maxWidth600()
+        width: calc(100% - 4px)
+
+    .cover
+      width: 100%
+      height: 100%
+      opacity: .4
+      transition: all .6s
+      object-fit: cover
+
+    .content
+      position: absolute
+      top: 50%
+      padding: 0 1rem
+      width: 100%
+      transform: translate(0, -50%)
+
+      .date
+        color: var(--light-grey)
+        font-size: 90%
+
+      .title
+        @extend .limit-more-line
+        color: var(--white)
+        -webkit-line-clamp: 2

themes/butterfly/source/css/_layout/reward.styl

@@ -0,0 +1,71 @@
+.post-reward
+  position: relative
+  margin-top: 4rem
+  width: 100%
+  text-align: center
+
+  .reward-button
+    display: inline-block
+    padding: .2rem 1.2rem
+    background: var(--btn-bg)
+    color: var(--btn-color)
+    cursor: pointer
+    transition: all .4s
+
+    &:hover
+      box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
+
+      .reward-main
+        display: block
+
+    .reward-main
+      position: absolute
+      bottom: 40px
+      left: 0
+      z-index: 100
+      display: none
+      padding: 0 0 15px
+      width: 100%
+
+      .reward-all
+        display: inline-block
+        margin: 0
+        padding: 1rem .5rem
+        border-radius: 4px
+        background: var(--reward-pop)
+
+        &:before
+          position: absolute
+          bottom: -10px
+          left: 0
+          width: 100%
+          height: 20px
+          content: ''
+
+        &:after
+          position: absolute
+          right: 0
+          bottom: 2px
+          left: 0
+          margin: 0 auto
+          width: 0
+          height: 0
+          border-top: 13px solid var(--reward-pop)
+          border-right: 13px solid transparent
+          border-left: 13px solid transparent
+          content: ''
+
+        .reward-item
+          display: inline-block
+          padding: 0 8px
+          list-style-type: none
+          vertical-align: top
+
+          img
+            width: 130px
+            height: 130px
+
+          .post-qr-code-desc
+            padding-top: .4rem
+            width: 130px
+            color: $reward-pop-up-color

themes/butterfly/source/css/_layout/rightside.styl

@@ -0,0 +1,44 @@
+#rightside
+  position: fixed
+  right: -38px
+  bottom: $rightside-bottom
+  z-index: 100
+  opacity: 0
+  transition: all .5s
+
+  #rightside-config-hide
+    transition: transform .4s
+    transform: translate(35px, 0)
+
+    &.show
+      transform: translate(0, 0) !important
+
+  & > div
+    & > button,
+    & > a
+      display: block
+      margin-bottom: 2px
+      width: 30px
+      height: 30px
+      background-color: var(--btn-bg)
+      color: var(--btn-color)
+      text-align: center
+      font-size: 16px
+      cursor: pointer
+
+      &:hover
+        background-color: var(--btn-hover-color)
+
+  #rightside_config
+    i
+      animation: avatar_turn_around 2s linear infinite
+
+  #mobile-toc-button
+    display: none
+
+    +maxWidth900()
+      display: block
+
+  +maxWidth900()
+    #hide-aside-btn
+      display: none

themes/butterfly/source/css/_layout/sidebar.styl

@@ -0,0 +1,97 @@
+#sidebar
+  #menu-mask
+    position: fixed
+    z-index: 102
+    display: none
+    width: 100%
+    height: 100%
+    background: alpha($dark-black, .8)
+
+  #sidebar-menus
+    position: fixed
+    top: 0
+    right: -($sidebar-width)
+    z-index: 103
+    overflow-x: hidden
+    overflow-y: auto
+    width: $sidebar-width
+    height: 100%
+    background: var(--sidebar-bg)
+    transition: all .5s
+
+    &.open
+      transform: translate3d(-100%, 0, 0)
+
+    & > .author-avatar
+      padding: 1.3rem 1.5rem 0
+      text-align: center
+
+      img
+        width: 110px
+        height: 110px
+        border-radius: 70px
+        transition: all .5s
+
+        &:hover
+          transform: rotate(360deg)
+
+    .site-data
+      display: table
+      padding: .6rem .5rem 0
+      width: 100%
+      table-layout: fixed
+
+      .data-item
+        display: table-cell
+
+        .data-item-link
+          & > a > div
+            @extend .limit-one-line
+
+          .length-num
+            color: var(--text-highlight-color)
+            font-size: 1.28em
+
+          .headline
+            color: var(--font-color)
+
+    hr
+      margin: 1rem auto
+
+    .menus_items
+      padding: 0 .5rem 2rem
+
+      .site-page
+        @extend .limit-one-line
+        position: relative
+        display: block
+        padding: .3rem 1.5rem
+        color: var(--font-color)
+        font-size: 1.15em
+        cursor: pointer
+
+        i:first-child
+          width: 25%
+          text-align: left
+
+        span
+          width: 75%
+
+          &:hover
+            color: $light-blue
+
+      .expand
+        position: absolute
+        top: .78em
+        right: .4rem
+        transition: transform .3s
+
+        &.hide
+          transform: rotate(90deg) !important
+
+      .menus_item_child
+        margin: 0
+        list-style: none
+
+        if hexo-config('hide_sidebar_menu_child')
+          display: none

themes/butterfly/source/css/_layout/third-party.styl

@@ -0,0 +1,99 @@
+#vcomment
+  font-size: 1.1em
+
+  .vbtn
+    border: none
+    background: var(--btn-bg)
+    color: var(--btn-color)
+
+    &:hover
+      background: var(--btn-hover-color)
+
+  if hexo-config('valine.bg')
+    textarea
+      background: url(hexo-config('valine.bg')) 100% 100% no-repeat
+
+      &:focus
+        background-image: none
+
+  .vimg
+    transition: all .3s
+
+    &:hover
+      transform: rotate(360deg)
+
+  .vcards .vcard .vcontent.expand
+    &:before,
+    &:after
+      z-index: 22
+
+.fireworks
+  position: fixed
+  top: 0
+  left: 0
+  z-index: $fireworks-zIndex
+  pointer-events: none
+
+.medium-zoom-image--opened
+  z-index: 99999 !important
+  margin: 0 !important
+
+.medium-zoom-overlay
+  z-index: 99999 !important
+
+.mermaid
+  overflow: auto
+  margin: 0 0 1rem
+  background: $white
+  text-align: center
+  opacity: 0
+  transition: all .3s
+
+  &[data-processed]
+    opacity: 1
+
+.utterances,
+.fb-comments iframe
+  width: 100% !important
+
+#gitalk-container
+  .gt-meta
+    margin: 0 0 .8em
+    padding: .3rem 0 .8em
+
+.katex-wrap
+  overflow: auto
+
+  if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
+    &::-webkit-scrollbar
+      display: none
+
+// mathjax
+.mathjax-overflow
+  overflow-x: auto
+  overflow-y: hidden
+
+mjx-container[jax='CHTML'][display='true']
+  overflow-x: auto
+  overflow-y: hidden
+  padding-bottom: .3rem
+
+.aplayer
+  color: $font-black
+
+#article-container
+  .aplayer
+    margin: 0 0 1rem
+
+    if hexo-config('beautify.enable')
+      ol,
+      ul
+        margin: 0
+        padding: 0
+
+        li
+          margin: 0
+          padding: 0 15px
+
+          &:before
+            content: none

themes/butterfly/source/css/_mode/darkmode.styl

@@ -0,0 +1,156 @@
+if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
+  [data-theme='dark']
+    --global-bg: darken(#121212, 2)
+    --font-color: alpha(#FFFFFF, .7)
+    --hr-border: alpha(#FFFFFF, .4)
+    --hr-before-color: alpha(#FFFFFF, .7)
+    --search-bg: #121212
+    --search-input-color: alpha(#FFFFFF, .7)
+    --search-result-title: alpha(#FFFFFF, .9)
+    --preloader-bg: darken(#121212, 2)
+    --preloader-color: alpha(#FFFFFF, .7)
+    --tab-border-color: #2c2c2c
+    --tab-botton-bg: #2c2c2c
+    --tab-botton-color: alpha(#FFFFFF, .7)
+    --tab-button-hover-bg: lighten(#121212, 15)
+    --tab-button-active-bg: #121212
+    --card-bg: #121212
+    --sidebar-bg: #121212
+    --btn-hover-color: lighten(#121212, 40)
+    --btn-color: alpha(#FFFFFF, .7)
+    --btn-bg: lighten(#121212, 5)
+    --text-bg-hover: lighten(#121212, 15)
+    --light-grey: alpha(#FFFFFF, .7)
+    --white: alpha(#FFFFFF, .9)
+    --text-highlight-color: alpha(#FFFFFF, .9)
+    --blockquote-color: alpha(#FFFFFF, .7)
+    --blockquote-bg: lighten(#121212, 10)
+    --reward-pop: lighten(#121212, 10)
+    --toc-link-color: alpha(#FFFFFF, .6)
+
+    #web_bg:before,
+    #footer:before,
+    #page-header:before
+      position: absolute
+      width: 100%
+      height: 100%
+      background-color: alpha($dark-black, .7)
+      content: ''
+
+    #article-container
+      code
+        background: #2c2c2c
+
+      pre > code
+        background: 0
+
+      .note
+        code
+          background: $code-background
+
+      .aplayer
+        filter: brightness(.8)
+
+    // 頭部
+    #page-header
+      & > #nav.fixed,
+      &.no-top-img #nav
+        background: alpha(#121212, .8)
+        box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
+
+    // 代碼框
+    #article-container
+      pre,
+      .highlight:not(.js-file-line-container)
+        background-color: lighten(#121212, 2) !important
+        color: alpha(#FFFFFF, .7) !important
+
+      figure.highlight
+        box-shadow: none
+
+        if hexo-config('highlight_settings') && hexo-config('highlight_settings.enable')
+          table::-webkit-scrollbar-thumb
+            background: lighten(#121212, 5)
+
+          .line:before
+            color: alpha(#FFFFFF, .7) !important
+
+          .hljs
+            background-color: lighten(#121212, 2) !important
+
+        pre[class*='language-']::-webkit-scrollbar-thumb
+          background: lighten(#121212, 5)
+
+        .highlight-tools
+          background: lighten(#121212, 3) !important
+          color: #90a4ae !important
+
+    #post-comment
+      #comment-switch
+        if hexo-config('comments.text')
+          background: #2c2c2c !important
+
+        .switch-btn
+          filter: brightness(.8)
+
+    // note
+    if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
+      .note
+        filter: brightness(.8)
+
+    // hide-tags
+    .hide-button,
+    .btn-beautify,
+    .mermaid,
+    .post-outdate-notice,
+    .error-img,
+    #article-container iframe,
+    img,
+    .gist
+      filter: brightness(.8)
+
+    #aside_content .aside-list > .aside-list-item:not(:last-child)
+      border-bottom: 1px dashed alpha(#FFFFFF, .1)
+
+    // 第三方
+    // 插件 hexo-blog-encrypt
+    #hexo-blog-encrypt
+      label,
+      input
+        color: alpha(#FFFFFF, .7) !important
+
+      input
+        background-color: #121212
+
+    // Gitalk
+    #gitalk-container
+      filter: brightness(.8)
+
+      svg
+        fill: alpha(#FFFFFF, .9) !important
+
+    // Disqus and Disqusjs
+    #disqus_thread
+      #dsqjs
+        .dsqjs-tab-active,
+        .dsqjs-no-comment
+          color: alpha(#FFFFFF, .7)
+
+        .dsqjs-order-label
+          background-color: lighten(#121212, 5)
+
+        .dsqjs-post-body
+          color: alpha(#FFFFFF, .7)
+
+          code,
+          pre
+            background: #2c2c2c
+
+          blockquote
+            color: alpha(#FFFFFF, .7)
+
+    #artitalk_main #lazy
+      background: #121212
+
+    #operare_artitalk .c2
+      background: #121212

themes/butterfly/source/css/_mode/readmode.styl

@@ -0,0 +1,186 @@
+if hexo-config('readmode')
+  [data-theme='light']
+    .read-mode
+      --font-color: #4c4948
+      --readmode-light-color: #fff
+      --white: #4c4948
+      --light-grey: #4c4948
+      --gray: #d6dbdf
+      --hr-border: #d6dbdf
+      --hr-before-color: darken(#d6dbdf, 10)
+      -highlight-bg: #f7f7f7
+
+  [data-theme='dark']
+    .read-mode
+      --font-color: rgba(255, 255, 255, .7)
+      --readmode-light-color: #0d0d0d
+      --white: rgba(255, 255, 255, .9)
+      --light-grey: rgba(255, 255, 255, .7)
+      --gray: rgba(255, 255, 255, .7)
+      --hr-border: rgba(255, 255, 255, .5)
+      --hr-before-color: rgba(255, 255, 255, .7)
+      -highlight-bg: #171717
+
+  .read-mode
+    background: var(--readmode-light-color)
+
+    #aside_content
+      display: none
+
+    #body-wrap
+      padding-left: 0 !important
+
+    #page-header.post-bg
+      background-color: transparent
+      background-image: none !important
+
+      &:before
+        opacity: 0
+
+      & > #post-info
+        padding: 0
+        text-align: center
+
+    #post
+      margin: 0 auto
+      background: transparent
+      box-shadow: none
+
+      &:hover
+        box-shadow: none
+
+    & > canvas
+      display: none !important
+
+    .highlight-tools,
+    #footer,
+    #post > *:not(#post-info):not(.post-content),
+    #to_comment,
+    #mobile-toc-button,
+    #nav,
+    .post-outdate-notice,
+    #web_bg
+      display: none !important
+
+    if !hexo-config('chat_btn')
+      #chatra,
+      #tidio-chat-code,
+      #tidio-chat,
+      #daodream-container,
+      .gitter-chat-embed,
+      .gitter-open-chat-button
+        display: none !important
+
+    #article-container
+      a
+        color: #99a9bf
+
+      pre,
+      .highlight:not(.js-file-line-container)
+        background: var(-highlight-bg) !important
+
+        *
+          color: var(--font-color) !important
+
+      figure.highlight
+        border-radius: 0 !important
+        box-shadow: none !important
+
+        & > :not(.highlight-tools)
+          display: block !important
+
+        .line:before
+          color: var(--font-color) !important
+
+        .hljs
+          background: var(-highlight-bg) !important
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6
+        padding: 0
+
+        &:before
+          content: ''
+
+        &:hover
+          padding: 0
+
+      ul,
+      li,
+      ol
+        &:hover:before
+          transform: none !important
+
+      ol,
+      li
+        &:before
+          background: transparent !important
+          color: var(--font-color) !important
+
+      ul
+        >li
+          &:before
+            border: .15rem solid var(--gray) !important
+
+      .tabs
+        border: 2px solid var(--tab-border-color)
+
+        > .nav-tabs
+          background: transparent
+
+          > .tab
+            border-bottom: 0
+
+            button
+              border-top: none !important
+              background: transparent
+
+              &:hover
+                background: none !important
+
+            &.active
+              button
+                text-decoration: underline
+
+        > .tab-contents .tab-item-content.active
+          animation: none
+
+      code
+        color: var(--font-color)
+
+      blockquote
+        border-left: .2rem solid var(--gray)
+        background-color: var(--readmode-light-color)
+
+      .hide-toggle
+        border: 1px solid var(--gray) !important
+
+      .hide-button,
+      .btn-beautify
+        background: var(--readmode-light-color) !important
+        color: var(--font-color) !important
+
+      .btn-beautify
+        border: 1px solid var(--gray) !important
+
+      .button--animated:before
+        background: var(--readmode-light-color) !important
+
+      .hide-inline,
+      .hide-block
+        & >.hide-button
+          border: 1px solid var(--gray)
+
+        & > .button--animated:before
+          background: var(--readmode-light-color)
+
+      .note
+        border: 2px solid var(--gray)
+        border-left-color: var(--gray) !important
+        filter: none
+        background-color: var(--readmode-light-color) !important
+        color: var(--font-color)

themes/butterfly/source/css/_page/archives.styl

@@ -0,0 +1,115 @@
+.article-sort
+  margin-left: .5rem
+  padding-left: 1rem
+  border-left: 2px solid lighten($light-blue, 20)
+
+  &-title
+    position: relative
+    margin-left: .5rem
+    padding-bottom: 1rem
+    padding-left: 1rem
+    font-size: 1.72em
+
+    &:hover
+      &:before
+        border-color: $pseudo-hover
+
+    &:before
+      position: absolute
+      top: calc(((100% - 1.8rem) / 2))
+      left: -.45rem
+      z-index: 1
+      width: w = .5rem
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: var(--card-bg)
+      content: ''
+      line-height: h
+      transition: all .2s ease-in-out
+
+    &:after
+      position: absolute
+      bottom: 0
+      left: 0
+      z-index: 0
+      width: .1rem
+      height: 1.5em
+      background: lighten($light-blue, 20)
+      content: ''
+
+  &-item
+    position: relative
+    display: flex
+    align-items: center
+    margin: 0 0 1rem .5rem
+    transition: all .2s ease-in-out
+
+    &:hover
+      &:before
+        border-color: $pseudo-hover
+
+    &:before
+      $w = .3rem
+      position: absolute
+      left: calc(-1rem - 17px)
+      width: w = $w
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: var(--card-bg)
+      content: ''
+      transition: all .2s ease-in-out
+
+    &.no-article-cover
+      height: 80px
+
+      .article-sort-item-info
+        padding: 0
+
+    &.year
+      font-size: 1.43em
+
+      &:hover
+        &:before
+          border-color: $light-blue
+
+      &:before
+        border-color: $pseudo-hover
+
+    &-time
+      color: $theme-meta-color
+      font-size: 95%
+
+      time
+        padding-left: .3rem
+        cursor: default
+
+    &-title
+      @extend .limit-more-line
+      color: var(--font-color)
+      font-size: 1.1em
+      transition: all .3s
+      -webkit-line-clamp: 2
+
+      &:hover
+        color: $text-hover
+        transform: translateX(10px)
+
+    &-img
+      overflow: hidden
+      width: 80px
+      height: 80px
+
+      img
+        width: 100%
+        height: 100%
+        transition: all .6s
+        object-fit: cover
+
+        &:hover
+          transform: scale(1.1)
+
+    &-info
+      flex: 1
+      padding: 0 .8rem

themes/butterfly/source/css/_page/categories.styl

@@ -0,0 +1,62 @@
+#page
+  .category-lists
+    padding: 1rem 0 1.5rem
+
+    +maxWidth768()
+      padding: 0
+
+    .category-title
+      font-size: 2.57em
+
+      +maxWidth768()
+        font-size: 2em
+
+    .category-list
+      a
+        color: var(--font-color)
+
+        &:hover
+          color: $text-hover
+
+      .category-list-count
+        margin-left: .4rem
+        color: $theme-meta-color
+
+        &:before
+          content: '('
+
+        &:after
+          content: ')'
+
+    ul
+      margin-top: .4rem
+      padding: 0 0 0 1rem
+      list-style: none
+      counter-reset: li
+
+      ul
+        padding-left: .2rem
+
+      li
+        position: relative
+        margin: .3rem 0
+        padding: .12em .4em .12em 1.4em
+
+        &:before
+          position: absolute
+          left: 0
+          cursor: pointer
+          transition: all .3s ease-out
+          $w = .43em
+          top: .7em
+          width: w = $w
+          height: h = w
+          border: .5 * w solid $light-blue
+          border-radius: w
+          background: transparent
+          content: ''
+          // line-height: h
+
+        &:hover
+          &:before
+            border-color: $pseudo-hover

themes/butterfly/source/css/_page/common.styl

@@ -0,0 +1,52 @@
+.layout
+  display: flex
+  margin: 0 auto
+  padding: 2rem 15px
+  max-width: 1200px
+
+  +maxWidth900()
+    flex-direction: column
+
+  +maxWidth768()
+    padding: 1rem 5px !important
+
+  +minWidth2000()
+    max-width: 1500px
+
+  & > div:first-child:not(.recent-posts)
+    align-self: flex-start
+    padding: 50px 40px
+    border-radius: 8px
+    background: var(--card-bg)
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+
+    &:hover
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
+    +maxWidth768()
+      padding: 1.8rem .7rem !important
+
+  & > div:first-child
+    width: 75%
+    transition: all .3s
+
+    +maxWidth900()
+      width: 100% !important
+
+    if hexo-config('aside.position') == 'left'
+      +minWidth900()
+        order: 2
+
+  // 隱藏aside
+  &.hide-aside
+    max-width: 1000px
+
+    +minWidth2000()
+      max-width: 1300px
+
+    & > div
+      width: 100% !important
+
+#page
+  h1.page-title
+    margin-top: .4rem

themes/butterfly/source/css/_page/flink.styl

@@ -0,0 +1,76 @@
+.flink#article-container
+  .flink-desc
+    margin: .2rem 0 .5rem
+
+  .flink-list
+    overflow: auto
+    padding: 10px 10px 0
+    text-align: center
+
+    & > .flink-list-item
+      position: relative
+      float: left
+      overflow: hidden
+      margin: 15px 7px
+      width: calc(100% / 3 - 15px)
+      height: 90px
+      border-radius: 8px
+      line-height: 17px
+      -webkit-transform: translateZ(0)
+
+      +maxWidth1024()
+        width: calc(50% - 15px) !important
+
+      +maxWidth600()
+        width: calc(100% - 15px) !important
+
+      &:hover
+        img
+          transform: rotate(360deg)
+
+      &:before
+        position: absolute
+        top: 0
+        right: 0
+        bottom: 0
+        left: 0
+        z-index: -1
+        background: var(--text-bg-hover)
+        content: ''
+        transition: transform .3s ease-out
+        transform: scale(0)
+
+      &:hover:before,
+      &:focus:before,
+      &:active:before
+        transform: scale(1)
+
+      a
+        color: var(--font-color)
+        text-decoration: none
+
+        img
+          float: left
+          margin: 15px 10px
+          width: 60px
+          height: 60px
+          border-radius: 35px
+          transition: all .3s
+
+        .img-alt
+          display: none
+
+        .flink-item-name
+          @extend .limit-one-line
+          display: block
+          padding: 16px 10px 0 0
+          height: 40px
+          font-weight: bold
+          font-size: 1.43em
+
+        .flink-item-desc
+          @extend .limit-one-line
+          display: block
+          padding: 16px 10px 16px 0
+          height: 50px
+          font-size: .93em

themes/butterfly/source/css/_page/homepage.styl

@@ -0,0 +1,150 @@
+#recent-posts
+  & > .recent-post-item:not(:first-child)
+    margin-top: 1rem
+
+  & > .recent-post-item
+    display: flex
+    flex-direction: row
+    align-items: center
+    height: 20em
+    border-radius: 12px 8px 8px 12px
+    background: var(--card-bg)
+    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
+    transition: all .3s
+
+    +maxWidth768()
+      border-radius: 12px 12px 8px 8px
+
+    &:hover
+      box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
+
+      img.post_bg
+        transform: scale(1.1)
+
+    if hexo-config('cover.position') == 'both'
+      .left_radius
+        border-radius: 8px 0 0 8px
+
+      .right_radius
+        order: 2
+        border-radius: 0 8px 8px 0
+    else if hexo-config('cover.position') == 'left'
+      .left_radius
+        border-radius: 8px 0 0 8px
+
+      .right_radius
+        border-radius: 8px 0 0 8px
+    else if hexo-config('cover.position') == 'right'
+      .left_radius
+        order: 2
+        border-radius: 0 8px 8px 0
+
+      .right_radius
+        order: 2
+        border-radius: 0 8px 8px 0
+
+    .post_cover
+      overflow: hidden
+      width: 45%
+      height: 100%
+      -webkit-mask-image: -webkit-radial-gradient(white, black)
+
+      img.post_bg
+        width: 100%
+        height: 100%
+        transition: all .6s
+        object-fit: cover
+
+        &:hover
+          transform: scale(1.1)
+
+    & >.recent-post-info
+      display: inline-block
+      overflow: hidden
+      padding: 0 40px
+      width: 55%
+
+      &.no-cover
+        width: 100%
+
+      & > .article-title
+        @extend .limit-more-line
+        margin-bottom: .3rem
+        color: var(--text-highlight-color)
+        font-size: 1.72em
+        line-height: 1.4
+        transition: all .2s ease-in-out
+        -webkit-line-clamp: 2
+
+        &:hover
+          color: $text-hover
+
+      & > .article-meta-wrap
+        color: $theme-meta-color
+        font-size: 90%
+
+        & > .post-meta-date
+          cursor: default
+
+        .sticky
+          color: $sticky-color
+
+        i
+          margin: 0 .2rem 0 0
+
+        .article-meta-label
+          if hexo-config('post_meta.page.label')
+            padding-right: .2rem
+          else
+            display: none
+
+        .article-meta__separator
+          margin: 0 .3rem
+
+        .article-meta__link
+          margin: 0 .2rem
+
+        .fa-angle-right
+          margin: 0 .2rem
+
+        if hexo-config('post_meta.page.date_format') == 'relative'
+          time
+            display: none
+
+        a
+          color: $theme-meta-color
+
+          &:hover
+            color: $text-hover
+            text-decoration: underline
+
+      & > .content
+        @extend .limit-more-line
+        margin-top: .3rem
+        -webkit-line-clamp: 3
+
++maxWidth768()
+  #recent-posts
+    .recent-post-item
+      flex-direction: column
+      height: auto !important
+
+      .post_cover
+        order: 1 !important
+        width: 100%
+        height: 230px
+        border-radius: 8px 8px 0 0
+
+      .recent-post-info
+        order: 2 !important
+        padding: 1rem 1rem 1.5rem
+        width: 100%
+
+        &.no-cover
+          padding: 1.5rem 1rem
+
+        .article-title
+          font-size: 1.43em
+
+        .content
+          height: auto

themes/butterfly/source/css/_page/tags.styl

@@ -0,0 +1,19 @@
+.tag-cloud
+  &-list
+    a
+      display: inline-block
+      padding: 0 .4rem
+      transition: all .3s
+
+      &:hover
+        color: $text-hover !important
+        transform: scale(1.1)
+
+      +maxWidth768()
+        zoom: .85
+
+  &-title
+    font-size: 2.57em
+
+    +maxWidth768()
+      font-size: 2em

themes/butterfly/source/css/_search/algolia.styl

@@ -0,0 +1,77 @@
+#algolia-search
+  .search-dialog
+    animation: titlescale .5s
+
+    .ais-search-box
+      margin: 0 auto
+      max-width: 100%
+      width: 100%
+
+      input
+        padding: .25rem .7rem
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 2rem
+        background: var(--search-bg)
+        color: var(--search-input-color)
+
+    .ais-hits--item.algolia-hit-item
+      position: relative
+      padding-left: 1.2rem
+
+      &:hover
+        &:before
+          border-color: $pseudo-hover
+
+      &:before
+        $w = .5em
+        position: absolute
+        top: .53em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: .15rem solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
+
+      a
+        display: block
+        color: var(--search-result-title)
+        cursor: pointer
+
+        &:hover
+          color: $search-color
+
+      em
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .ais-pagination.pagination
+      margin: .8rem 0 0
+      padding: 0
+      text-align: center
+
+      .ais-pagination--item
+        margin: 0 .2rem
+        padding: 0
+
+        a
+          display: inline-block
+          min-width: 1.2rem
+          height: 1.2rem
+          text-align: center
+          line-height: 1.2rem
+
+      .ais-pagination--item.current
+        a
+          background: $theme-paginator-color
+          color: #eee
+          cursor: default
+
+    .algolia-logo
+      padding-top: 2px
+      width: 4rem
+      height: 1.5rem

themes/butterfly/source/css/_search/index.styl

@@ -0,0 +1,49 @@
+.search-dialog
+  position: fixed
+  top: 5rem
+  left: 50%
+  z-index: 1001
+  display: none
+  margin-left: -15rem
+  padding: 1rem
+  width: 30rem
+  background: var(--search-bg)
+
+  +maxWidth768()
+    top: 0
+    left: 0
+    margin: 0
+    width: 100%
+    height: 100%
+
+  hr
+    margin: 1rem auto
+
+  span.search-close-button
+    position: absolute
+    top: .8rem
+    right: 1rem
+    color: $grey
+    font-size: 1.4em
+    line-height: 1
+    cursor: pointer
+    transition: color .2s ease-in-out
+
+    &:hover
+      color: $search-color
+
+  &__title
+    padding: 0 0 .7rem
+    color: $search-color
+    font-size: 1.4em
+    line-height: 1
+
+#search-mask
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 1000
+  display: none
+  background: rgba($dark-black, .6)

themes/butterfly/source/css/_search/local-search.styl

@@ -0,0 +1,69 @@
+#local-search
+  .search-dialog
+    animation: titlescale .5s
+
+    .local-search-box
+      margin: 0 auto
+      max-width: 100%
+      width: 100%
+
+      input
+        padding: .25rem .7rem
+        width: 100%
+        outline: none
+        border: 2px solid $search-color
+        border-radius: 2rem
+        background: var(--search-bg)
+        color: var(--search-input-color)
+        -webkit-appearance: none
+
+    .local-search__hit-item
+      position: relative
+      padding-left: 1.2rem
+      line-height: 1.7
+
+      &:hover
+        &:before
+          border-color: $pseudo-hover
+
+      &:before
+        $w = .5em
+        position: absolute
+        top: .45em
+        left: 0
+        width: w = $w
+        height: h = w
+        border: .15rem solid $search-color
+        border-radius: w
+        background: transparent
+        content: ''
+        line-height: h
+        transition: all .2s ease-in-out
+
+      a
+        display: block
+        color: var(--search-result-title)
+        font-weight: 600
+        cursor: pointer
+
+        &:hover
+          color: $search-color
+
+      .search-result
+        margin: 0 0 .4rem
+        word-break: break-all
+
+      .search-keyword
+        color: $search-keyword-highlight
+        font-weight: bold
+
+    .local-search-stats__hr
+      display: none !important
+
+    .search-result-list
+      overflow-y: auto
+      max-height: 10.5rem
+
+      +maxWidth768()
+        padding-bottom: 2rem
+        max-height: 75vh !important

themes/butterfly/source/css/_tags/button.styl

@@ -0,0 +1,58 @@
+#article-container
+  .btn-center
+    margin: 0 0 1rem
+    text-align: center
+
+  .btn-beautify
+    display: inline-block
+    margin: 0 .2rem .3rem
+    padding: 0 1rem
+    background-color: $btn-default-color
+    color: $btn-color
+    line-height: 2
+
+    &:not(.block) + .btn-beautify:not(.block)
+      margin: 0 .2rem 1rem
+
+    &.block
+      display: block
+      margin: 0 0 1rem
+      width: fit-content
+      width: -moz-fit-content
+
+      &.center
+        margin: 0 auto 1rem
+
+      &.right
+        margin: 0 0 1rem auto
+
+    &.larger
+      padding: .3rem 1.3rem
+
+    &:hover
+      text-decoration: none
+
+    for $type in $tagsP-types
+      &.{$type}
+        background-color: lookup('$tagsP-' + $type + '-color')
+
+    &.outline
+      border: 1px solid transparent
+      border-color: $btn-default-color
+      background-color: transparent
+      color: $btn-default-color
+      transition: all .3s
+
+      &.button--animated:before
+        background: $btn-default-color
+
+      &:hover
+        color: white !important
+
+      for $type in $tagsP-types
+        &.{$type}
+          border-color: lookup('$tagsP-' + $type + '-color')
+          color: lookup('$tagsP-' + $type + '-color')
+
+          &.button--animated:before
+            background: lookup('$tagsP-' + $type + '-color')

themes/butterfly/source/css/_tags/gallery.styl

@@ -0,0 +1,104 @@
+figure.gallery-group
+  position: relative
+  float: left
+  overflow: hidden
+  margin: .3rem .2rem
+  width: calc(50% - .4rem)
+  height: 250px
+  border-radius: 8px
+  background: $dark-black
+  -webkit-transform: translate3d(0, 0, 0)
+
+  +maxWidth600()
+    width: calc(100% - .4rem)
+
+  &:hover
+    img
+      opacity: .4
+      transform: translate3d(0, 0, 0)
+
+    .gallery-group-name::after
+      transform: translate3d(0, 0, 0)
+
+    p
+      opacity: 1
+      transform: translate3d(0, 0, 0)
+
+  img
+    position: relative
+    margin: 0 !important
+    max-width: none
+    width: calc(100% + 20px)
+    height: 250px
+    backface-visibility: hidden
+    opacity: .8
+    transition: opacity .35s, transform .35s
+    transform: translate3d(-10px, 0, 0)
+    object-fit: cover
+
+  figcaption
+    position: absolute
+    top: 0
+    left: 0
+    padding: 1.5rem
+    width: 100%
+    height: 100%
+    color: $gallery-color
+    text-transform: uppercase
+    backface-visibility: hidden
+
+    & > a
+      position: absolute
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      z-index: 1000
+      opacity: 0
+
+  p
+    @extend .limit-more-line
+    margin: 0
+    padding: .4rem 0 0
+    letter-spacing: 1px
+    font-size: 1.1em
+    line-height: 1.5
+    opacity: 0
+    transition: opacity .35s, transform .35s
+    transform: translate3d(100%, 0, 0)
+    -webkit-line-clamp: 4
+
+  .gallery-group-name
+    @extend .limit-more-line
+    position: relative
+    margin: 0
+    padding: .4rem 0
+    font-weight: bold
+    font-size: 1.65em
+    line-height: 1.5
+    -webkit-line-clamp: 2
+
+    &:after
+      position: absolute
+      bottom: 0
+      left: 0
+      width: 100%
+      height: 2px
+      background: $gallery-color
+      content: ''
+      transition: transform .35s
+      transform: translate3d(-100%, 0, 0)
+
+.gallery-group-main
+  overflow: auto
+  padding: 0 0 .8rem
+
+.justified-gallery
+  margin: 0 0 .8rem
+
+  img
+    opacity: 0
+
+  .fancybox
+    width: auto
+    text-align: inherit

themes/butterfly/source/css/_tags/hexo.styl

@@ -0,0 +1,30 @@
+// pullquote
+blockquote
+  &.pullquote
+    position: relative
+    max-width: 45%
+    font-size: 110%
+
+    &.left
+      float: left
+      margin: 1em .5em 0 0
+
+    &.right
+      float: right
+      margin: 1em 0 0 .5rem
+
+// hexo tag video
+.video-container
+  position: relative
+  overflow: hidden
+  margin-bottom: .8rem
+  padding-top: 56.25%
+  height: 0
+
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    margin-top: 0
+    width: 100%
+    height: 100%

themes/butterfly/source/css/_tags/hide.styl

@@ -0,0 +1,46 @@
+// tag-hide
+.hide-inline,
+.hide-block
+  & > .hide-button
+    display: inline-block
+    padding: .3rem 1rem
+    background: $tag-hide-bg
+    color: var(--white)
+
+    &.open
+      display: none
+
+  & > .hide-content
+    display: none
+
+.hide-inline
+  & > .hide-button
+    margin: 0 .3rem
+
+  & > .hide-content
+    margin: 0 .3rem
+
+.hide-block
+  margin: 0 0 .8rem
+
+.hide-toggle
+  margin-bottom: 1rem
+  border: 1px solid $tag-hide-toggle-bg
+
+  & > .hide-button
+    padding: .3rem .5rem
+    background: $tag-hide-toggle-bg
+    color: #1F2D3D
+    cursor: pointer
+
+    & > i
+      font-size: 1.2em
+      transition: all .3s
+
+    &.open
+      i
+        transform: rotate(90deg)
+
+  & > .hide-content
+    display: none
+    margin: 1.5rem 1.2rem

themes/butterfly/source/css/_tags/note.styl

@@ -0,0 +1,121 @@
+.note
+  $note-icons = hexo-config('note.icons')
+  position: relative
+  margin: 0 0 1rem
+  padding: 15px
+
+  if hexo-config('note.border_radius') is a 'unit'
+    border-radius: unit(hexo-config('note.border_radius'), px)
+
+  &.icon
+    padding-left: 2.25rem
+
+  & > .note-icon
+    position: absolute
+    top: calc(50% - .4rem)
+    left: .7rem
+    font-size: larger
+
+  for $type in $tagsP-types
+    &.{$type}
+      &:not(.disabled)
+        border-left-color: lookup('$tagsP-' + $type + '-color') !important
+
+        &.modern
+          border-left-color: transparent !important
+          color: lookup('$tagsP-' + $type + '-color')
+
+        &:not(.simple)
+          background: lighten(lookup('$tagsP-' + $type + '-color'), 85%) !important
+
+      & > .note-icon
+        color: lookup('$tagsP-' + $type + '-color')
+
+  &.simple
+    border: 1px solid #EEEEEE
+    border-left-width: 5px
+
+  &.modern
+    border: 1px solid transparent !important
+    background-color: #f5f5f5
+    color: $font-black
+
+  &.flat
+    border: initial
+    border-left: 5px solid #EEEEEE
+    background-color: lighten(#EEEEEE, 65%)
+    color: $font-black
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    if $note-icons
+      margin-top: 3px
+    else
+      margin-top: 0
+
+    margin-bottom: 0
+    padding-top: 0 !important
+    border-bottom: initial
+
+  p,
+  ul,
+  ol,
+  table,
+  pre,
+  blockquote,
+  img
+    &:first-child
+      margin-top: 0 !important
+
+    &:last-child
+      margin-bottom: 0 !important
+
+  if $note-icons
+    &:not(.no-icon)
+      padding-left: 2.25rem
+
+      &::before
+        position: absolute
+        top: calc(50% - .8rem)
+        left: .7rem
+        font-size: larger
+        @extend .fontawesomeIcon
+
+  for $type in $note-types
+    &.{$type}
+      &.flat
+        background: lookup('$note-' + $type + '-bg')
+
+      &.modern
+        border-color: lookup('$note-modern-' + $type + '-border')
+        background: lookup('$note-modern-' + $type + '-bg')
+        color: lookup('$note-modern-' + $type + '-text')
+
+        a
+          &:not(.btn)
+            color: lookup('$note-modern-' + $type + '-text')
+
+            &:hover
+              color: lookup('$note-modern-' + $type + '-hover')
+
+      &:not(.modern)
+        border-left-color: lookup('$note-' + $type + '-border')
+
+        h2,
+        h3,
+        h4,
+        h5,
+        h6
+          color: lookup('$note-' + $type + '-text')
+
+      if $note-icons
+        &:not(.no-icon)
+          &::before
+            content: lookup('$note-' + $type + '-icon')
+
+          &:not(.modern)
+            &::before
+              color: lookup('$note-' + $type + '-text')

themes/butterfly/source/css/_tags/tabs.styl

@@ -0,0 +1,74 @@
+
+#article-container
+  .tabs
+    position: relative
+    margin: 0 0 1rem
+    border-right: 1px solid var(--tab-border-color)
+    border-bottom: 1px solid var(--tab-border-color)
+    border-left: 1px solid var(--tab-border-color)
+
+    > .nav-tabs
+      display: flex
+      flex-wrap: wrap
+      margin: 0
+      padding: 0
+      background: var(--tab-botton-bg)
+
+      > .tab
+        margin: 0
+        padding: 0
+        list-style: none
+
+        +maxWidth768()
+          flex-grow: 1
+
+        button
+          display: block
+          padding: .5rem 1rem
+          width: 100%
+          border-top: 2px solid var(--tab-border-color)
+          background: var(--tab-botton-bg)
+          color: var(--tab-botton-color)
+          line-height: 2
+          transition: all .4s
+
+          i
+            width: 1.5em
+
+        &.active
+          button
+            border-top: 2px solid $tab-active-border-color
+            background: var(--tab-button-active-bg)
+            cursor: default
+
+        &:not(.active)
+          button
+            &:hover
+              border-top: 2px solid var(--tab-button-hover-bg)
+              background: var(--tab-button-hover-bg)
+
+    > .tab-contents
+      .tab-item-content
+        position: relative
+        display: none
+        padding: 1.8rem 1.2rem
+
+        +maxWidth768()
+          padding: 1.2rem .7rem
+
+        &.active
+          display: block
+          animation: tabshow .5s
+
+    .tab-to-top
+      position: relative
+      display: block
+      margin: 0 0 0 auto
+      color: $tab-to-top-color
+
+@keyframes tabshow
+  0%
+    transform: translateY(15px)
+
+  100%
+    transform: translateY(0)

themes/butterfly/source/css/_third-party/normalize.min.css

@@ -0,0 +1,180 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%
+}
+
+body {
+  margin: 0
+}
+
+main {
+  display: block
+}
+
+h1 {
+  font-size: 2em;
+  margin: .67em 0
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em
+}
+
+a {
+  background-color: transparent
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted
+}
+
+b,
+strong {
+  font-weight: bolder
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em
+}
+
+small {
+  font-size: 80%
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline
+}
+
+sub {
+  bottom: -.25em
+}
+
+sup {
+  top: -.5em
+}
+
+img {
+  border-style: none
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0
+}
+
+button,
+input {
+  overflow: visible
+}
+
+button,
+select {
+  text-transform: none
+}
+
+[type=button],
+[type=reset],
+[type=submit],
+button {
+  -webkit-appearance: button
+}
+
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+  border-style: none;
+  padding: 0
+}
+
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+  outline: 1px dotted ButtonText
+}
+
+fieldset {
+  padding: .35em .75em .625em
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal
+}
+
+progress {
+  vertical-align: baseline
+}
+
+textarea {
+  overflow: auto
+}
+
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box;
+  padding: 0
+}
+
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit
+}
+
+details {
+  display: block
+}
+
+summary {
+  display: list-item
+}
+
+template {
+  display: none
+}
+
+[hidden] {
+  display: none
+}

themes/butterfly/source/css/index.styl

@@ -0,0 +1,19 @@
+@import 'nib'
+@import '_third-party/normalize.min.css'
+// project
+@import 'var'
+@import '_global/*'
+@import '_highlight/highlight'
+@import '_page/*'
+@import '_layout/*'
+@import '_tags/*'
+@import '_mode/*'
+
+// search
+if hexo-config('algolia_search.enable')
+  @import '_search/index'
+  @import '_search/algolia'
+
+if hexo-config('local_search') && hexo-config('local_search.enable')
+  @import '_search/index'
+  @import '_search/local-search'

themes/butterfly/source/css/var.styl

@@ -0,0 +1,178 @@
+// color
+$bright-blue = #49B1F5
+$strong-cyan = #00c4b6
+$light-orange = #FF7242
+$light-red = #F47466
+$themeColorEnable = hexo-config('theme_color') && hexo-config('theme_color.enable')
+$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
+$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
+$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
+$theme-link-color = $themeColorEnable && hexo-config('theme_color.link_color') ? convert(hexo-config('theme_color.link_color')) : $bright-blue
+$theme-hr-color = $themeColorEnable && hexo-config('theme_color.hr_color') ? convert(hexo-config('theme_color.hr_color')) : $bright-blue
+$code-foreground = $themeColorEnable && hexo-config('theme_color.code_foreground') ? convert(hexo-config('theme_color.code_foreground')) : $light-red
+$code-background = $themeColorEnable && hexo-config('theme_color.code_background') ? convert(hexo-config('theme_color.code_background')) : rgba(27, 31, 35, .05)
+$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $strong-cyan
+// font
+$dafault-font-family = -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif
+$dafault-code-font = consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif
+$font-family = hexo-config('font.font-family') ? unquote(hexo-config('font.font-family')) : $dafault-font-family
+$code-font-family = hexo-config('font.code-font-family') ? unquote(hexo-config('font.code-font-family')) : $dafault-code-font
+$site-name-font = hexo-config('blog_title_font.font-family') && unquote(hexo-config('blog_title_font.font-family'))
+// hr
+$hrEnable = hexo-config('hr_icon') && hexo-config('hr_icon.enable')
+$hr-icon = $hrEnable && hexo-config('hr_icon.icon') ? hexo-config('hr_icon.icon') : '\f0c4'
+$hr-icon-top = $hrEnable && hexo-config('hr_icon.icon-top') ? convert(hexo-config('hr_icon.icon-top')) : -10px
+// page beatutify
+$beautifyEnable = hexo-config('beautify.enable')
+$title-prefix-icon = $beautifyEnable ? hexo-config('beautify.title-prefix-icon') : '\f0c1'
+$title-prefix-icon-color = $beautifyEnable ? convert(hexo-config('beautify.title-prefix-icon-color')) : $light-red
+// Global Variables
+$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 14px
+$code-font-size = hexo-config('font.code-font-size') ? convert(hexo-config('font.code-font-size')) : $font-size
+$font-color = #1F2D3D
+$rem = 20px
+$text-line-height = 2
+$web-bg = hexo-config('background') && unquote(hexo-config('background'))
+$index_top_img_height = hexo-config('index_top_img_height') ? convert(hexo-config('index_top_img_height')) : 100vh
+$index_site_info_top = hexo-config('index_site_info_top') ? convert(hexo-config('index_site_info_top')) : 43%
+// Global color & SVG
+$light-blue = $theme-color
+$dark-black = #000000
+$light-grey = #EEEEEE
+$grey = #858585
+$white = #FFFFFF
+$whitesmoke = #f5f5f5
+$font-black = #4C4948
+$card-bg = $white
+$text-highlight-color = $font-color
+$text-hover = $theme-color
+$text-bg-hover = $theme-color
+// code
+$line-height-code-block = 1.6
+$blockquote-color = #6a737d
+$blockquote-padding-color = $themeColorEnable && hexo-config('theme_color.blockquote_padding_color') ? convert(hexo-config('theme_color.blockquote_padding_color')) : #49B1F5
+$blockquote-background-color = $themeColorEnable && hexo-config('theme_color.blockquote_background_color') ? alpha(convert(hexo-config('theme_color.blockquote_background_color')), .1) : alpha($blockquote-padding-color, .1)
+// page
+$body-bg = #fff
+$a-link-color = #99a9bf
+$sticky-color = $light-orange
+$theme-meta-color = $themeColorEnable && hexo-config('theme_color.meta_color') ? convert(hexo-config('theme_color.meta_color')) : #858585
+// sidebar
+$sidebar-background = #f6f8fa
+$sidebar-width = 300px
+// aside
+$toc-link-color = #666261
+$toc-mobile-width = 300px
+$toc-active-color = #fff
+// Button
+$button-color = #fff
+$button-hover-color = $themeColorEnable && hexo-config('theme_color.button_hover') ? convert(hexo-config('theme_color.button_hover')) : $light-orange
+$button-bg = $theme-color
+$pseudo-hover = $button-hover-color
+// table
+$table-thead-bg = #99a9bf
+// reward
+$reward-pop-up-bg = #f5f5f5
+$reward-pop-up-color = #858585
+// search
+$search-bg = #f6f8fa
+$search-input-color = $font-black
+$search-color = $theme-color
+$search-keyword-highlight = #F47466
+$search-result-title = $font-black
+// comments
+$comments-switch-first-text = $bright-blue
+$comments-switch-second-text = $light-orange
+$comments-switch-round = #fff
+$comments-switch-bg = #f6f8fa
+// noticeOutdate
+$noticeOutdate-bg = #ffe6e6
+$noticeOutdate-color = #ff6666
+$noticeOutdate-border = #ff8080
+// gallery
+$gallery-color = #fff
+// tag-hide
+$tag-hide-bg = $theme-color
+$tag-hide-toggle-bg = #f0f0f0
+// preloader
+$preloader-bg = #37474f
+$preloader-word-color = #fff
+// rightside
+$rightside-bottom = hexo-config('rightside-bottom') ? convert(hexo-config('rightside-bottom')) : 40px
+// fireworks
+$fireworks-zIndex = hexo-config('fireworks.zIndex') ? hexo-config('fireworks.zIndex') : 99999
+// Tag Plugins - Note
+hexo-config('note.light_bg_offset') is a 'unit' ? ($lbg = unit(hexo-config('note.light_bg_offset'), '%')) : ($lbg = 0)
+$note-types = 'default' 'primary' 'info' 'success' 'warning' 'danger'
+// Default
+$note-default-border = #777
+$note-default-bg = lighten(spin($note-default-border, 0), 94% + $lbg)
+$note-default-text = $note-default-border
+$note-default-icon = '\f0a9'
+$note-modern-default-border = #e1e1e1
+$note-modern-default-bg = lighten(spin($note-modern-default-border, 10), 60% + ($lbg * 4))
+$note-modern-default-text = #666
+$note-modern-default-hover = darken(spin($note-modern-default-text, -10), 32%)
+// Primary
+$note-primary-border = #6f42c1
+$note-primary-bg = lighten(spin($note-primary-border, 10), 92% + $lbg)
+$note-primary-text = $note-primary-border
+$note-primary-icon = '\f055'
+$note-modern-primary-border = #e1c2ff
+$note-modern-primary-bg = lighten(spin($note-modern-primary-border, 10), 40% + ($lbg * 4))
+$note-modern-primary-text = #6f42c1
+$note-modern-primary-hover = darken(spin($note-modern-primary-text, -10), 22%)
+// Info
+$note-info-border = #428bca
+$note-info-bg = lighten(spin($note-info-border, -10), 91% + $lbg)
+$note-info-text = $note-info-border
+$note-info-icon = '\f05a'
+$note-modern-info-border = #b3e5ef
+$note-modern-info-bg = lighten(spin($note-modern-info-border, 10), 50% + ($lbg * 4))
+$note-modern-info-text = #31708f
+$note-modern-info-hover = darken(spin($note-modern-info-text, -10), 32%)
+// Success
+$note-success-border = #5cb85c
+$note-success-bg = lighten(spin($note-success-border, 10), 90% + $lbg)
+$note-success-text = $note-success-border
+$note-success-icon = '\f058'
+$note-modern-success-border = #d0e6be
+$note-modern-success-bg = lighten(spin($note-modern-success-border, 10), 40% + ($lbg * 4))
+$note-modern-success-text = #3c763d
+$note-modern-success-hover = darken(spin($note-modern-success-text, -10), 27%)
+// Warning
+$note-warning-border = #f0ad4e
+$note-warning-bg = lighten(spin($note-warning-border, 10), 88% + $lbg)
+$note-warning-text = $note-warning-border
+$note-warning-icon = '\f06a'
+$note-modern-warning-border = #fae4cd
+$note-modern-warning-bg = lighten(spin($note-modern-warning-border, 10), 43% + ($lbg * 4))
+$note-modern-warning-text = #8a6d3b
+$note-modern-warning-hover = darken(spin($note-modern-warning-text, -10), 18%)
+// Danger
+$note-danger-border = #d9534f
+$note-danger-bg = lighten(spin($note-danger-border, -10), 92% + $lbg)
+$note-danger-text = $note-danger-border
+$note-danger-icon = '\f056'
+$note-modern-danger-border = #ebcdd2
+$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
+$note-modern-danger-text = #a94442
+$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
+// Tag Plugins - Button/note
+$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
+$btn-color = #fff
+$btn-default-color = #777
+$tagsP-blue-color = #428bca
+$tagsP-pink-color = #FF69B4
+$tagsP-red-color = #FF0000
+$tagsP-orange-color = #FF8C00
+$tagsP-purple-color = #6f42c1
+$tagsP-green-color = #5cb85c
+// Tag Plugins - Tab
+$tab-border-color = #f0f0f0
+$tab-botton-bg = #f0f0f0
+$tab-botton-color = $font-color
+$tab-button-hover-bg = darken($tab-border-color, 8)
+$tab-active-border-color = $theme-color
+$tab-button-active-bg = $card-bg
+$tab-to-top-color = #99a9bf