STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Added SMSocialIcons component

Browse Source
This commit is contained in:
James Collins
2023-04-24 12:16:48 +10:00
parent 0755df03cf
commit 02cfb53147
3 changed files with 63 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
resources/js/components/SMFooter.vue
View File

@@ -2,38 +2,7 @@
<SMContainer :full="true" class="footer">
<SMRow class="social">
<SMColumn class="align-items-center">
<ul>
<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>
<SMSocialIcons />
</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;
}

53
resources/js/components/SMSocialIcons.vue Normal file
View File

@@ -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>

46
resources/js/views/Contact.vue
View File

@@ -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">
<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>
<SMSocialIcons />
<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;
}