diff --git a/index.html b/index.html
index 963a155..f424b9f 100644
--- a/index.html
+++ b/index.html
@@ -17,8 +17,8 @@
-
-
+
+
-
diff --git a/style.css b/style.css
index bcc696e..17d3258 100644
--- a/style.css
+++ b/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-height: 599px;
- width: 59%;
- height: 80%;
+ max-width: 500px;
+ max-height: 500px;
+ width: auto;
+ 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;
- align-content: flex-end;
- width: 40%;
+ width: 100%;
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);
}