Added SMSocialIcons component

resources/js/components/SMFooter.vue

@@ -2,38 +2,7 @@
     <SMContainer :full="true" class="footer">
         <SMRow class="social">
             <SMColumn class="align-items-center">
-                <ul>
+                <SMSocialIcons />
-                    <li>
-                        <a href="https://facebook.com/stemmechanics"
-                            ><ion-icon name="logo-facebook"></ion-icon
-                        ></a>
-                    </li>
-                    <li>
-                        <a href="https://mastodon.au/@stemmechanics"
-                            ><ion-icon name="logo-mastodon"></ion-icon
-                        ></a>
-                    </li>
-                    <li>
-                        <a href="https://www.youtube.com/@stemmechanics"
-                            ><ion-icon name="logo-youtube"></ion-icon
-                        ></a>
-                    </li>
-                    <li>
-                        <a href="https://twitter.com/stemmechanics"
-                            ><ion-icon name="logo-twitter"></ion-icon
-                        ></a>
-                    </li>
-                    <li>
-                        <a href="https://github.com/stemmechanics"
-                            ><ion-icon name="logo-github"></ion-icon
-                        ></a>
-                    </li>
-                    <li>
-                        <a href="https://discord.gg/yNzk4x7mpD"
-                            ><ion-icon name="logo-discord"></ion-icon
-                        ></a>
-                    </li>
-                </ul>
             </SMColumn>
         </SMRow>
         <SMRow class="align-items-center">
@@ -106,7 +75,11 @@
     </SMContainer>
 </template>
 
-<style lang="scss" scoped>
+<script setup lang="ts">
+import SMSocialIcons from "../components/SMSocialIcons.vue";
+</script>
+
+<style lang="scss">
 .footer {
     flex: 0;
     align-items: center;
@@ -128,7 +101,7 @@
     }
 
     .social {
-        font-size: 200%;
+        font-size: 115%;
         max-width: 100%;
         border-top: 1px solid var(--footer-color-border);
         border-bottom: 1px solid var(--footer-color-border);
@@ -136,6 +109,7 @@
         margin-bottom: 24px;
 
         a {
+            color: var(--footer-color-text);
             vertical-align: middle;
             display: flex;
         }

resources/js/components/SMSocialIcons.vue

@@ -0,0 +1,53 @@
+<template>
+    <ul class="social-icons">
+        <li>
+            <a href="https://facebook.com/stemmechanics"
+                ><ion-icon name="logo-facebook"></ion-icon
+            ></a>
+        </li>
+        <li>
+            <a href="https://mastodon.au/@stemmechanics"
+                ><ion-icon name="logo-mastodon"></ion-icon
+            ></a>
+        </li>
+        <li>
+            <a href="https://www.youtube.com/@stemmechanics"
+                ><ion-icon name="logo-youtube"></ion-icon
+            ></a>
+        </li>
+        <li>
+            <a href="https://twitter.com/stemmechanics"
+                ><ion-icon name="logo-twitter"></ion-icon
+            ></a>
+        </li>
+        <li>
+            <a href="https://github.com/stemmechanics"
+                ><ion-icon name="logo-github"></ion-icon
+            ></a>
+        </li>
+        <li>
+            <a href="https://discord.gg/yNzk4x7mpD"
+                ><ion-icon name="logo-discord"></ion-icon
+            ></a>
+        </li>
+        <li>
+            <a href="https://www.linkedin.com/company/stemmechanics"
+                ><ion-icon name="logo-linkedin"></ion-icon
+            ></a>
+        </li>
+    </ul>
+</template>
+
+<style lang="scss">
+.social-icons {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    font-size: 200%;
+    justify-content: center;
+
+    li {
+        margin: 0 16px;
+    }
+}
+</style>

resources/js/views/Contact.vue

@@ -17,38 +17,7 @@
                 server, you'll have the opportunity to connect with our team,
                 participants, and other individuals who share similar interests.
             </p>
-            <ul class="sm-contact-socials">
+            <SMSocialIcons />
-                <li>
-                    <a href="https://facebook.com/stemmechanics"
-                        ><ion-icon name="logo-facebook"></ion-icon
-                    ></a>
-                </li>
-                <li>
-                    <a href="https://mastodon.au/@stemmechanics"
-                        ><ion-icon name="logo-mastodon"></ion-icon
-                    ></a>
-                </li>
-                <li>
-                    <a href="https://www.youtube.com/@stemmechanics"
-                        ><ion-icon name="logo-youtube"></ion-icon
-                    ></a>
-                </li>
-                <li>
-                    <a href="https://twitter.com/stemmechanics"
-                        ><ion-icon name="logo-twitter"></ion-icon
-                    ></a>
-                </li>
-                <li>
-                    <a href="https://github.com/stemmechanics"
-                        ><ion-icon name="logo-github"></ion-icon
-                    ></a>
-                </li>
-                <li>
-                    <a href="https://discord.gg/yNzk4x7mpD"
-                        ><ion-icon name="logo-discord"></ion-icon
-                    ></a>
-                </li>
-            </ul>
             <h3>Wanting a workshop?</h3>
             <p>
                 We provide both public and private workshops as well as run
@@ -78,6 +47,7 @@
 
 <script setup lang="ts">
 import SMMastHead from "../components/SMMastHead.vue";
+import SMSocialIcons from "../components/SMSocialIcons.vue";
 </script>
 
 <style lang="scss">
@@ -91,18 +61,6 @@ import SMMastHead from "../components/SMMastHead.vue";
     }
 }
 
-.sm-contact-socials {
-    list-style-type: none;
-    padding: 0;
-    display: flex;
-    font-size: 200%;
-    justify-content: center;
-
-    li {
-        margin: 0 16px;
-    }
-}
-
 .address {
     margin-top: 60px;
 }