refactor: change popup visual

index.html

@@ -17,8 +17,8 @@
         <div id="stars3"></div>
     </section>
 
-    <a href="#popup">
+    <a id="profilePicture" href="#popup">
-        <img id="profilePicture" src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
+        <img src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
     </a>
 
     <div class="overlay" id="popup">
@@ -27,14 +27,14 @@
                 <img src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
             </div>
 
-            <div class="popup-text">
+            <!-- <div class="popup-text">
                 <h1>
                     John Emerson
                 </h1>
                 <p>
                     But... the sensation that I've lost something lingers for a longtime after I wake up.
                 </p>
-            </div>
+            </div> -->
 
             <a class="popup-close" onclick="history.back()">&times;</a>
         </div>

style.css

@@ -2,6 +2,7 @@
 
 :root {
     --bgColor: #223344;
+    --bgColor2: #090a0f;
     --accentColor: #E6E6E6;
     --font: 'Karla', sans-serif;
     --delay: .3s;
@@ -11,19 +12,21 @@ body {
     margin: 0;
     padding: 0;
     min-height: 100vh;
-    background: radial-gradient(ellipse at bottom, var(--bgColor) 0%, #090a0f 100%);
+    font-family: var(--font);
+    background: radial-gradient(ellipse at bottom, var(--bgColor) 0%, var(--bgColor2) 100%);
     opacity: 0;
     animation: 1s ease-out var(--delay) 1 transitionAnimation; /* duration/timing-function/delay/iterations/name */
     animation-fill-mode: forwards;
 }
 
-#profilePicture {
+#profilePicture, #profilePicture img {
     position: relative;
     width: 96px;
     height: 96px;
     display: block;
     margin: 35px auto 20px;
     border-radius: 50%;
+    -webkit-tap-highlight-color: transparent;
 }
 
 #userName {
@@ -47,7 +50,6 @@ body {
 
 .link {
     position: relative;
-    font-family: var(--font);
     background-color: transparent;
     color: var(--accentColor);
     border: solid var(--accentColor) 2px;
@@ -152,11 +154,13 @@ body {
     /* top: -100vw; */
     /* right: -100vh; */
     display: flex;
+    flex-direction: column;
     align-items: center;
-    max-width: 800px;
+    max-width: 500px;
-    max-height: 599px;
+    max-height: 500px;
-    width: 59%;
+    width: auto;
-    height: 80%;
+    height: auto;
+    margin: 64px;
     background-color: var(--accentColor);
     /* transform: rotate(32deg); */
     transform: scale(0);
@@ -165,15 +169,12 @@ body {
 
 .popup-photo {
     display: flex;
-    justify-content: flex-end;
+    width: 100%;
-    align-content: flex-end;
-    width: 40%;
     height: 100%;
-    overflow: hidden;
 }
 
 .popup-photo img {
-    width: auto;
+    width: 100%;
     height: 100%;
 }
 
@@ -181,22 +182,21 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: 59%;
+    width: 80%;
     height: 100%;
-    padding: 4rem;
 }
 
 .popup-text h1 {
     font-size: 2rem;
-    font-weight: 599;
+    font-weight: bold;
     margin-bottom: 2rem;
     text-transform: uppercase;
-    color: black;
+    color: var(--bgColor2);
 }
 
 .popup-text p {
     font-size: 0.8rem;
-    color: black;
+    color: var(--bgColor2);
     line-height: 1.5;
 }
 
@@ -218,16 +218,29 @@ body {
     top: -1rem;
     width: 3rem;
     height: 3rem;
-    font-size: 0.8rem;
+    font-size: 1.7rem;
     font-weight: 400;
     border-radius: 100%;
-    background-color: black;
+    background-color: var(--bgColor);
     z-index: 4;
-    color: white;
+    color: var(--accentColor);
     line-height: 3rem;
     text-align: center;
     cursor: pointer;
     text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) {
+    .popup-close:hover {
+        background-color: var(--accentColor);
+        color: var(--bgColor);
+    }
+}
+
+.popup-close:active {
+    background-color: var(--accentColor);
+    color: var(--bgColor);
 }