1.0.0-RC.6

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);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "windycoys",
-  "version": "1.0.0-RC.4",
+  "version": "1.0.0-RC.6",
   "description": "Wordpress theme for windycoys.com",
   "author": "Dan Head <me@danielhead.com>",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "@babel/preset-env": "^7.3.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.1.0",
-    "browser-sync": "^2.26.3",
+    "browser-sync": "^2.26.7",
     "cssnano": "^4.1.10",
     "docker-compose": "^0.12.0",
     "eslint": "^5.15.0",

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>