twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

fix: mobile sticky hover

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-26 16:31:52 -04:00
parent b4a27fcfc2
commit 5da59739ee
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/css/style.css
View File

@@ -52,10 +52,10 @@ body {
background-color: #2563EB; background-color: #2563EB;
color: white; color: white;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.75rem 2rem; padding: 0.75rem 1.5rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
border-radius: 9999px; border-radius: 1rem;
transition-property: transform, background-color; transition-property: transform, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms; transition-duration: 150ms;
@@ -73,7 +73,7 @@ body {
padding: 0.75rem 2rem; padding: 0.75rem 2rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
border-radius: 9999px; border-radius: 1rem;
transition-property: transform, background-color; transition-property: transform, background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms; transition-duration: 150ms;
@@ -187,7 +187,7 @@ article li {
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
} }
.like-icon:hover { .like-icon:hover, .like-icon:active {
color: #fff; color: #fff;
transform: scale(1.15); transform: scale(1.15);
} }
@@ -195,7 +195,7 @@ article li {
cursor: pointer; cursor: pointer;
color: #e2264d; color: #e2264d;
} }
.like-icon.liked:hover { .like-icon.liked:hover, .like-icon.liked:active {
transform: scale(1.15); transform: scale(1.15);
} }
.hint-animation { .hint-animation {
@@ -209,3 +209,12 @@ article li {
60% { transform: translateX(1px) rotate(3deg) scale(1.2); } 60% { transform: translateX(1px) rotate(3deg) scale(1.2); }
75% { transform: translateX(0) rotate(-1deg) scale(1.1); } 75% { transform: translateX(0) rotate(-1deg) scale(1.1); }
} }
@media (hover: hover) {
.like-icon:hover {
color: #fff;
transform: scale(1.15);
}
.like-icon.liked:hover {
transform: scale(1.15);
}
}