Add donate shortcode to banner

css/social.css

@@ -1,9 +1,18 @@
 .social {
-  text-align: right;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.social__item {
+  margin-left: var(--space-xs);
 }
 
 .social__link {
-  display: inline-block;
+  display: block;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
   transition: filter var(--transition-fs) ease-out,
     transform var(--transition-fs) ease-out;
   transform-origin: center bottom;
@@ -14,3 +23,17 @@
   filter: saturate(1.5) contrast(1.5);
   transform: scale(1.1);
 }
+
+/* Donate button */
+
+.social__item input[type="image"] {
+  transition: filter var(--transition-fs) ease-out,
+    transform var(--transition-fs) ease-out;
+  transform-origin: center bottom;
+}
+
+.social__item input[type="image"]:focus,
+.social__item input[type="image"]:hover {
+  filter: saturate(1.5) contrast(1.5);
+  transform: scale(1.1);
+}

theme/partials/banner.php

@@ -1,17 +1,26 @@
 <div class="social">
+  <div class="social__item">
     <a class="social__link" href="https://www.facebook.com/WindyCOYS/" aria-label="WindyCOYS on Facebook">
       <svg class="icon icon--facebook" aria-hidden="true">
         <use xlink:href="#icon-facebook"></use>
       </svg>
     </a>
+  </div>
+  <div class="social__item">
     <a class="social__link" href="https://twitter.com/windycoys/" aria-label="WindyCOYS on Twitter">
       <svg class="icon icon--twitter" aria-hidden="true">
         <use xlink:href="#icon-twitter"></use>
       </svg>
     </a>
+  </div>
+  <div class="social__item">
     <a class="social__link" href="/feed" aria-label="WindyCOYS RSS Feed">
       <svg class="icon icon--rss" aria-hidden="true">
         <use xlink:href="#icon-rss"></use>
       </svg>
     </a>
   </div>
+  <div class="social__item">
+    <?php echo do_shortcode('[paypal-donation]'); ?>
+  </div>
+</div>