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

fix: update hover and active css styles

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-30 17:51:33 -04:00
parent 355dbd7ba9
commit a890a677e2
1 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/css/style.css
View File

@@ -24,7 +24,7 @@ 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 { .card:active {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
} }
.tag { .tag {
@@ -37,6 +37,25 @@ body {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: inline-block; display: inline-block;
} }
.tag-link {
display: inline-block;
background-color: #374151; /* from bg-gray-700 */
color: #93c5fd; /* from text-blue-300 */
font-size: 0.875rem; /* from text-sm */
font-weight: 500; /* from font-medium */
padding: 0.125rem 0.625rem; /* from py-0.5 px-2.5 */
border-radius: 9999px; /* from rounded-full */
margin-right: 0.25rem; /* from mr-1 */
text-decoration: none;
transition-property: transform, background-color, color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.tag-link:active {
background-color: #4B5563; /* from hover:bg-gray-600 */
color: #bfdbfe; /* from hover:text-blue-200 */
transform: scale(1.05);
}
.glass-card { .glass-card {
background: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity */ background: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity */
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@@ -78,11 +97,11 @@ 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 { .btn:active {
background-color: #1D4ED8; background-color: #1D4ED8;
transform: scale(1.05); transform: scale(1.05);
} }
.btngray:hover { .btngray:active {
background-color: #4B5563; background-color: #4B5563;
transform: scale(1.05); transform: scale(1.05);
} }
@@ -119,7 +138,7 @@ article a {
color: #60a5fa; color: #60a5fa;
text-decoration: none; text-decoration: none;
} }
article a:hover { article a:active {
color: #93c5fd; color: #93c5fd;
} }
article code { article code {
@@ -206,6 +225,22 @@ article li {
.like-icon.liked:hover { .like-icon.liked:hover {
transform: scale(1.15); transform: scale(1.15);
} }
.tag-link:hover {
background-color: #4B5563; /* from hover:bg-gray-600 */
color: #bfdbfe; /* from hover:text-blue-200 */
transform: scale(1.05);
}
.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);
}
} }
.hint-animation { .hint-animation {
animation: wobble 1s ease-in-out 2; animation: wobble 1s ease-in-out 2;