Add Mastodon link and reshuffle contact icons

components/Footer.vue

@@ -3,6 +3,7 @@
         <div class="text-white grid grid-cols-3 py-6">
             <div class="col-start-1 col-span-3 sm:col-span-1">
                 <p><a href="/colophon"><client-only><fa-icon icon="fa-regular fa-circle-question" class="pr-2" /></client-only>About this site…</a></p>
+                <p class="hidden"><a rel="me" href="https://livellosegreto.it/@morpheu5">&nbsp;</a></p>
             </div>
             <div class="col-start-1 col-span-2 sm:col-start-2 sm:col-span-2">
                 <p class="mt-2 sm:mt-0 sm:text-right"><client-only><fa-icon icon="fa-regular fa-copyright" class="pr-2" /></client-only>Unless otherwise specified, the content of this site is licensed as <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</p>

pages/contact.vue

@@ -7,20 +7,25 @@
             <section class="links">
                 <p>You can find me on these web sites…</p>
                 <div class="text-center ml-2">
-                    <a href="https://blog.morpheu5.net"><client-only><fa-icon icon="fa-solid fa-blog" alt="MorphLog" style="color: black" aria-hidden="true" /></client-only></a>
-                    <a href="https://orcid.org/0000-0001-8665-6147"><client-only><fa-icon icon="fa-brands fa-orcid" alt="ORCID" style="color: #a6cf39" aria-hidden="true" /></client-only></a>
-                    <a href="https://www.linkedin.com/in/andreafranceschini"><client-only><fa-icon icon="fa-brands fa-linkedin" alt="LinkedIn" style="color: #0077b5" aria-hidden="true" /></client-only></a>
-                    <a href="https://github.com/Morpheu5"><client-only><fa-icon icon="fa-brands fa-github" alt="GitHub" style="color: black" aria-hidden="true" /></client-only></a>
-                    <a href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><client-only><fa-icon icon="fa-brands fa-app-store-ios" alt="App Store" style="color: #2296f3" aria-hidden="true" /></client-only></a>
-                    <a href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&amp;hl=it_IT"><client-only><fa-icon icon="fa-brands fa-google-play" alt="Google Play" style="color: #3BCCFF" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://blog.morpheu5.net"><client-only><fa-icon icon="fa-solid fa-blog" alt="MorphLog" style="color: black" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://orcid.org/0000-0001-8665-6147"><client-only><fa-icon icon="fa-brands fa-orcid" alt="ORCID" style="color: #a6cf39" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://www.linkedin.com/in/andreafranceschini"><client-only><fa-icon icon="fa-brands fa-linkedin" alt="LinkedIn" style="color: #0077b5" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://github.com/Morpheu5"><client-only><fa-icon icon="fa-brands fa-github" alt="GitHub" style="color: black" aria-hidden="true" /></client-only></a>
                 </div>
                 <div class="mt-4 text-center">
-                    <a href="https://twitter.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-twitter" alt="Twitter" style="color: #55acee" aria-hidden="true" /></client-only></a>
-                    <a href="https://instagram.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-instagram" alt="Instagram" style="color: #E1306C" aria-hidden="true" /></client-only></a>
-                    <a href="https://www.flickr.com/photos/morpheu5"><client-only><fa-icon icon="fa-brands fa-flickr" alt="Flickr" style="color: #0062DD" aria-hidden="true" /></client-only></a>
-                    <a href="https://soundcloud.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-soundcloud" alt="SoundClound" style="color: #FE5000" aria-hidden="true" /></client-only></a>
-                    <a href="https://www.youtube.com/user/therealmorpheu5"><client-only><fa-icon icon="fa-brands fa-youtube" alt="YouTube" style="color: #FF0000" aria-hidden="true" /></client-only></a>
-                    <a href="https://deviantart.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-deviantart" alt="DeviantArt" style="color: #4DC47D" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://apps.apple.com/it/developer/andrea-franceschini/id454062630"><client-only><fa-icon icon="fa-brands fa-app-store-ios" alt="App Store" style="color: #2296f3" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="http://play.google.com/store/apps/developer?id=Andrea+Franceschini&amp;hl=it_IT"><client-only><fa-icon icon="fa-brands fa-google-play" alt="Google Play" style="color: #3BCCFF" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://twitter.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-twitter" alt="Twitter" style="color: #55acee" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://livellosegreto.it/@morpheu5"><client-only><fa-icon icon="fa-brands fa-mastodon" alt="Mastodon" /></client-only></a>
+                </div>
+                <div class="mt-4 text-center">
+                    <a rel="me" href="https://instagram.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-instagram" alt="Instagram" style="color: #E1306C" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://www.flickr.com/photos/morpheu5"><client-only><fa-icon icon="fa-brands fa-flickr" alt="Flickr" style="color: #0062DD" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://soundcloud.com/ilmoppe"><client-only><fa-icon icon="fa-brands fa-soundcloud" alt="SoundClound" style="color: #FE5000" aria-hidden="true" /></client-only></a>
+                </div>
+                <div class="mt-4 text-center">
+                    <a rel="me" href="https://www.youtube.com/user/therealmorpheu5"><client-only><fa-icon icon="fa-brands fa-youtube" alt="YouTube" style="color: #FF0000" aria-hidden="true" /></client-only></a>
+                    <a rel="me" href="https://deviantart.com/morpheu5"><client-only><fa-icon icon="fa-brands fa-deviantart" alt="DeviantArt" style="color: #4DC47D" aria-hidden="true" /></client-only></a>
                 </div>
             </section>
             <section class="email">

plugins/fontawesome.js

@@ -2,7 +2,7 @@ import { library, config } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faEnvelope, faBlog, faCookieBite, faCircleXmark, faLink } from '@fortawesome/free-solid-svg-icons';
 import { faCircleQuestion, faCopyright } from '@fortawesome/free-regular-svg-icons';
-import { faOrcid, faLinkedin, faGithub, faAppStoreIos, faGooglePlay, faTwitter, faInstagram, faFlickr, faSoundcloud, faYoutube, faDeviantart } from '@fortawesome/free-brands-svg-icons'
+import { faOrcid, faLinkedin, faGithub, faAppStoreIos, faGooglePlay, faTwitter, faInstagram, faMastodon, faFlickr, faSoundcloud, faYoutube, faDeviantart } from '@fortawesome/free-brands-svg-icons'
 
 // This is important, we are going to let Nuxt worry about the CSS
 config.autoAddCss = false;
@@ -13,7 +13,7 @@ config.autoAddCss = false;
 library.add(
   faEnvelope, faBlog, faCookieBite, faCircleXmark, faLink,
   faCircleQuestion, faCopyright,
-  faOrcid, faLinkedin, faGithub, faAppStoreIos, faGooglePlay, faTwitter, faInstagram, faFlickr, faSoundcloud, faYoutube, faDeviantart
+  faOrcid, faLinkedin, faGithub, faAppStoreIos, faGooglePlay, faTwitter, faInstagram, faMastodon, faFlickr, faSoundcloud, faYoutube, faDeviantart
 );
 
 export default defineNuxtPlugin((nuxtApp) => {