Add Buy Me A Coffee button

helenclx · Sep 12, 2024 · 2c42a7c · 2c42a7c
1 parent d6a900a
commit 2c42a7c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,9 @@
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 
+# My source files
+
+__Source
+
 # Eleventy site output folder
 
 _site/

diff --git a/src/_includes/global/footer.njk b/src/_includes/global/footer.njk
@@ -4,6 +4,8 @@
         <img src="/assets/icons/helenchong-200x40.png" alt="Helen Chong's 200×40 website button" width="200" height="40">
     </div>
 
+    <div class="widgets"><a href="https://buymeacoffee.com/helenchong"><img src="/assets/icons/buymeacoffee.png" alt="Buy Me a Coffee" width="200" height="59"></a></div>
+
     {% include "global/socials.njk" %}
 
     <p>Built with &#x2661; by {{ sitemeta.siteAuthor.name }}. 2023–{% currentYear %}.</p>

diff --git a/src/assets/css/components.css b/src/assets/css/components.css
@@ -37,10 +37,18 @@
     padding-left: 0.5em;
 }
 
+/* Web widgets */
+.widgets {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+* + .widgets { margin-top: var(--sz-list-gap); }
+
 /* Site buttons */
 .site-btns {
     align-items: center;
-    gap: 0.5em;
+    gap: var(--sz-list-gap);
 }
 
 /* Breadcumbs */

diff --git a/src/assets/css/home.css b/src/assets/css/home.css
@@ -105,12 +105,6 @@
 }
 
 /* Webrings and Badges */
-.widgets {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
 .widgets.webrings {
     gap: 2em;
     margin-top: 1.5em;

diff --git a/src/assets/css/socials.css b/src/assets/css/socials.css
@@ -3,8 +3,8 @@
     grid-area: scial;
     display: grid;
     place-content: center;
-    margin-top: 0.7em;
 }
+* + .socials { margin-top: 0.7em; }
 
 .socials__links {
     list-style-type: "";

diff --git a/src/assets/icons/buymeacoffee.png b/src/assets/icons/buymeacoffee.png