diff --git a/src/css/style.css b/src/css/style.css index c70c02d..0ec0e55 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -24,9 +24,6 @@ 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; @@ -78,14 +75,6 @@ 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; @@ -119,9 +108,6 @@ article a { color: #60a5fa; text-decoration: none; } -article a:hover { - color: #93c5fd; -} article code { background-color: #374151; font-family: "Red Hat Mono", monospace; @@ -184,20 +170,12 @@ 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; } @@ -209,3 +187,26 @@ 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; + } +}