svg hover effect

flake.lock

@@ -145,11 +145,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1700130609,
-        "narHash": "sha256-pFtz286KaVHUmBOQztMNSgvT7hxcDe409vnDJxWQH7A=",
+        "lastModified": 1700154568,
+        "narHash": "sha256-bUM4bNWysqKM9c/kv4Y7u0/sNCNCQ+1Nwvrpkvi1bPI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "54f00576aa6139a9d54062d0edc2fb31423f0ffb",
+        "rev": "577d7a69133459be2cbd7ee52b6965781a66cba4",
         "type": "github"
       },
       "original": {

src/app/components/links.tsx

@@ -6,10 +6,10 @@ const Links = () =>
   <div className="grid w-full h-full place-content-center">
     <div className={"grid grid-cols-2 gap-4 place-content-center"}>
       <Link aria-label="GitHub" href={process.env.NEXT_PUBLIC_GITHUB_URL!} target="_blank">
-        <FontAwesomeIcon className="w-14 h-14 hover:text-sky-400" icon={faGithub} />
+        <FontAwesomeIcon className="w-14 h-14" icon={faGithub} />
       </Link>
       <Link aria-label="GitLab" href={process.env.NEXT_PUBLIC_GITLAB_URL!} target="_blank">
-        <FontAwesomeIcon className="w-14 h-14 hover:text-sky-400" icon={faGitlab} />
+        <FontAwesomeIcon className="w-14 h-14" icon={faGitlab} />
       </Link>
     </div>
   </div>

src/app/contact/page.tsx

@@ -6,7 +6,7 @@ const mailto = `mailto:${email}`
 const Contact = () =>
   <div className="w-full h-full p-2 grid place-content-center">
     <div className="flex flex-row gap-4">
-      <a aria-label={mailto} href={mailto}><FontAwesomeIcon className="w-14 h-14 hover:text-sky-400" icon={faEnvelope} /></a>
+      <a aria-label={mailto} href={mailto}><FontAwesomeIcon className="w-14 h-14" icon={faEnvelope} /></a>
     </div>
   </div>
 

src/app/globals.css

@@ -22,3 +22,7 @@ main {
   @apply flex flex-col w-full h-full bg-slate-950/95
 }
 
+svg {
+  @apply hover:text-sky-400 transition duration-200 ease-in
+}
+