From ac3acde4d6f15118cd87383cf49c78d182dced11 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Fri, 13 Nov 2020 22:26:30 +0000
Subject: [PATCH] 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                 |  1 -
 layouts/_default/about.html     |  6 ------
 layouts/_default/baseof.html    |  4 ++++
 layouts/partials/bmac-pill.html |  3 +++
 layouts/partials/share.html     |  1 -
 static/src/scss/style.scss      | 29 +++++++++++++++++++++++++++++
 6 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 layouts/partials/bmac-pill.html

diff --git a/data/social.yml b/data/social.yml
index f09b270..6db6eb5 100644
--- a/data/social.yml
+++ b/data/social.yml
@@ -120,7 +120,6 @@ footer_accounts:
   - self-hosted-gitlab
   - reddit
   - hacker-news
-  - buymeacoffee
 
 navbar_accounts:
   - github
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 4d134ac..035e819 100644
--- a/layouts/_default/about.html
+++ b/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">
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 43359f8..e7d6c9d 100644
--- a/layouts/_default/baseof.html
+++ b/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" }}
diff --git a/layouts/partials/bmac-pill.html b/layouts/partials/bmac-pill.html
new file mode 100644
index 0000000..8982d11
--- /dev/null
+++ b/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>
diff --git a/layouts/partials/share.html b/layouts/partials/share.html
index dc00233..1297ca9 100644
--- a/layouts/partials/share.html
+++ b/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 }}
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index 49a9c9a..2984fd3 100644
--- a/static/src/scss/style.scss
+++ b/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%;
+  }
+}