updates

pages/index.js

@@ -8,6 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDiscord } from '@fortawesome/free-brands-svg-icons'
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'
 import { faSpotify } from '@fortawesome/free-brands-svg-icons'
+import { faSteam } from '@fortawesome/free-brands-svg-icons'
 import { faSoundcloud } from '@fortawesome/free-brands-svg-icons'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 
@@ -45,11 +46,41 @@ export default function Index() {
                 </div>
 
                 <div className={styles.topcontent + " " + styles.links}>
-                    <a href="#"><p><FontAwesomeIcon icon={faTwitter} /> Twitter</p></a>
-                    <a href="#"><p><FontAwesomeIcon icon={faSpotify} /> Spotify</p></a>
-                    <a href="#"><p><FontAwesomeIcon icon={faDiscord} /> Discord</p></a>
-                    <a href="#"><p><FontAwesomeIcon icon={faSoundcloud} /> SoundCloud</p></a>
-                    {/* <a href="#"><p><FontAwesomeIcon icon={faEnvelope} /> Email</p></a> */}
+                    <div>
+                        <a target="_blank" href="https://twitter.com/invesvpo">
+                            <span>
+                                <p>Twitter</p>
+                                <FontAwesomeIcon icon={faTwitter} />
+                            </span>
+                        </a>
+
+                        <a target="_blank" href="https://discord.com/users/221984151161667585">
+                            <span>
+                                <p>Discord</p>
+                                <FontAwesomeIcon icon={faDiscord} />
+                            </span>
+                        </a>
+
+                        <a target="_blank" href="https://soundcloud.com/invesvpo">
+                            <span>
+                                <p>SoundCloud</p>
+                                <FontAwesomeIcon icon={faSoundcloud} />
+                            </span>
+                        </a>
+
+                        <a target="_blank" href="mailto:">
+                            <span>
+                                <p>Email</p>
+                                <FontAwesomeIcon icon={faEnvelope} />
+                            </span>
+                        </a>
+
+                        <a target="_blank" href="https://steamcommunity.com/id/Invesvpo/">
+                            <span>
+                                <p>Steam</p>
+                                <FontAwesomeIcon icon={faSteam} />
+                            </span>
+                        </a>
                     </div>
                 </div>
 
@@ -57,5 +88,6 @@ export default function Index() {
                     <a href="https://dubbelnull.com/" target="_blank">Made by DubbelNull</a> with NextJS and Vercel
                 </footer>
             </div>
+        </div>
     )
 }

styles/Index.module.css

@@ -29,8 +29,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    padding: 0;
-    margin: 0;
     width: 100vw;
     height: 40vh;
     display: flex;
@@ -54,7 +52,7 @@
 }
 
 .bottomcontainer {
-    height: auto;
+    height: 60vh;
     background-color: #232323;
     display: flex;
     flex-direction: column;
@@ -77,18 +75,20 @@
 
 /* items */
 
-.links {
+.links div {
     flex-wrap: wrap;
     font-size: 1.5em;
     flex-grow: 1;
-    display: flex;
+    display: grid;
+    grid-template-columns: 25% 25% 25%;
     gap: var(--padding-lg);
     justify-content: start;
     align-items: center;
 }
 
-.links a {
-    padding: var(--padding) var(--padding-xl);
+.links div a {
+    text-align: center;
+    padding: var(--padding) var(--padding-lg) var(--padding) var(--padding-xl);
     transition-duration: var(--transition-speed);
     background-color: #2940D3;
 
@@ -97,15 +97,22 @@
     transform: skewX(-20deg);
 }
 
-.links a p {
+.links div p {
     margin: unset;
+}
+
+.links div a span {
     -ms-transform: skewX(20deg);
     -webkit-transform: skewX(20deg);
     transform: skewX(20deg);  
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
 }
 
-.links a:hover {
+
+.links div a:hover {
     transition-duration: 0.3s;
     background-color: #1f309e;
 }
@@ -132,8 +139,9 @@
         font-weight: normal;
     }
 
-    .links {
+    .links div {
         font-size: var(--font);
+        display: flex;
         flex-wrap: wrap;
         justify-content: center;
     }