From 2b185f243cf26e2db2631b32022c415bc13a2c8f Mon Sep 17 00:00:00 2001
From: Diamant <git@diamant.dev>
Date: Sun, 20 Jun 2021 18:16:45 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Smooth=20animation=20!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_types.scss | 131 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.ts    |   5 ++
 src/style.scss  |  25 +++++++++
 3 files changed, 161 insertions(+)
 create mode 100644 src/_types.scss

diff --git a/src/_types.scss b/src/_types.scss
new file mode 100644
index 0000000..d19a18c
--- /dev/null
+++ b/src/_types.scss
@@ -0,0 +1,131 @@
+$black: #222222;
+$white: #eeeeee;
+
+body {
+  &.normal {
+    background-color: #eeeeee;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.fighting {
+    background-color: #756573;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.flying {
+    background-color: #657581;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.poison {
+    background-color: #ad569f;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.ground {
+    background-color: #9f8853;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.rock {
+    background-color: #565f1d;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.bug {
+    background-color: #417241;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.ghost {
+    background-color: #3c55b8;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.steel {
+    background-color: #dddcfe;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.fire {
+    background-color: #c6761d;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.water {
+    background-color: #184088;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.grass {
+    background-color: #89ca5f;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.electric {
+    background-color: #edf31d;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.psychic {
+    background-color: #f2087e;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.ice {
+    background-color: #8db0bb;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+  &.dragon {
+    background-color: #604324;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.dark {
+    background-color: #042e2d;
+    color: $white;
+    p a {
+      color: $white;
+    }
+  }
+  &.fairy {
+    background-color: #f454b3;
+    color: $black;
+    p a {
+      color: $black;
+    }
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index 93f7f42..29163f6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,5 +34,10 @@ pokemonJS.getAll().then((pokemon: [string]) => {
     const tweetBtn = document.querySelector('#tweet') as HTMLLinkElement;
     tweetBtn.href = shareURL;
     tweetBtn.removeAttribute('hidden');
+    pokemonJS
+      .getType(rdmPoke)
+      .then((type: [{ logo: string; name: string }]) => {
+        document.body.classList.add('ready', type[0].name);
+      });
   });
 });
diff --git a/src/style.scss b/src/style.scss
index 64f1351..4955ed9 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -7,6 +7,15 @@
 }
 
 body {
+  transition: opacity 1s ease-in-out, transform 1s ease-in-out,
+    background-color 1s ease-in-out;
+  opacity: 1;
+  overflow: hidden;
+  transform: translateY(0px);
+  &:not(.ready) {
+    opacity: 0;
+    transform: translateY(100px);
+  }
   font-family: 'Inter', sans-serif;
   display: flex;
   flex-direction: row;
@@ -32,4 +41,20 @@ body {
     margin-top: 10px;
     font-size: 1vw;
   }
+  @media (max-width: 1000px) {
+    flex-direction: column;
+    text-align: center;
+    h1 {
+      font-size: 8vw;
+    }
+    p {
+      font-size: 4vw;
+    }
+    .footer {
+      margin-top: 10px;
+      font-size: 2vw;
+    }
+  }
 }
+
+@import 'types';