Adding Buy Me a Coffee!

Author: SteveWilkes

_layouts/default.html

@@ -20,6 +20,10 @@
 
     <!-- CSS Styles -->
     <link href="/assets/css/style.css" rel="stylesheet">
+
+    {% if page.layout == 'post' %}
+    <link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">
+    {% endif %}
 </head>
 
 {% capture layout %}{% if page.layout %}layout-{{ page.layout }}{% endif %}{% endcapture %}
@@ -41,6 +45,11 @@
             </div><!-- .inner-wide -->
         </div><!-- .site-content -->
     </div><!-- .site -->
+    {% if page.layout == 'post' %}
+    <a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/agileobjects">
+        <img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:5px;font-size:28px !important;">Buy me a coffee</span>
+    </a>
+    {% endif %}
     <!-- Javascript Assets -->
     <script src="/assets/js/ao.min.js"></script>
     {% if page.layout == 'post' %}

_layouts/post.html

@@ -85,5 +85,4 @@ <h3 class="post-title"><a href="{{ page.next.url }}">{{ page.next.title }}</a></
         {% endif %}
     </section><!-- .read-next -->
     {% include tag-cloud.html %}
-
 </main><!-- .site-main -->

_sass/_buy-me-a-coffee.scss

@@ -0,0 +1,41 @@
+@import "_variables.scss";
+
+.bmc-button img {
+    border: none !important;
+    box-shadow: none !important;
+    height: 34px !important;
+    margin-bottom: 1px !important;
+    vertical-align: middle !important;
+    width: 35px !important;
+}
+
+.bmc-button {
+    background-color: #FFFFFF !important;
+    bottom: 2%;
+    border: 1px solid transparent !important;
+    border-radius: 5px !important;
+    -webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
+    box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;
+    -webkit-box-sizing: border-box !important;
+    box-sizing: border-box !important;
+    color: #000000 !important;
+    display: inline-flex !important;
+    font-family: 'Cookie', cursive !important;
+    font-size: 22px !important;
+    height: 51px !important;
+    letter-spacing: 0.6px !important;
+    line-height: 35px !important;
+    margin: 0 auto !important;
+    padding: 7px 15px 7px 10px !important;
+    position: fixed;
+    right: 5%;
+    text-decoration: none !important;
+}
+
+.bmc-button:hover, .bmc-button:active, .bmc-button:focus {
+    -webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
+    box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
+    color: #000000 !important;
+    opacity: 0.85 !important;
+    text-decoration: none !important;
+}

assets/css/style.scss

@@ -13,4 +13,5 @@
 @import "comments";
 @import "search";
 @import "footer";
-@import "media-queries";
+@import "media-queries";
+@import "buy-me-a-coffee";