FumeNodes/linktree
1
0
Fork 0
mirror of https://github.com/johnggli/linktree.git synced 2026-08-16 22:46:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: change names & popup animation

Browse Source
This commit is contained in:
john-emerson14
2020-03-23 01:17:20 -03:00
parent 4f71e9dff3
commit 85a6da065d
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -21,8 +21,8 @@
<img id="profilePicture" src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture"> <img id="profilePicture" src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
</a> </a>
<div class="popup" id="popup"> <div class="overlay" id="popup">
<div class="popup-inner"> <div class="popup">
<div class="popup-photo"> <div class="popup-photo">
<img src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture"> <img src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
</div> </div>

14
style.css
View File

@@ -130,7 +130,7 @@ body {
/*-------------------------popup------------------------*/ /*-------------------------popup------------------------*/
/* credits: https://www.youtube.com/watch?v=lAS2glU0xlc */ /* credits: https://www.youtube.com/watch?v=lAS2glU0xlc */
.popup { .overlay {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -147,9 +147,9 @@ body {
transition: .5s ease-in-out; transition: .5s ease-in-out;
} }
.popup-inner { .popup {
position: relative; position: relative;
bottom: -100vw; /* top: -100vw; */
/* right: -100vh; */ /* right: -100vh; */
display: flex; display: flex;
align-items: center; align-items: center;
@@ -159,6 +159,7 @@ body {
height: 80%; height: 80%;
background-color: var(--accentColor); background-color: var(--accentColor);
/* transform: rotate(32deg); */ /* transform: rotate(32deg); */
transform: scale(0);
transition: .5s ease-in-out; transition: .5s ease-in-out;
} }
@@ -199,13 +200,14 @@ body {
line-height: 1.5; line-height: 1.5;
} }
.popup:target { .overlay:target {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.popup:target .popup-inner { .overlay:target .popup {
bottom: 0; transform: scale(1);
/* top: 0; */
/* right: 0; */ /* right: 0; */
/* transform: rotate(0); */ /* transform: rotate(0); */
} }