From 0423e669a66335d2e441ba9b060d647cd4e639b4 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sat, 4 Dec 2021 15:32:04 -0500
Subject: [PATCH] [+] Add styles

---
 src/App.vue             |  27 +--------
 src/css/animations.sass |  51 +++++++++++++++++
 src/css/colors.sass     |   8 +++
 src/css/global.sass     | 120 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 181 insertions(+), 25 deletions(-)
 create mode 100644 src/css/animations.sass
 create mode 100644 src/css/colors.sass
 create mode 100644 src/css/global.sass

diff --git a/src/App.vue b/src/App.vue
index 5725799..03f7efc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,31 +9,8 @@
     <MeruIcon/>
 </template>
 
-<style lang="scss">
-#app
-{
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-}
-
-#nav
-{
-    padding: 30px;
-
-    a
-    {
-        font-weight: bold;
-        color: #2c3e50;
-
-        &.router-link-exact-active
-        {
-            color: #42b983;
-        }
-    }
-}
+<style lang="sass">
+@import "css/global"
 </style>
 
 <script>
diff --git a/src/css/animations.sass b/src/css/animations.sass
new file mode 100644
index 0000000..46a27f7
--- /dev/null
+++ b/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)
diff --git a/src/css/colors.sass b/src/css/colors.sass
new file mode 100644
index 0000000..f24f08b
--- /dev/null
+++ b/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
diff --git a/src/css/global.sass b/src/css/global.sass
new file mode 100644
index 0000000..c97e928
--- /dev/null
+++ b/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