Add Patreon bar

docs/_includes/footer.html

@@ -65,14 +65,18 @@
 
             <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
 
+            <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
+
+            <a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
+              <img src="/images/patreon.png" alt="Become a patron">
+            </a>
+
             <form class="paypal-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
               <input type="hidden" name="cmd" value="_s-xclick">
               <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
               <input type="image" src="{{site.url}}/images/paypal-donate.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
               <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
             </form>
-
-            <div class="fb-like" data-href="https://www.facebook.com/bulmaio" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
           </div>
         </div>
       </div>

docs/_includes/navbar.html

@@ -183,3 +183,5 @@
 
   </div>
 </nav>
+
+{% include patreon.html %}

docs/_includes/patreon.html

@@ -0,0 +1,8 @@
+<div class="bd-patreon">
+  <p class="bd-patreon-text">
+    <strong>Support Bulma</strong> on Patreon
+  </p>
+  <a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
+    <img src="/images/patreon.png" alt="Become a patron">
+  </a>
+</div>

docs/_sass/footer.sass

@@ -24,6 +24,7 @@
   display: flex
   flex-wrap: wrap
   justify-content: flex-start
+  max-width: 400px
   > iframe,
   > a,
   > form,
@@ -44,6 +45,8 @@
     align-items: center
     display: flex
     width: 130px
+  .bd-patreon-button
+    margin-right: 0.5rem
 
 #newsletter
   .input

docs/_sass/patreon.sass

@@ -0,0 +1,24 @@
+.bd-patreon
+  align-items: center
+  background-color: $patreon-blue
+  color: $white
+  display: flex
+  justify-content: center
+  padding: 0.5rem 1rem
+  strong
+    color: currentColor
+
+.bd-patreon-text
+  font-size: $size-small
+  line-height: 1.25
+  margin-right: 0.5rem
+
+.bd-patreon-button
+  display: inline-block
+  flex-shrink: 0
+  height: 30px
+  width: 128px
+
++from(480px)
+  .bd-patreon-text
+    margin-right: 1rem

docs/bulma-docs.sass

@@ -3,6 +3,8 @@
 $bootstrap: #6f5499
 $github: #333333
 $twitter: #55acee
+$patreon: #f96854
+$patreon-blue: #052d49
 
 @import "../bulma"
 @import "./_sass/highlight"
@@ -21,3 +23,4 @@ $twitter: #55acee
 @import "./_sass/love"
 @import "./_sass/bootstrap"
 @import "./_sass/klmn"
+@import "./_sass/patreon"