add theme

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

@@ -0,0 +1,66 @@
+if hexo-config('error_404.enable')
+  .type-404
+    .error-content
+      @extend .cardHover
+      overflow: hidden
+      margin: 0 20px
+      height: 360px
+
+      +maxWidth768()
+        margin: 0
+        height: 500px
+
+      .error-img
+        display: inline-block
+        overflow: hidden
+        width: 50%
+        height: 100%
+
+        +maxWidth768()
+          width: 100%
+          height: 45%
+
+        img
+          @extend .imgHover
+          background-color: $theme-color
+
+      .error-info
+        display: inline-flex
+        flex-direction: column
+        justify-content: center
+        align-content: center
+        width: 50%
+        height: 100%
+        vertical-align: top
+        text-align: center
+
+        if $site-name-font
+          font-family: $site-name-font
+
+        +maxWidth768()
+          width: 100%
+          height: 55%
+
+        .error_title
+          margin-top: -.6em
+          font-size: 9em
+
+          +maxWidth768()
+            font-size: 8em
+
+        .error_subtitle
+          @extend .limit-more-line
+          margin-top: -3em
+          word-break: break-word
+          font-size: 1.6em
+          -webkit-line-clamp: 2
+
+    .nc
+      margin-top: 5%
+      padding: 0 20px
+
+    #footer
+      display: none
+
+    & + #rightside
+      display: none

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

