wow

components/footer.js

@@ -1,10 +1,12 @@
 import styles from '../styles/components/Footer.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHeart } from '@fortawesome/free-solid-svg-icons'
 
 const Footer = () => (
     <div>
         <div className={styles.footer}>
             <div className="container">
-                <h4>Made with <i className="fas fa-heart fa-sm" style={{color: 'red'}}></i> by <a href="https://twitter.com/midblep" className="link" target="_blank">Midblep</a></h4>
+                <h4>Made with <FontAwesomeIcon icon={faHeart} style={{color: "red"}} /> by <a href="https://twitter.com/midblep" className="link" target="_blank">Midblep</a></h4>
             </div>
         </div>
     </div>

components/socials.js

@@ -1,11 +1,16 @@
 import styles from '../styles/components/Socials.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { faTwitch } from '@fortawesome/free-brands-svg-icons'
+import { faTrello } from '@fortawesome/free-brands-svg-icons'
+import { faMugHot } from '@fortawesome/free-solid-svg-icons'
 
 const Socials = () => (
     <section className={styles.buttons}>
-        <a href="https://twitter.com/Trick_the_fox" target="_blank"><i className="fab fa-twitter fa-lg"></i> Twitter</a>
-        <a href="https://www.twitch.tv/trick_the_fox" target="_blank"><i className="fab fa-twitch"></i> Twitch</a>
-        <a href="https://trello.com/b/cMyTLWYd" target="_blank"><i className="fab fa-trello fa-lg"></i> Trello</a>
-        <a href="https://ko-fi.com/trick_the_fox" target="_blank"><i className="fas fa-coins fa-lg"></i> Ko-fi</a>
+        <a href="https://twitter.com/Trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitter} /> Twitter</a>
+        <a href="https://www.twitch.tv/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faTwitch} /> Twitch</a>
+        <a href="https://trello.com/b/cMyTLWYd" target="_blank"><FontAwesomeIcon icon={faTrello} /> Trello</a>
+        <a href="https://ko-fi.com/trick_the_fox" target="_blank"><FontAwesomeIcon icon={faMugHot} /> Ko-fi</a>
     </section>
 )
 

styles/components/Header.module.css

@@ -87,4 +87,4 @@
     .menu {
         padding: 0.5em;
     }
-  }
+}

styles/components/Socials.module.css

@@ -17,9 +17,17 @@
     color: white;
     transition-duration: 0.1s;
     font-family: 'Dela Gothic One', cursive;
+    width: 300px;
 }
 
 .buttons > a:hover {
     transform: scale(0.95);
     transition-duration: 0.1s;
+}
+
+/* mobile */
+@media(max-aspect-ratio: 4/3) {
+    .buttons > a {
+        width: 100%;
+    }
 }