Add liberapay to funding (elementary#2270)

* Add files via upload Liberapay logo * Add Liberapay to get-involved.php * Move blocks around. * Update get-involved.php * Rework copy to fit better * Rework styling for new Funding layout
foxy4096 · Oct 16, 2019 · faff2f0 · faff2f0
1 parent 118dc84
commit faff2f0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/_images/get-involved/liberapay_logo_black.svg b/_images/get-involved/liberapay_logo_black.svg
diff --git a/_styles/get-involved.css b/_styles/get-involved.css
@@ -81,13 +81,18 @@ section {
         0 5px 10px -2px rgba(235, 178, 41, 0.5);
 }
 
-#funding .third > img {
-    margin: -4px; /* Fix some issue to match i.fa */
+#funding i,
+#funding img.logo {
+    display: block;
+    font-size: 48px;
+    height: 48px;
+    margin: 0 auto;
 }
 
-#funding .two-thirds > img {
-    height: 48px;
-    margin: -12px;
+#funding .third i,
+#funding .third img.logo {
+    font-size: 32px;
+    height: 32px;
 }
 
 #paypalform {

diff --git a/get-involved.php b/get-involved.php
@@ -41,16 +41,26 @@
     <div class="grid">
         <div class="two-thirds">
             <h2>Funding</h2>
-            <p class="text-center">With your help, we've been able to grow from a small group of passionate volunteers into a tiny company. Every little bit of help is one step closer to hiring another full-time developer.</p>
+            <p class="text-center">With your help, we've been able to grow from a small group of passionate volunteers into a tiny company. Every little bit of help is one step closer to hiring another full-time contributor and tackling even more ambitious problems.</p>
         </div>
     </div>
 
-    <section class="grid">
-        <div class="third">
-            <img alt="Patreon" src="images/get-involved/patreon.svg">
-            <p>Patreon works like an ongoing crowdfunding campaign. Choose an amount, get rewards, and help us reach our goals. <a class="read-more" href="https://www.patreon.com/" target="_blank" rel="noopener">Learn More</a></p>
+    <div class="grid">
+        <div class="half">
+            <img class="logo" alt="Patreon" src="images/get-involved/patreon.svg">
+            <p>Patreon works like an ongoing crowdfunding campaign. Choose an amount to contribute each month to help us reach our goals. Plus, earn exclusive rewards and read exclusive content early. <a class="read-more" href="https://www.patreon.com/" target="_blank" rel="noopener">Learn More</a></p>
             <a class="button flat" href="https://www.patreon.com/elementary" target="_blank" rel="noopener">Become a Patron</a>
         </div>
+        <div class="half">
+            <img class="logo" alt="Bountysource" src="images/open-source/bountysource.svg">
+            <p>Directly fund the developers committing fixes or creating new features. Set a bounty on the issues that matter to you most, fund a specific app, or set up a recurring subscription. <a class="read-more" href="https://github.com/bountysource/frontend/wiki/Frequently-Asked-Questions" target="_blank" rel="noopener">Learn More</a></p>
+
+            <a class="button flat" href="https://github.com/search?utf8=%E2%9C%93&q=is%3Aopen+is%3Aissue+user%3Aelementary+label%3A%22bounty%22&type=">Bountied Bugs</a>
+            <a class="button flat suggested-action" href="https://www.bountysource.com/teams/elementary">BountySource</a>
+        </div>
+    </div>
+
+    <div class="grid">
         <div class="third">
             <i class="fab fa-paypal"></i>
             <p>Easily use a debit card, credit card, or PayPal account. You can choose a one-time payment or set up recurring payments.</p>
@@ -61,23 +71,16 @@
             <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
             </form>
         </div>
+        <div class="third">
+            <img class="logo" alt="Liberapay" src="images/get-involved/liberapay_logo_black.svg">
+            <p>Set up a recurring contribution through Liberapay, the open source and non-profit funding platform.</p>
+            <a class="button flat" title="Liberapay" href="https://liberapay.com/elementary/" target="_blank" rel="noopener">Donate</a>
+        </div>
         <div class="third">
             <i class="fa fa-shopping-cart"></i>
             <p>Help us financially, plus get some exclusive elementary gear to show your support to friends, family, and coworkers.</p>
             <a class="button flat" href="<?php echo $page['lang-root'].'store/'; ?>" target="_blank" rel="noopener">Visit Store</a>
         </div>
-    </section>
-
-    <div class="grid">
-        <div class="two-thirds">
-            <img alt="Bountysource" src="images/open-source/bountysource.svg">
-            <p>Bountysource puts funds directly in the hands of developers by rewarding them for committing fixes or creating new features. Set a bounty on the issues that matter to you most or fund a specific app. You can also set up a recurring subscription. <a class="read-more" href="https://github.com/bountysource/frontend/wiki/Frequently-Asked-Questions" target="_blank" rel="noopener">Learn More</a></p>
-
-            <div class="actions">
-                <a class="button flat" href="https://github.com/search?utf8=%E2%9C%93&q=is%3Aopen+is%3Aissue+user%3Aelementary+label%3A%22bounty%22&type=">Bountied Bugs</a>
-                <a class="button flat suggested-action" href="https://www.bountysource.com/teams/elementary">BountySource</a>
-            </div>
-        </div>
     </div>
 </section>