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

style: update hover for elements

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-25 20:21:21 -04:00
parent 8e2d448618
commit 34f3be01a8
1 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/css/style.css
View File

@@ -24,9 +24,6 @@ body {
padding: 1.5rem; padding: 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.tag { .tag {
background-color: #4a5568; background-color: #4a5568;
color: #e2e8f0; color: #e2e8f0;
@@ -78,14 +75,6 @@ body {
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;
} }
.btn:hover {
background-color: #1D4ED8;
transform: scale(1.05);
}
.btngray:hover {
background-color: #4B5563;
transform: scale(1.05);
}
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;
margin-right: 1rem; margin-right: 1rem;
@@ -119,9 +108,6 @@ article a {
color: #60a5fa; color: #60a5fa;
text-decoration: none; text-decoration: none;
} }
article a:hover {
color: #93c5fd;
}
article code { article code {
background-color: #374151; background-color: #374151;
font-family: "Red Hat Mono", monospace; font-family: "Red Hat Mono", monospace;
@@ -184,20 +170,12 @@ article li {
} }
.like-icon { .like-icon {
cursor: pointer; cursor: pointer;
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 {
color: #fff;
transform: scale(1.15);
}
.like-icon.liked { .like-icon.liked {
cursor: pointer; cursor: pointer;
color: #e2264d; color: #e2264d;
} }
.like-icon.liked:hover {
transform: scale(1.15);
}
.hint-animation { .hint-animation {
animation: wobble 1s ease-in-out 2; animation: wobble 1s ease-in-out 2;
} }
@@ -209,3 +187,26 @@ article li {
60% { transform: translateX(1px) rotate(3deg) scale(1.1); } 60% { transform: translateX(1px) rotate(3deg) scale(1.1); }
75% { transform: translateX(0) rotate(-1deg) scale(1); } 75% { transform: translateX(0) rotate(-1deg) scale(1); }
} }
@media (hover: hover) {
.like-icon:hover {
color: #fff;
transform: scale(1.15);
}
.like-icon.liked:hover {
transform: scale(1.15);
}
.card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.btn:hover {
background-color: #1D4ED8;
transform: scale(1.05);
}
.btngray:hover {
background-color: #4B5563;
transform: scale(1.05);
}
article a:hover {
color: #93c5fd;
}
}