@@ -0,0 +1,115 @@
+.article-sort
+  margin-left: 10px
+  padding-left: 20px
+  border-left: 2px solid lighten($light-blue, 20)
+
+  &-title
+    position: relative
+    margin-left: 10px
+    padding-bottom: 20px
+    padding-left: 20px
+    font-size: 1.72em
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      position: absolute
+      top: calc(((100% - 36px) / 2))
+      left: -9px
+      z-index: 1
+      width: w = 10px
+      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: 2px
+      height: 1.5em
+      background: lighten($light-blue, 20)
+      content: ''
+
+  &-item
+    position: relative
+    display: flex
+    align-items: center
+    margin: 0 0 20px 10px
+    transition: all .2s ease-in-out
+
+    &:hover
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &:before
+      $w = 6px
+      position: absolute
+      left: calc(-20px - 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
+      margin-bottom: 10px
+
+      &:hover
+        &:before
+          border-color: $light-blue
+
+      &:before
+        border-color: var(--pseudo-hover)
+
+    &-time
+      color: var(--card-meta)
+      font-size: .85em
+
+      time
+        padding-left: 6px
+        cursor: default
+
+    &-title
+      @extend .limit-more-line
+      color: var(--font-color)
+      font-size: 1.05em
+      transition: all .3s
+      -webkit-line-clamp: 2
+
+      &:hover
+        color: $text-hover
+        transform: translateX(10px)
+
+    &-img
+      overflow: hidden
+      width: 100px
+      height: 70px
+      addBorderRadius()
+
+      +maxWidth768()
+        width: 70px
+        height: 70px
+
+      :first-child
+        @extend .imgHover
+
+    &-info
+      flex: 1
+      padding: 0 16px

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

@@ -0,0 +1,37 @@
+.category-lists
+  .category-title
+    font-size: 2.57em
+
+    +maxWidth768()
+      font-size: 2em
+
+  .category-list
+    margin-bottom: 0
+
+    a
+      color: var(--font-color)
+
+      &:hover
+        color: $text-hover
+
+    .category-list-count
+      margin-left: 8px
+      color: var(--card-meta)
+
+      &:before
+        content: '('
+
+      &:after
+        content: ')'
+
+  ul
+    padding: 0 0 0 20px
+    @extend .list-beauty
+
+    ul
+      padding-left: 4px
+
+    li
+      position: relative
+      margin: 6px 0
+      padding: .12em .4em .12em 1.4em

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

@@ -0,0 +1,60 @@
+#body-wrap
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+
+.layout
+  display: flex
+  flex: 1 auto
+  margin: 0 auto
+  padding: 40px 15px
+  max-width: 1200px
+  width: 100%
+
+  +maxWidth900()
+    flex-direction: column
+
+  +maxWidth768()
+    padding: 20px 5px
+
+  +minWidth2000()
+    max-width: 70%
+
+  & > div:first-child:not(.nc)
+    @extend .cardHover
+    align-self: flex-start
+    padding: 50px 40px
+
+    +maxWidth768()
+      padding: 36px 14px
+
+  & > div:first-child
+    width: 74%
+    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
+
+// for apple device
+.apple
+  #page-header.full_page
+    background-attachment: scroll !important
+
+  .recent-post-item,
+  .avatar-img,
+  .flink-item-icon
+    transform: translateZ(0)

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

@@ -0,0 +1,87 @@
+.container
+  .flink
+    margin-bottom: 20px
+
+    .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
+        line-height: 17px
+        -webkit-transform: translateZ(0)
+        addBorderRadius(8)
+
+        +maxWidth1024()
+          width: calc(50% - 15px) !important
+
+        +maxWidth600()
+          width: calc(100% - 15px) !important
+
+        &:hover
+          .flink-item-icon
+            margin-left: -10px
+            width: 0
+
+        &: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
+
+          .flink-item-icon
+            float: left
+            overflow: hidden
+            margin: 15px 10px
+            width: 60px
+            height: 60px
+            border-radius: 7px
+            transition: width .3s ease-out
+
+            img
+              width: 100%
+              height: 100%
+              transition: filter 375ms ease-in .2s, transform .3s
+              object-fit: cover
+
+          .img-alt
+            display: none
+
+    .flink-item-name
+      @extend .limit-one-line
+      padding: 16px 10px 0 0
+      height: 40px
+      font-weight: bold
+      font-size: 1.43em
+
+    .flink-item-desc
+      @extend .limit-one-line
+      padding: 16px 10px 16px 0
+      height: 50px
+      font-size: .93em
+
+    .flink-name
+      margin-bottom: 5px
+      font-weight: bold
+      font-size: 1.5em

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

@@ -0,0 +1,175 @@
+$indexLayout = hexo-config('index_layout') || 1
+$indexEnable = hexo-config('cover.index_enable')
+
+#recent-posts
+  .recent-post-item
+    @extend .cardHover
+    position: relative
+    overflow: hidden
+    margin-bottom: 20px
+
+    if $indexLayout == 6 || ($indexLayout == 7)
+      display: inline-block
+      width: calc(100% / 2 - 8px)
+      vertical-align: top
+
+      +maxWidth768()
+        width: 100%
+
+      +minWidth2000()
+        width: calc(100% / 3 - 8px)
+
+    if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
+      display: flex
+      flex-direction: row
+      align-items: center
+      height: 16.8em
+
+      +maxWidth768()
+        flex-direction: column
+        height: auto
+
+      +minWidth2000()
+        height: 18.8em
+
+    &:hover
+      .post-bg
+        transform: scale(1.1)
+
+    &.ads-wrap
+      display: block !important
+      height: auto !important
+
+    .post_cover
+      overflow: hidden
+
+      if ($indexLayout != 5 && ($indexLayout != 7))
+        +maxWidth768()
+          width: 100%
+          height: 230px
+
+      if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
+        width: 42%
+        height: 100%
+
+        &.right
+          order: 1
+
+          +maxWidth768()
+            order: 0
+
+      if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
+        width: 100%
+
+        if ($indexLayout == 5 || ($indexLayout == 7))
+          height: 17em
+        else
+          height: 230px
+
+      if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
+        &:before
+          position: absolute
+          z-index: 1
+          width: 100%
+          height: 100%
+          background-color: rgba(18, 18, 18, .4)
+          content: ''
+          backdrop-filter: blur(3px)
+
+      .post-bg
+        z-index: -4
+        @extend .imgHover
+
+    & >.recent-post-info
+      +maxWidth768()
+        padding: 20px 20px 30px
+        width: 100%
+
+      if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
+        padding: 0 40px
+        width: 58%
+
+      if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
+        padding: 30px 30px 25px
+
+      if ($indexLayout == 5 || ($indexLayout == 7)) && $indexEnable
+        &:not(.no-cover)
+          position: absolute
+          top: 50%
+          z-index: 2
+          width: 100%
+          color: var(--text-highlight-color)
+          transform: translateY(-50%)
+          --text-highlight-color: rgba(255, 255, 255, 1)
+          --card-meta: rgba(255, 255, 255, .7)
+
+      &.no-cover
+        +maxWidth768()
+          padding: 30px 20px
+
+        if $indexLayout == 1 || ($indexLayout == 2 || ($indexLayout == 3))
+          width: 100%
+
+        if $indexLayout == 4 || ($indexLayout == 5 || ($indexLayout == 6 || ($indexLayout == 7)))
+          padding: 35px 30px
+
+      & > .article-title
+        @extend .limit-more-line
+        color: var(--text-highlight-color)
+        font-size: 1.55em
+        line-height: 1.4
+        transition: all .2s ease-in-out
+        -webkit-line-clamp: 2
+
+        .sticky
+          margin-right: 10px
+          color: $sticky-color
+          transform: rotate(45deg)
+
+        +maxWidth768()
+          font-size: 1.43em
+
+        &:hover
+          color: $text-hover
+
+      & > .article-meta-wrap
+        margin: 6px 0
+        color: var(--card-meta)
+        font-size: .9em
+
+        & > .post-meta-date
+          cursor: default
+
+        i
+          margin: 0 4px 0 0
+
+        .fa-spinner
+          margin: 0
+
+        .article-meta-label
+          if hexo-config('post_meta.page.label')
+            padding-right: 4px
+          else
+            display: none
+
+        .article-meta-separator
+          margin: 0 6px
+
+        .article-meta-link
+          margin: 0 4px
+
+        if hexo-config('post_meta.page.date_format') == 'relative'
+          time
+            display: none
+
+        a
+          color: var(--card-meta)
+
+          &:hover
+            color: $text-hover
+            text-decoration: underline
+
+      & > .content
+        @extend .limit-more-line
+        -webkit-line-clamp: 2
+        word-break: break-word

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

@@ -0,0 +1,78 @@
+#rightMenu
+  display: none
+  position: fixed
+  width: 160px
+  height: fit-content
+  top: 10%
+  left: 10%
+  background-color: var(--icat-maskbgdeep)
+  backdrop-filter: blur(20px) saturate(1.5)
+  transform: translateZ(0)
+  border: var(--style-border)
+  border-radius: 8px
+  z-index: 99994
+  box-shadow: var(--icat-shadow-black)
+  transition: border 0.3s
+  user-select: none
+
+  &:hover
+    border: var(--style-border-hover-always)
+
+  .rightMenu-group
+    padding: 6px 6px
+
+    &:not(:nth-last-child(1))
+      border-bottom: 1px solid var(--icat-card-border)
+
+    &.rightMenu-small
+      display: flex
+      justify-content: space-between
+
+    &.rightMenu-line
+      .rightMenu-item
+        display: flex
+        height: 40px
+        padding: 0 4px
+        align-items: center
+        transition: .6s
+
+    .rightMenu-item
+      height: 30px
+      border-radius: 6px
+      transition: .3s
+      color: var(--font-color)
+      cursor: pointer
+
+      *
+        height: 40px
+        line-height: 40px
+
+      &:not(:last-child)
+        margin-bottom: 4px
+
+      &:hover
+        background-color: var(--icat-blue)
+        color: var(--icat-white)
+
+      i
+        display: inline-block
+        text-align: center
+        line-height: 30px
+        width: 30px
+        height: 30px
+        padding: 0 5px
+
+#rightMenu .rightMenu-group .rightMenu-item .icat-refresh,
+#rightMenu .rightMenu-group .rightMenu-item .icat-changing-over,
+#rightMenu .rightMenu-group .rightMenu-item .icat-simple-complex 
+  font-weight: 900
+
+#rightMenu-mask
+  position: fixed
+  width: 100vw
+  height: 100vh
+  background: 0 0
+  top: 0
+  left: 0
+  display: none
+  z-index: 998

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

@@ -0,0 +1,78 @@
+#article-container
+  .shuoshuo-item
+    @extend .cardHover
+    margin-bottom: 20px
+    padding: 35px 30px 30px
+
+    +maxWidth768()
+      padding: 25px 20px 20px
+
+  .shuoshuo-item-header
+    display: flex
+    align-items: center
+    cursor: default
+
+  .shuoshuo-avatar
+    overflow: hidden
+    width: 40px
+    height: 40px
+    border-radius: 40px
+
+    img
+      margin: 0
+      width: 100%
+      height: 100%
+
+  .shuoshuo-info
+    margin-left: 10px
+    line-height: 1.5
+
+  .shuoshuo-date
+    color: #858585
+    font-size: .8em
+
+  .shuoshuo-content
+    padding: 15px 0 10px
+
+    & > *:last-child
+      margin-bottom: 0
+
+  .shuoshuo-footer
+    display: flex
+    align-items: center
+
+    &.flex-between
+      justify-content: space-between
+
+    &.flex-end
+      justify-content: flex-end
+
+    .shuoshuo-tag
+      display: inline-block
+      margin-right: 8px
+      padding: 0 8px
+      width: fit-content
+      border: 1px solid $light-blue
+      border-radius: 12px
+      color: $light-blue
+      font-size: .85em
+      cursor: default
+      transition: all .2s ease-in-out
+
+      &:hover
+        background: $light-blue
+        color: var(--white)
+
+    .shuoshuo-comment-btn
+      padding: 2px
+      color: #90a4ae
+      cursor: pointer
+
+      &:hover
+        color: $light-blue
+
+  .shuoshuo-comment
+    padding-top: 10px
+
+    &.no-comment
+      display: none

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

@@ -0,0 +1,27 @@
+.tag-cloud
+  &-list
+    a
+      display: inline-block
+      margin: 2px
+      padding: 2px 7px
+      line-height: 1.7
+      transition: all .3s
+      addBorderRadius(5)
+
+      &:hover
+        background: var(--btn-bg) !important
+        box-shadow: 2px 2px 6px rgba(0, 0, 0, .2)
+        color: var(--btn-color) !important
+
+      +maxWidth768()
+        zoom: .85
+
+  &-title
+    font-size: 2.57em
+
+    +maxWidth768()
+      font-size: 2em
+
+.page-title
+  & + .tag-cloud-list
+    text-align: left