add theme

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