From 2ac710387e58774bdd99c21df72fc4480ffe8961 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 21 Feb 2025 20:45:29 +0100
Subject: [PATCH] ADD: more icon consistency

More icons and better consistency
---
 app/assets/css/global.css |  4 ++++
 app/components/Footer.vue | 12 ++++++------
 app/components/Header.vue |  2 +-
 app/components/Intro.vue  |  2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index 918ea5a..a3dd6a1 100644
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -197,6 +197,10 @@ span.chip {
     align-items: center;
     gap: .2em;
 
+    &.big-gap {
+        gap: .5em;
+    }
+
     &.reverse {
         flex-direction: row-reverse;
     }
diff --git a/app/components/Footer.vue b/app/components/Footer.vue
index 3c1fbf0..84faec0 100644
--- a/app/components/Footer.vue
+++ b/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'
   },
   {
diff --git a/app/components/Header.vue b/app/components/Header.vue
index e667f75..4565e28 100644
--- a/app/components/Header.vue
+++ b/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>
diff --git a/app/components/Intro.vue b/app/components/Intro.vue
index 9313089..e5d0c83 100644
--- a/app/components/Intro.vue
+++ b/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>