diff --git a/index.html b/index.html index 963a155..f424b9f 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,8 @@
- - Profile Picture + + Profile Picture - 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); }