ADD: more icon consistency

More icons and better consistency

app/components/Footer.vue

@@ -14,15 +14,15 @@
     </ul>
     <ul class="sitemap gap-default">
       <li class="tip-container">
-        <Icon name="material-symbols:cookie-off-outline" size="1.5rem" mode="svg" />
+        <Icon name="ph:cookie-duotone" size="1.5rem" mode="svg" />
         <span class="tip">Ohne Cookies</span>
       </li>
       <li class="tip-container">
-        <Icon name="material-symbols:fingerprint-off" size="1.5rem" mode="svg" />
+        <Icon name="ph:fingerprint-simple-duotone" size="1.5rem" mode="svg" />
         <span class="tip">Ohne Tracker</span>
       </li>
     </ul>
-    <p>&copy; 2024 by <a href="https://webfussel.de">webfussel</a></p>
+    <p class="inline-flex-row"><Icon name="ph:copyright-duotone" mode="svg"/> 2024 by <a href="https://webfussel.de">webfussel</a></p>
   </footer>
 </template>
 
@@ -57,12 +57,12 @@ const nav = [
 const socials = [
   {
     href: 'https://www.linkedin.com/in/webfussel/',
-    icon: 'ri:linkedin-box-line',
+    icon: 'ph:linkedin-logo-duotone',
     'aria-label': 'Externer Link: LinkedIn Profil'
   },
   {
     href: 'https://mastodontech.de/@webfussel',
-    icon: 'ri:mastodon-line',
+    icon: 'ph:mastodon-logo-duotone',
     rel: 'me',
     'aria-label': 'Externer Link: Mastodon Profil'
   },
@@ -73,7 +73,7 @@ const socials = [
   },
   {
     href: 'https://twitch.tv/webfussel',
-    icon: 'ri:twitch-line',
+    icon: 'ph:twitch-logo-duotone',
     'aria-label': 'Externer Link: Twitch Kanal'
   },
   {

app/components/Header.vue

@@ -29,7 +29,7 @@
       <nav>
         <ul class="main-nav">
           <li v-for="({label, to, aria, icon}) in nav" :key="label" @click="isBurgerOpen = false">
-            <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row">
+            <NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
               <Icon :name="`ph:${icon}-duotone`" mode="svg" />
               {{ label }}
             </NuxtLink>

app/components/Intro.vue

@@ -2,7 +2,7 @@
   <section id="intro" class="Intro content full gap-default">
     <div class="intro-text flex-col gap-default">
       <h1 class="flex-col">
-        <span class="greeting">Moin.</span>
+        <span class="greeting inline-flex-row">Moin. <Icon name="ph:hand-peace-duotone" mode="svg"/></span>
         <span class="my-name-wrapper">Ich bin <span class="nowrap"><span class="highlight">Fiona </span><small>Urban</small><span class="dot">.</span></span></span>
       </h1>
       <h2>