kofi icon

5 files changed, 7 insertions, 0 deletions

diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss
index a680fdd..6ab3895 100644
--- a/COPY-TO-ROOT-SASS/abridge.scss
+++ b/COPY-TO-ROOT-SASS/abridge.scss
@@ -26,6 +26,7 @@
   $icon-element: false,
   $icon-matrix: false,
   $icon-buymeacoffee: false,
+  $icon-kofi: false,
   $icon-twitter: false,
   $icon-facebook: false,
   $icon-linkedin: false,
diff --git a/config.toml b/config.toml
index ebeba67..eebc404 100644
--- a/config.toml
+++ b/config.toml
@@ -173,6 +173,7 @@ mail = "name@example.com"
 mastodon = "@your-user-name"
 element = "matrix.example.com"
 buymeacoffee = "your-user-name"
+kofi = "your-user-name"
 discord = "your-discord" # Everything after https://discord.com/   eg: invite/my-server  *or*  servers/my-server-id
 twitter = "your-user-name"
 facebook = "your-user-name"
diff --git a/sass/_functions.scss b/sass/_functions.scss
index 2f4029a..dd6880a 100644
--- a/sass/_functions.scss
+++ b/sass/_functions.scss
@@ -102,6 +102,7 @@
     home: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M9 22V12h6v10M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E",
     instagram: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.4A4 4 0 1 1 12.6 8a4 4 0 0 1 3.4 3.4zm1.5-4.9h.01'/%3E%3C/svg%3E",
     linkedin: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E",
+    kofi: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='%23fff' d='M2 5h15c8 0 8 10 0 10-1 0-1 0-1 1v2q0 1-1 1H2q-1 0-1-1V6q0-1 1-1m14 4v2c0 1 0 1 1 1 4 0 4-4 0-4-1 0-1 0-1 1'/%3E%3Cpath fill='#{map-get($p, f)}' d='M9 16C2 11 5 6 9 9c4-3 7 2 0 7' /%3E%3C/svg%3E",
     mail: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m22 6-10 7L2 6m2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2Z'/%3E%3C/svg%3E",
     mastodon: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M2 8c0 5.7-.2 12.6 5 14 2 .6 3.7.7 5 .6 2.4-.1 3.8-.9 3.8-.9l-.1-1.8s-1.7.6-3.7.5c-1.9 0-4-.2-4.2-2.6a5 5 90 0 1 0-.7c4 1 7.5.5 8.4.4 2.7-.4 5-2 5.3-3.6.5-2.4.4-5.8.4-5.8C22 3.4 19 2 19 2 15.9.6 8 .6 5.1 2c0 0-3 1.4-3 6zm4.5-2.3c1.2-1.4 3.8-1.5 5 .3l.5.9.6-1c1.1-1.7 3.7-1.6 4.9-.2 1.1 1.3.9 2.5.9 8.4H16V8.6c0-2.4-3-2.5-3 .3v3h-2V9c0-2.8-3-2.7-3-.3V14H5.6c0-5.9-.2-7.1 1-8.4z'/%3E%3C/svg%3E",
     matrix: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M.6.6v22.8H3v.6H0V0h3v.6zm7 7.2V9h.1c3.2-2.3 4.3 0 4.8.3C14.9 6.7 18 8 18 11v5h-1.5v-5a1 1 0 0 0-3.5 0v5h-1.7v-5a1 1 0 0 0-3.7 0v5H6V7.8zm15.8 15.7V.4H21V0h3v24h-3v-.6z'/%3E%3C/svg%3E",
diff --git a/sass/abridge.scss b/sass/abridge.scss
index ac01c1a..e457c5c 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -33,6 +33,7 @@ $icon-mastodon: true !default;
 $icon-element: true !default;
 $icon-matrix: false !default;
 $icon-buymeacoffee: true !default;
+$icon-kofi: true !default;
 $icon-twitter: true !default;
 $icon-facebook: true !default;
 $icon-linkedin: true !default;
@@ -1284,6 +1285,7 @@ $syntax: true !default;//syntax highlighting for code blocks
   @if $icon-globe {.globe { background-image: functions.icon(globe, "%23888", 2, "none", $ic) }}
   @if $icon-home {.home { background-image: functions.icon(home, "%23888", 2, "none", $ic) }}
   @if $icon-instagram {.instagram { background-image: functions.icon(instagram, "%23e07", 2, "none", $ic) }}
+  @if $icon-kofi {.kofi { background-image: functions.icon(kofi, "%23888", 1.5, "%23f55", $ic) }}
   @if $icon-linkedin {.linkedin { background-image: functions.icon(linkedin, "%2326a", 2, "none", $ic) }}
   @if $icon-mail {.mail { background-image: functions.icon(mail, "%23888", 2, "none", $ic) }}
   @if $icon-mastodon {.mastodon { background-image: functions.icon(mastodon, "none", 1, "%2328c", $ic) }}
diff --git a/templates/macros/social.html b/templates/macros/social.html
index 2b8f841..6ad83de 100644
--- a/templates/macros/social.html
+++ b/templates/macros/social.html
@@ -48,6 +48,8 @@
           <a href="https://discord.com/{{ config.extra.discord }}/" target="_blank" title="Discord"><i type="Button" class="svg discord" title="Discord"></i></a>{% endif -%}
           {%- if config.extra.youtube -%}
           <a href="https://www.youtube.com/{{ config.extra.youtube }}" target="_blank" title="YouTube"><i type="Button" class="svg youtube" title="YouTube"></i></a>{% endif -%}
+          {%- if config.extra.kofi -%}
+          <a href="https://www.ko-fi.com/{{ config.extra.kofi }}/" target="_blank" title="Support me on Ko-fi"><i type="Button" class="svg kofi" title="Support me on Ko-fi"></i></a>{% endif -%}
           {%- if config.extra.buymeacoffee -%}
           <a href="https://www.buymeacoffee.com/{{ config.extra.buymeacoffee }}/" target="_blank" title="Buy Me A Coffee"><i type="Button" class="svg buymeacoffee" title="Buy Me A Coffee"></i></a>{% endif -%}
           {%- if config.extra.github_sponsor -%}