Add solitude

themes/solitude/source/css/_page/_about/contentinfo.styl

@@ -0,0 +1,78 @@
+#about-page
+  .myInfoAndSayHello
+    display flex
+    flex-direction column
+    justify-content center
+    color var(--efu-white)
+    background linear-gradient(120deg, #5b27ff 0, #00d4ff 100%)
+    background-size 200%
+    animation gradient 15s ease infinite
+    width 59.5%
+
+    .title1
+      opacity .8
+      line-height 1.3
+
+    .title2
+      font-size 36px
+      font-weight 700
+      line-height 1.1
+      margin .5rem 0
+
+    .inline-word
+      word-break keep-all
+      white-space nowrap
+
+  .aboutsiteTips
+    display flex
+    justify-content center
+    align-items flex-start
+    flex-direction column
+    width 39.5%
+
+    h2
+      margin-right auto
+      font-size 36px
+      font-family Helvetica
+      line-height 1.06
+      letter-spacing -.02em
+      color var(--efu-fontcolor)
+      margin-top 0
+
+    .mask
+      height 36px
+      position relative
+      overflow hidden
+      margin-top 4px
+
+      span
+        display block
+        box-sizing border-box
+        position absolute
+        top 36px
+        padding-bottom var(--offset)
+        background-size 100% 100%
+        -webkit-background-clip text
+        background-clip text
+        -webkit-text-fill-color transparent
+        background-repeat no-repeat
+
+        &[data-show]
+          transform translateY(-100%)
+          transition .5s transform ease-in-out
+
+        &[data-up]
+          transform translateY(-200%)
+          transition .5s transform ease-in-out
+
+      span:nth-child(1)
+        background-image linear-gradient(45deg, #0ecffe 50%, #07a6f1)
+
+      span:nth-child(2)
+        background-image linear-gradient(45deg, #18e198 50%, #0ec15d)
+
+      span:nth-child(3)
+        background-image linear-gradient(45deg, #8a7cfb 50%, #633e9c)
+
+      span:nth-child(4)
+        background-image linear-gradient(45deg, #fa7671 50%, #f45f7f)