[+] Add styles

src/css/animations.sass

@@ -0,0 +1,51 @@
+/**
+ * animation fade-in-left
+ */
+.fade-in-left
+  animation: fade-in-left .5s cubic-bezier(.39, .575, .565, 1.000) both
+
+@keyframes fade-in-left
+  0%
+    transform: translateX(-50px)
+    opacity: 0
+  100%
+    transform: translateX(0)
+    opacity: 1
+
+.fade-in-top
+  animation: fade-in-top .5s cubic-bezier(.39, .575, .565, 1.000) both
+
+@keyframes fade-in-top
+  0%
+    transform: translateY(-50px)
+    opacity: 0
+  100%
+    transform: translateY(0)
+    opacity: 1
+
+@keyframes fade-in-top-delayed
+  0%
+    opacity: 0
+  50%
+    transform: translateY(-50px)
+    opacity: 0
+  100%
+    transform: translateY(0)
+    opacity: 1
+
+.fade-out-left
+  animation: fade-out-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
+
+@keyframes fade-out-left
+  0%
+    transform: translateX(0)
+    opacity: 1
+  100%
+    transform: translateX(-50px)
+    opacity: 0
+
+@keyframes slideInFromLeft
+  0%
+    transform: translateX(-100%)
+  100%
+    transform: translateX(0)

src/css/colors.sass

@@ -0,0 +1,8 @@
+$color-text-main: #70512a
+$color-text-light: rgba(166, 134, 89, 0.84)
+$color-text-special: #ff8373
+
+// Lower means lighter
+$color-bg-6: #ffeedb
+$color-bg-5: #fff4eb
+$color-bg-4: #fffcf9

src/css/global.sass

@@ -0,0 +1,120 @@
+@import colors
+
+// Constants
+$font: "Microsoft YaHei UI", Avenir, Helvetica, Arial, sans-serif
+
+// Container width (This is normally 50vw,
+//   but when it's smaller than 900px, use 100vw - 50px, because 50px is the margin)
+$app-width: max(50vw, min(900px, 100vw - 50px))
+
+// Remove UA body margin
+body
+  margin: 0
+
+// Non-selectable text
+@mixin unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+.unselectable
+  @include unselectable
+
+// Clickable text
+.clickable:hover
+  cursor: pointer
+  @include unselectable
+
+// Vertical flex
+.fbox-v
+  display: flex
+  flex-flow: column
+  height: 100%
+
+.mh0
+  min-height: 0
+
+// Horizontal flex
+.fbox-h
+  display: flex
+  flex-flow: row
+
+.mw0
+  min-width: 0
+
+// Flex properties
+.f-no-grow
+  flex-grow: 0
+
+.f-grow1
+  flex-grow: 1
+
+.f-no-shrink
+  flex-shrink: 0
+
+.f-shrink1
+  flex-shrink: 1
+
+// Expand in the vertical direction
+.f-v-expand
+  flex: 1 0
+  min-height: 0
+
+// Expand in the horizontal direction
+.f-h-expand
+  flex: 1 0
+  min-width: 0
+
+.h100
+  height: 100%
+
+.w100
+  width: 100%
+
+// Vertical Flex Center
+@mixin flex-vcenter
+  display: flex
+  flex-flow: column
+  justify-content: center
+
+// Center both horizontally and vertically
+.fbox-center
+  @include flex-vcenter
+  align-items: center
+
+// Center vertically only
+.fbox-vcenter
+  @include flex-vcenter
+
+// No wrap text
+.nowrap
+  overflow: hidden
+  white-space: nowrap
+  text-overflow: clip
+
+.nowrap.e
+  text-overflow: ellipsis
+
+*
+  transition: all .25s ease
+
+#app
+  font-family: $font
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  text-align: center
+  color: $color-text-main
+
+  // Max width and center
+  max-width: 900px
+  margin: auto
+
+  // Vertical flex box
+  display: flex
+  flex-flow: column
+  height: 100vh
+
+body
+  background: #f9f2e0