Initial commit of branch

components/footer.js

@@ -1,6 +1,6 @@
 import styles from '../styles/components/Footer.module.css'
 
-const Header = () => (
+const Footer = () => (
     <div>
         <div className={styles.footer}>
             <div className="container">
@@ -10,4 +10,4 @@ const Header = () => (
     </div>
 )
 
-export default Header
+export default Footer

components/socials.js

@@ -0,0 +1,12 @@
+import styles from '../styles/components/Socials.module.css'
+
+const Socials = () => (
+    <section className={styles.buttons}>
+        <a href="https://twitter.com/Trick_the_fox" target="_blank"><i className="fab fa-twitter" size="1x"></i> Twitter</a>
+        <a href="https://www.twitch.tv/trick_the_fox" target="_blank"><i className="fab fa-twitch" size="1x"></i> Twitch</a>
+        <a href="https://trello.com/b/cMyTLWYd" target="_blank"><i className="fab fa-trello" size="1x"></i> Trello</a>
+        <a href="https://ko-fi.com/trick_the_fox" target="_blank"><i className="fas fa-coins" size="1x"></i> Ko-fi</a>
+    </section>
+)
+
+export default Socials

pages/contact.js

@@ -2,6 +2,7 @@ import Head from 'next/head'
 import styles from '../styles/Contact.module.css'
 import Header from '../components/header';
 import Footer from '../components/footer';
+import Socials from '../components/socials';
 
 export default function Contact() {
   return (
@@ -19,12 +20,7 @@ export default function Contact() {
                     <h1>Contact</h1>
                 </section>
 
-                <section className="buttons">
+                <Socials />
-                    <a href="https://twitter.com/Trick_the_fox" target="_blank"><i className="fab fa-twitter icon"></i> Twitter</a>
-                    <a href="https://www.twitch.tv/trick_the_fox" target="_blank"><i className="fab fa-twitch icon"></i> Twitch</a>
-                    <a href="https://trello.com/b/cMyTLWYd" target="_blank"><i className="fab fa-trello icon"></i> Trello</a>
-                    <a href="https://ko-fi.com/trick_the_fox" target="_blank"><i className="fas fa-coins icon"></i> Ko-fi</a>
-                </section>
 
             </article>
         </div>

pages/index.js

@@ -2,6 +2,7 @@ import Head from 'next/head'
 import styles from '../styles/Index.module.css'
 import Header from '../components/header';
 import Footer from '../components/footer';
+import Socials from '../components/socials';
 
 function RandomMotto(props) {
     const Mottos = [
@@ -45,12 +46,7 @@ export default function Index() {
                     </div>
                 </section>
 
-                <section className="buttons">
+                <Socials />
-                    <a href="https://twitter.com/Trick_the_fox" target="_blank"><i className="fab fa-twitter" size="1x"></i> Twitter</a>
-                    <a href="https://www.twitch.tv/trick_the_fox" target="_blank"><i className="fab fa-twitch" size="1x"></i> Twitch</a>
-                    <a href="https://trello.com/b/cMyTLWYd" target="_blank"><i className="fab fa-trello" size="1x"></i> Trello</a>
-                    <a href="https://ko-fi.com/trick_the_fox" target="_blank"><i className="fas fa-coins" size="1x"></i> Ko-fi</a>
-                </section>
 
             </article>
         </div>

styles/Commissions.module.css

@@ -7,4 +7,11 @@
 
 .row img {
     width: 200px;
+}
+
+/* mobile */
+@media (max-aspect-ratio: 1/1) {
+    .row {
+        flex-direction: column;
+    }
 }

styles/components/Socials.module.css

@@ -0,0 +1,25 @@
+ .buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+}
+
+.buttons > a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+    border-radius: 10px;
+    padding: 0.4em 2em;
+    font-size: 1.3em;
+    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
+    background-color: rgba(79,79,255,1);
+    color: white;
+    transition-duration: 0.1s;
+    font-family: 'Dela Gothic One', cursive;
+}
+
+.buttons > a:hover {
+    transform: scale(0.95);
+    transition-duration: 0.1s;
+}

styles/globals.css

@@ -64,38 +64,6 @@ h1, h2, h3 {
 }
 
 
-/* buttons in the content field */
-.content .buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
-
-.content .buttons > a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1em;
-  border-radius: 10px;
-  padding: 0.4em 2em;
-  font-size: 1.3em;
-  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
-  background-color: rgba(79,79,255,1);
-  color: white;
-  transition-duration: 0.1s;
-  font-family: 'Dela Gothic One', cursive;
-}
-
-.content .buttons > a:hover {
-  transform: scale(0.95);
-  transition-duration: 0.1s;
-}
-
-.icon {
-  font-size: 1.3rem;
-}
-
-
 /* mobile */
 @media(max-aspect-ratio: 5/4) {
   .content {