diff --git a/src/css/style.css b/src/css/style.css index 0ec0e55..c70c02d 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -24,6 +24,9 @@ body { padding: 1.5rem; 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 { background-color: #4a5568; color: #e2e8f0; @@ -75,6 +78,14 @@ body { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } +.btn:hover { + background-color: #1D4ED8; + transform: scale(1.05); +} +.btngray:hover { + background-color: #4B5563; + transform: scale(1.05); +} .icon { font-size: 1.5rem; margin-right: 1rem; @@ -108,6 +119,9 @@ article a { color: #60a5fa; text-decoration: none; } +article a:hover { + color: #93c5fd; +} article code { background-color: #374151; font-family: "Red Hat Mono", monospace; @@ -170,12 +184,20 @@ article li { } .like-icon { cursor: pointer; + transition: color 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 { cursor: pointer; color: #e2264d; } +.like-icon.liked:hover { + transform: scale(1.15); +} .hint-animation { animation: wobble 1s ease-in-out 2; } @@ -187,26 +209,3 @@ article li { 60% { transform: translateX(1px) rotate(3deg) scale(1.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; - } -}