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