simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bring the image position magic to the banner too

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-10 19:00:48 +08:00
parent 4f41cc0f27
commit 81943365c3
3 changed files with 19 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/account.css
View file

@ -3,7 +3,7 @@
} }
#account-container .header-banner { #account-container .header-banner {
pointer-events: none; /* pointer-events: none; */
aspect-ratio: 6 / 1; aspect-ratio: 6 / 1;
width: 100%; width: 100%;
height: auto; height: auto;
@ -30,6 +30,9 @@
); );
margin-bottom: -44px; margin-bottom: -44px;
} }
#account-container .header-banner:hover {
animation: position-object 5s ease-in-out 1s 5;
}
@media (min-height: 480px) { @media (min-height: 480px) {
#account-container .header-banner { #account-container .header-banner {

14
src/components/status.css
View file

@ -426,20 +426,6 @@
.status .media { .status .media {
cursor: pointer; cursor: pointer;
} }
@keyframes position-object {
0% {
object-position: 50% 50%;
}
25% {
object-position: 0% 0%;
}
75% {
object-position: 100% 100%;
}
100% {
object-position: 50% 50%;
}
}
.status .media img:is(:hover, :focus), .status .media img:is(:hover, :focus),
a:focus-visible .status .media img { a:focus-visible .status .media img {
animation: position-object 5s ease-in-out 1s 5; animation: position-object 5s ease-in-out 1s 5;

15
src/index.css
View file

@ -354,3 +354,18 @@ code {
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes position-object {
0% {
object-position: 50% 50%;
}
25% {
object-position: 0% 0%;
}
75% {
object-position: 100% 100%;
}
100% {
object-position: 50% 50%;
}
}