Add link colors.

src/index.html

@@ -20,13 +20,13 @@
       </header>
       <div class="flex flex-col gap-6">
         <a href="https://github.com/jrpotter/" target="_blank">
-          <image class="w-6 h-6" src="./imgs/github.svg" />
+          <image class="w-6 h-6 link" src="./imgs/github.svg" />
         </a>
         <a href="https://www.linkedin.com/in/jrpotter2112/" target="_blank">
-          <image class="w-6 h-6" src="./imgs/linkedin.svg" />
+          <image class="w-6 h-6 link" src="./imgs/linkedin.svg" />
         </a>
         <a href="https://www.zotero.org/jrpotter2112/library" target="_blank">
-          <image class="w-6 h-6" src="./imgs/zotero.svg" />
+          <image class="w-6 h-6 link" src="./imgs/zotero.svg" />
         </a>
       </div>
     </div>

src/main.css

@@ -5,3 +5,11 @@
 a {
   text-decoration: underline;
 }
+
+a:hover {
+  color: #0056b2;
+}
+
+.link:hover {
+  filter: invert(19%) sepia(98%) saturate(2006%) hue-rotate(198deg) brightness(98%) contrast(101%);
+}

tailwind.config.cjs

@@ -6,7 +6,6 @@ module.exports = {
       colors: {
         primary: "white",
         secondary: "#f6f8fa",
-        link: "#8056b2",
       },
     },
   },