From 85a6da065d814fd8e6f5fa8819f28dc0bc4ce465 Mon Sep 17 00:00:00 2001
From: john-emerson14 <john.carv.sousa@gmail.com>
Date: Mon, 23 Mar 2020 01:17:20 -0300
Subject: [PATCH] refactor: change names & popup animation

---
 index.html |  4 ++--
 style.css  | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 799071d..963a155 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,8 @@
         <img id="profilePicture" src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
     </a>
 
-    <div class="popup" id="popup">
-        <div class="popup-inner">
+    <div class="overlay" id="popup">
+        <div class="popup">
             <div class="popup-photo">
                 <img src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
             </div>
diff --git a/style.css b/style.css
index 032cce0..bcc696e 100644
--- a/style.css
+++ b/style.css
@@ -130,7 +130,7 @@ body {
 
 /*-------------------------popup------------------------*/
 /* credits: https://www.youtube.com/watch?v=lAS2glU0xlc */
-.popup {
+.overlay {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -147,9 +147,9 @@ body {
     transition: .5s ease-in-out;
 }
 
-.popup-inner {
+.popup {
     position: relative;
-    bottom: -100vw;
+    /* top: -100vw; */
     /* right: -100vh; */
     display: flex;
     align-items: center;
@@ -159,6 +159,7 @@ body {
     height: 80%;
     background-color: var(--accentColor);
     /* transform: rotate(32deg); */
+    transform: scale(0);
     transition: .5s ease-in-out;
 }
 
@@ -199,13 +200,14 @@ body {
     line-height: 1.5;
 }
 
-.popup:target {
+.overlay:target {
     visibility: visible;
     opacity: 1;
 }
 
-.popup:target .popup-inner {
-    bottom: 0;
+.overlay:target .popup {
+    transform: scale(1);
+    /* top: 0; */
     /* right: 0; */
     /* transform: rotate(0); */
 }