Adding a few changes for the social links in the footer

urbanobaz · May 29, 2023 · 1c89a77 · 1c89a77 · vercel · May 29, 2023
1 parent 1789fe9
commit 1c89a77
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -73,22 +73,19 @@ export default function Home() {
           <hr className="h-0.5 my-8 bg-blue-200 w-1/2 rounded" />
         </div>
         <ul className="flex justify-center" id="social">
-          <li className="mx-5">
+          <li className={styles.socialLink}>
             <a href="https://twitter.com/ubaz_3">
               <FontAwesomeIcon icon={faTwitter} />
             </a>
           </li>
-          <li className="mx-5">
-            <a className={styles.link} href="https://github.com/urbanobaz">
+          <li className={styles.socialLink}>
+            <a href="https://github.com/urbanobaz">
               <i className="fab fa-github"></i>
               <FontAwesomeIcon icon={faGithub} />
             </a>
           </li>
-          <li className="mx-5">
-            <a
-              className={styles.link}
-              href="https://www.linkedin.com/in/urbanobaz"
-            >
+          <li className={styles.socialLink}>
+            <a href="https://www.linkedin.com/in/urbanobaz">
               <FontAwesomeIcon icon={faLinkedinIn} />
             </a>
           </li>

diff --git a/styles/Main.module.css b/styles/Main.module.css
@@ -281,6 +281,18 @@
   font-size: 0.9rem;
 }
 
+.socialLink {
+  height: 20px;
+  margin: 0 20px;
+  transform: scale(1);
+  transition: 0.2s;
+}
+
+.socialLink:hover {
+  transform: scale(1.25);
+  transition: 0.2s;
+}
+
 /* Responsiveness */
 
 @media screen and (max-width: 899px) {