Add better BuyMeACoffee widget in the corner rather than randomly sat arond the page

This isn't using the default widget, because that requires javascript I don't want.

data/social.yml

@@ -120,7 +120,6 @@ footer_accounts:
   - self-hosted-gitlab
   - reddit
   - hacker-news
-  - buymeacoffee
 
 navbar_accounts:
   - github

layouts/_default/about.html

@@ -3,12 +3,6 @@
   <div class="container">
     {{ partial "content.html" . }}
 
-    <div class="text-center mt-4 mb-5">
-      <a href="{{ .Site.Data.social.accounts.buymeacoffee.link }}" target="_blank">
-        <img src="https://cdn.buymeacoffee.com/buttons/v2/arial-orange.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 163px !important;">
-      </a>
-    </div>
-
     <div class="row">
       {{ range $i, $e := sort .Site.Data.social.accounts "name" }}
         <div class="col-sm-3 mt-3">

layouts/_default/baseof.html

@@ -25,6 +25,10 @@
 
     {{ block "main" . }}{{ end }}
 
+    {{ if not .IsHome }}
+      {{ partial "bmac-pill.html" . }}
+    {{ end }}
+
     {{ partial "footer.html" . }}
 
     {{ partial "script.html" "js/jquery.js" }}

layouts/partials/bmac-pill.html

@@ -0,0 +1,3 @@
+<a href="{{ .Site.Data.social.accounts.buymeacoffee.link }}" class="bmac-pill" title="Buy Me A Coffee">
+  <img src="https://cdn.buymeacoffee.com/widget/assets/coffee%20cup.svg" alt="Buy Me A Coffee" referrerpolicy="no-referrer"/>
+</a>

layouts/partials/share.html

@@ -6,7 +6,6 @@
             <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}" class="Share on Facebook"><i class="mx-1 fab fa-facebook" aria-hidden="true"></i></a>
             <a href="http://www.reddit.com/submit?url={{ .Permalink }}" title="Share on Reddit"><i class="mx-1 fab fa-reddit" aria-hidden="true"></i></a>
             <a href="{{ .Permalink }}" data-clipboard-text="{{ .Permalink }}" title="Copy link to clipboard"><i class="mx-1 fas fa-copy" aria-hidden="true"></i></a>
-            <a href="{{ .Site.Data.social.accounts.buymeacoffee.link }}" title="Buy me a coffee"><i class="{{ .Site.Data.social.accounts.buymeacoffee.icon }}"></i></a>
         </h3>
     </div>
 {{ end }}

static/src/scss/style.scss

@@ -295,3 +295,32 @@ a.no-color-change {
   }
 
 }
+
+
+.bmac-pill {
+  @extend .badge, .badge-primary;
+
+  @include media-breakpoint-up(md) {
+    display: flex;
+    position: fixed;
+    right: $spacer;
+    bottom: $spacer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 30px;
+    width: 60px;
+    height: 60px;
+
+    img {
+      margin: 0;
+      padding: 0;
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    margin-top: $spacer * 3;
+    width: 100%;
+  }
+}