Fix hover on home logo

jotonedev · Jan 19, 2024 · 0c3cb0d · 0c3cb0d
1 parent f2f4c9f
commit 0c3cb0d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,6 +1,6 @@
 <header class="no_print">
     <a href="{{ '/' | relative_url }}" class="header__logo" aria-label="Home">
-        <img src="{{ site.favicon | relative_url }}" width="32" height="32" alt="Website logo">
+        <img src="{{ site.favicon | relative_url }}" width="32" height="32" alt="Website logo" class=".header__logo__img">
     </a>
     <nav>
         <ul>

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -172,18 +172,21 @@ header nav ul li a:hover {
     width: fit-content;
 }
 
-.header__logo svg {
-    vertical-align: middle !important;
-    width: 32px;
-    height: 32px;
-    fill: #fefefe;
-}
 
-.header__logo :hover {
-    color: #cacaca;
-    fill: #cacaca;
+.header__logo__img {
+    -webkit-filter: brightness(100%);
+    filter: brightness(100%);
 }
 
+.header__logo__img:hover {
+    -webkit-filter: brightness(70%);
+    filter: brightness(70%);
+    -webkit-transition: all 1s ease;
+    -moz-transition: all 1s ease;
+    -o-transition: all 1s ease;
+    -ms-transition: all 1s ease;
+    transition: all 1s ease;
+}
 
 /*
   Content