From 989f8cad559474663fce1b191329d8495d767149 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Fri, 21 Jun 2024 09:30:11 +0200
Subject: [PATCH] add: kofi link

---
 assets/css/header.css     |  2 +-
 components/Header.vue     | 13 ++++++++++---
 public/img/icons/kofi.svg | 12 ++++++++++++
 3 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 public/img/icons/kofi.svg

diff --git a/assets/css/header.css b/assets/css/header.css
index 405fd64..f183040 100644
--- a/assets/css/header.css
+++ b/assets/css/header.css
@@ -33,7 +33,7 @@
     & strong {
         font-family: 'Roboto Condensed', sans-serif;
         font-size: 1.5rem;
-        flex: 2;
+        flex: 1.5;
         cursor: default;
         display: flex;
         align-items: center;
diff --git a/components/Header.vue b/components/Header.vue
index dd7e60f..034cdcc 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -34,7 +34,7 @@
         </ul>
         <ul class="socials">
           <li v-for="({icon, ...rest}) in socials" :key="rest.href" @click="isBurgerOpen = false">
-            <a v-bind="rest">
+            <a v-bind="rest" target="_blank">
               <img class="icon" :src="icon" :alt="rest['aria-label']" />
             </a>
           </li>
@@ -45,6 +45,7 @@
 </template>
 
 <script lang="ts" setup>
+import KofiIcon from '/img/icons/kofi.svg'
 import LinkedInIcon from 'iconoir/icons/regular/linkedin.svg'
 import MastodonIcon from 'iconoir/icons/regular/mastodon.svg'
 
@@ -79,12 +80,18 @@ const socials = [
     href: 'https://www.linkedin.com/in/webfussel/',
     icon: LinkedInIcon,
     'aria-label': 'Externer Link: LinkedIn Profil'
-  }, {
+  },
+  {
     href: 'https://mastodontech.de/@webfussel',
     icon: MastodonIcon,
     rel: 'me',
     'aria-label': 'Externer Link: Mastodon Profil'
-  }
+  },
+  {
+    href: 'https://ko-fi.com/webfussel',
+    icon: KofiIcon,
+    'aria-label': 'Externer Link: KoFi Profil'
+  },
 ]
 
 onMounted(() => {
diff --git a/public/img/icons/kofi.svg b/public/img/icons/kofi.svg
new file mode 100644
index 0000000..8d1cf37
--- /dev/null
+++ b/public/img/icons/kofi.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path d="M509.5,190.9c-16.5-87.2-103.7-98-103.7-98H15.4c-12.9,0-14.5,17-14.5,17s-1.7,156.3-0.4,252.3c3.5,51.6,55.2,57,55.2,57
+		s176.3-0.5,255.2-1.1c52-9.1,57.3-54.8,56.7-79.7C460.5,343.5,525.9,278,509.5,190.9L509.5,190.9z M273.5,265.8
+		c-26.6,30.9-85.6,84.8-85.6,84.8s-2.6,2.6-6.7,0.5c-1.6-1.2-2.2-1.9-2.2-1.9c-9.5-9.4-71.8-65-86.1-84.3
+		c-15.1-20.6-22.2-57.6-1.9-79.2c20.2-21.5,64.1-23.2,93.1,8.7c0,0,33.3-38,74-20.5C298.6,191.3,297.2,238,273.5,265.8z M405.2,276
+		c-19.8,2.5-35.9,0.6-35.9,0.6V155.4H407c0,0,42.1,11.8,42.1,56.3C449.1,252.5,428.1,268.6,405.2,276L405.2,276z"/>
+</g>
+</svg>