add theme

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

@@ -0,0 +1,280 @@
+.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-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free'
+  text-rendering: auto
+  -webkit-font-smoothing: antialiased
+
+addBorderRadius(x = 6, hide = false)
+  if hexo-config('rounded_corners_ui')
+    border-radius: unit(x, 'px')
+
+    if hide
+      overflow: hidden
+
+// card hover
+.cardHover
+  background: var(--card-bg)
+  box-shadow: var(--card-box-shadow)
+  transition: all .3s
+  addBorderRadius(8)
+
+  &:hover
+    box-shadow: var(--card-hover-box-shadow)
+
+.imgHover
+  width: 100%
+  height: 100%
+  transition: filter 375ms ease-in .2s, transform .6s
+  object-fit: cover
+
+  &:hover
+    transform: scale(1.1)
+
+.postImgHover
+  &:hover
+    .cover
+      opacity: .5
+      transform: scale(1.1)
+
+  .cover
+    width: 100%
+    height: 100%
+    opacity: .4
+    transition: all .6s, filter 375ms ease-in .2s
+    object-fit: cover
+
+.list-beauty
+  list-style: none
+
+  li
+    position: relative
+    padding: .12em .4em .12em 1.4em
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      position: absolute
+      top: .67em
+      left: 0
+      width: w = .43em
+      height: h = w
+      border: .5 * w solid $light-blue
+      border-radius: w
+      background: transparent
+      content: ''
+      cursor: pointer
+      transition: all .3s ease-out
+
+.custom-hr
+  position: relative
+  margin: 40px 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
+
+.verticalCenter
+  position: absolute
+  top: 50%
+  width: 100%
+  transform: translate(0, -50%)
+
+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}
+
+minWidth1024()
+  @media screen and (min-width: 1024px)
+    {block}
+
+maxWidth900()
+  @media screen and (max-width: 900px)
+    {block}
+
+minWidth901()
+  @media screen and (min-width: 901px)
+    {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: bottom-top 1s
+
+  #page-header:not(.full_page),
+  #nav.show
+    animation: header-effect 1s
+
+  #site-title,
+  #site-subtitle
+    animation: titleScale 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 / 5s)
+
+.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%
+    opacity: .4
+    transform: translate(0, 0)
+
+  50%
+    opacity: 1
+    transform: translate(0, -16px)
+
+  100%
+    opacity: .4
+    transform: translate(0, 0)
+
+@keyframes header-effect
+  0%
+    transform: translateY(-35px)
+
+  100%
+    transform: translateY(0)
+
+@keyframes bottom-top
+  0%
+    transform: translateY(35px)
+
+  100%
+    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 to_hide
+  0%
+    opacity: 1
+
+  100%
+    opacity: 0
+
+@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 sidebarItem
+  0%
+    transform: translateX(200px)
+
+  100%
+    transform: translateX(0)

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

@@ -0,0 +1,228 @@
+:root
+  --global-font-size: $font-size
+  --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-a-color: $search-a-color
+  --preloader-bg: $preloader-bg
+  --preloader-color: $preloader-word-color
+  --tab-border-color: $tab-border-color
+  --tab-button-bg: $tab-button-bg
+  --tab-button-color: $tab-button-color
+  --tab-button-hover-bg: $tab-button-hover-bg
+  --tab-button-active-bg: $tab-button-active-bg
+  --card-bg: $card-bg
+  --card-meta: $theme-meta-color
+  --sidebar-bg: $sidebar-background
+  --sidebar-menu-bg: $white
+  --btn-hover-color: $button-hover-color
+  --btn-color: $button-color
+  --btn-bg: $button-bg
+  --text-bg-hover: rgba($text-bg-hover, .7)
+  --light-grey: $light-grey
+  --dark-grey: $dark-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
+  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
+  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
+  --pseudo-hover: $pseudo-hover
+  --headline-presudo: #a0a0a0
+  --scrollbar-color: $scrollbar-color
+  --default-bg-color: $theme-color
+  --zoom-bg: #fff
+  --mark-bg: alpha($dark-black, .3)
+
+body
+  position: relative
+  overflow-y: scroll
+  min-height: 100%
+  background: var(--global-bg)
+  color: var(--font-color)
+  font-size: var(--global-font-size)
+  font-family: $font-family
+  line-height: $text-line-height
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+  scroll-behavior: smooth
+
+  if !hexo-config('copy.enable')
+    user-select: none
+    -webkit-user-select: none
+
+// scrollbar - firefox
+@-moz-document url-prefix()
+  *
+    scrollbar-width: thin
+    scrollbar-color: var(--scrollbar-color) transparent
+
+// scrollbar - chrome/safari
+*::-webkit-scrollbar
+  width: 5px
+  height: 5px
+
+*::-webkit-scrollbar-thumb
+  background: var(--scrollbar-color)
+
+*::-webkit-scrollbar-track
+  background-color: transparent
+
+input::placeholder
+  color: var(--font-color)
+
+if hexo-config('background')
+  #web_bg
+    position: fixed
+    z-index: -999
+    width: 100%
+    height: 100%
+    background-attachment: local
+    background-position: center
+    background-size: cover
+    background-repeat: no-repeat
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  position: relative
+  margin: 20px 0 14px
+  color: var(--text-highlight-color)
+  font-weight: bold
+
+  code
+    font-size: inherit !important
+
+*
+  box-sizing: border-box
+
+.table-wrap
+  overflow-x: scroll
+  margin: 0 0 20px
+
+  if hexo-config('rounded_corners_ui')
+    $borderRadius = 5px
+    border-radius: $borderRadius
+
+    table
+      border-radius: $borderRadius
+
+      thead > tr:first-child
+        th:first-child
+          border-top-left-radius: $borderRadius
+
+        th:last-child
+          border-top-right-radius: $borderRadius
+
+      tbody > tr:last-child
+        td:first-child
+          border-bottom-left-radius: $borderRadius
+
+        td:last-child
+          border-bottom-right-radius: $borderRadius
+
+table
+  display: table
+  width: 100%
+  border-spacing: 0
+  border-collapse: separate
+  border-top: 1px solid var(--light-grey)
+  border-left: 1px solid var(--light-grey)
+  empty-cells: show
+
+  thead
+    background: alpha($table-thead-bg, 10%)
+
+  th,
+  td
+    padding: 6px 12px
+    border: 1px solid var(--light-grey)
+    border-top: none
+    border-left: none
+    vertical-align: middle
+
+*::selection
+  background: $theme-text-selection-color
+  color: #F7F7F7
+
+button
+  padding: 0
+  outline: 0
+  border: none
+  background: none
+  cursor: pointer
+  touch-action: manipulation
+
+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
+
+.text-center
+  text-align: center
+
+.text-right
+  text-align: right
+
+img
+  &[src=''],
+  &:not([src])
+    opacity: 0
+
+// lazyload blur
+if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
+  img
+    &[data-lazy-src]:not(.loaded)
+      filter: blur(8px) brightness(1)
+
+    &[data-lazy-src].error
+      filter: none
+
+.img-alt
+  margin: -10px 0 10px
+  color: #858585
+
+  &:hover
+    text-decoration: none !important
+
+blockquote
+  margin: 0 0 20px
+  padding: 7px 15px
+  border-left: 4px solid $blockquote-padding-color
+  background-color: var(--blockquote-bg)
+  color: var(--blockquote-color)
+  addBorderRadius()
+
+  footer
+    cite
+      &:before
+        padding: 0 5px
+        content: '—'
+
+  & > :last-child
+    margin-bottom: 0 !important
+
+.fa-fw
+  width: 1.25em
+  text-align: center