Merge pull request #119 from SongStitch/feature/add-donation-links

add kofi elements to github and website

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: songstitch

README.md

@@ -19,6 +19,7 @@
 [![Website Status](https://img.shields.io/website?label=songstitch.art&style=flat-square&url=https%3A%2F%2Fsongstitch.art%2F)](https://songstitch.art/)
 [![CI status](https://img.shields.io/github/actions/workflow/status/SongStitch/song-stitch/ci-cd.yml?branch=main&style=flat-square&logo=github)](https://github.com/SongStitch/song-stitch/actions?query=branch%3Amain)
 [![License](https://img.shields.io/github/license/SongStitch/song-stitch?style=flat-square)](/LICENSE)
+[![Ko-Fi](https://img.shields.io/badge/kofi-%23FF5E5B.svg?style=flat-square&logo=kofi&logoColor=black)](<[https://github.com/prettier/prettier](https://ko-fi.com/songstitch)>)
 
 </div>
 

ui/src/lib/Footer.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import appstore_icon from '../assets/images/appstore_icon.png';
+  import KofiWidget from './components/KofiWidget.svelte';
+
   let random = Math.random();
   let names = ['BradLewis', 'TheDen'];
   if (random > 0.5) {
@@ -8,6 +10,9 @@
 </script>
 
 <div class="footer">
+  <div class="kofi-container">
+    <KofiWidget />
+  </div>
   <p class="appstore-container">
     <a
       href="https://apps.apple.com/au/app/songstitch/id6450189672"
@@ -89,12 +94,12 @@
     text-align: center;
     text-align: -webkit-center;
   }
+  .kofi-container {
+    padding-top: 2em;
+  }
   .appstore-icon {
     height: 50px;
   }
-  .appstore-container {
-    padding-top: 1em;
-  }
   a.href-links:link {
     color: black;
   }

ui/src/lib/components/KofiWidget.svelte

@@ -0,0 +1,49 @@
+<script>
+  import logo from '../../assets/images/cup-border.webp';
+</script>
+
+<span id="spanPreview" class="imgPreview"
+  ><style>
+img.kofiimg{display: initial!important;vertical-align:middle;height:13px!important;width:20px!important;padding-top:0!important;padding-bottom:0!important;border:none;margin-top:0;margin-right:5px!important;margin-left:0!important;margin-bottom:3px!important;content:url('https://storage.ko-fi.com/cdn/cup-border.png')}.kofiimg:after{vertical-align:middle;height:25px;padding-top:0;padding-bottom:0;border:none;margin-top:0;margin-right:6px;margin-left:0;margin-bottom:4px!important;content:url('https://storage.ko-fi.com/cdn/whitelogo.svg')}.btn-container{display:inline-block!important;white-space:nowrap;min-width:160px}span.kofitext{color:#fff !important;letter-spacing: -0.15px!important;text-wrap:none;vertical-align:middle;line-height:33px !important;padding:0;text-align:center;text-decoration:none!important; text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);}.kofitext a{color:#fff !important;text-decoration:none:important;}.kofitext a:hover{color:#fff !important;text-decoration:none}a.kofi-button{box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);line-height:36px!important;min-width:150px;display:inline-block!important;background-color:#29abe0;padding:2px 12px !important;text-align:center !important;border-radius:12px;color:#fff;cursor:pointer;overflow-wrap:break-word;vertical-align:middle;border:0 none #fff !important;font-family:'Quicksand',Helvetica,Century Gothic,sans-serif !important;text-decoration:none;text-shadow:none;font-weight:700!important;font-size:14px !important}a.kofi-button:visited{color:#fff !important;text-decoration:none !important}a.kofi-button:hover{opacity:.85;color:#f5f5f5 !important;text-decoration:none !important}a.kofi-button:active{color:#f5f5f5 !important;text-decoration:none !important}.kofitext img.kofiimg {height:15px!important;width:22px!important;display: initial;animation: kofi-wiggle 3s infinite;}@keyframes kofi-wiggle{0%{transform:rotate(0) scale(1)}60%{transform:rotate(0) scale(1)}75%{transform:rotate(0) scale(1.12)}80%{transform:rotate(0) scale(1.1)}84%{transform:rotate(-10deg) scale(1.1)}88%{transform:rotate(10deg) scale(1.1)}92%{transform:rotate(-10deg) scale(1.1)}96%{transform:rotate(10deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
+  </style><link
+    href="https://fonts.googleapis.com/css?family=Quicksand:400,700"
+    rel="stylesheet"
+    type="text/css"
+  />
+  <div class="btn-container">
+    <a
+      title="Support me on ko-fi.com"
+      class="kofi-button"
+      href="https://ko-fi.com/P5P3NPGIU"
+      target="_blank"
+    >
+      <span class="kofitext">
+        <img src={logo} alt="Ko-fi donations" class="kofiimg" />
+        Support Us on Ko-fi
+      </span>
+    </a>
+  </div></span
+>
+
+<style>
+  .kofi-button {
+    box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
+    line-height: 36px !important;
+    min-width: 150px;
+    display: inline-block !important;
+    background-color: #275efe;
+    padding: 2px 12px !important;
+    text-align: center !important;
+    border-radius: 4px;
+    color: #fff;
+    cursor: pointer;
+    overflow-wrap: break-word;
+    vertical-align: middle;
+    border: 0 none #fff !important;
+    font-family: 'Quicksand', Helvetica, Century Gothic, sans-serif !important;
+    text-decoration: none;
+    text-shadow: none;
+    font-weight: 700 !important;
+    font-size: 14px !important;
+  }
+</style>