revamp 'support SMAPI' section on main page

src/SMAPI.Web/Views/Index/Index.cshtml

@@ -6,9 +6,9 @@
     ViewData["Title"] = "SMAPI";
 }
 @section Head {
-    <link rel="stylesheet" href="~/Content/css/index.css?r=20180615" />
+    <link rel="stylesheet" href="~/Content/css/index.css?r=20190620" />
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" crossorigin="anonymous"></script>
-    <script src="~/Content/js/index.js?r=20180615"></script>
+    <script src="~/Content/js/index.js?r=20190620"></script>
 }
 
 <p id="blurb">
@@ -79,27 +79,32 @@ else
     <p>See the <a href="https://github.com/Pathoschild/SMAPI/blob/develop/docs/release-notes.md#release-notes">release notes</a> and <a href="@SiteConfig.Value.ModListUrl">mod compatibility list</a> for more info.</p>
 }
 
-<h2 id="donate">Donate to support SMAPI ♥</h2>
+<h2 id="donate">Support SMAPI ♥</h2>
 <p>
     SMAPI is an open-source project by Pathoschild. It will always be free, but donations
     are much appreciated to help pay for development, server hosting, domain fees, coffee, etc.
 </p>
-<ul id="support-links">
+
-    <li><a href="https://www.paypal.me/pathoschild">Donate once</a></li>
+<ul id="donate-links">
     <li>
-        <a href="https://www.patreon.com/pathoschild">Donate $1 per month (or more)</a><br />
+        <a href="https://www.patreon.com/pathoschild" class="donate-button">
-        <small>
+            <img src="Content/images/patreon.png" /> Become a patron
-            You can cancel anytime. You'll have access to all private posts with behind-the-scenes
+        </a>
-            info, upcoming features, and early previews of SMAPI updates. You can optionally
+    </li>
-            provide early feedback on SMAPI features to influence development. Donate $5/month and
+    <li>
-            you'll be publicly credited (with optional link) below!
+        <a href="https://ko-fi.com/pathoschild" class="donate-button">
-        </small>
+            <img src="Content/images/ko-fi.png"/> Buy me a coffee
+        </a>
+    </li>
+    <li>
+        <a href="https://www.paypal.me/pathoschild" class="donate-button">
+            <img src="Content/images/paypal.png"/> Donate via PayPal
+        </a>
     </li>
 </ul>
 
 <p>
     Special thanks to
-    acerbicon,
     <a href="https://www.nexusmods.com/stardewvalley/users/31393530">ChefRude</a>,
     <a href="https://github.com/dittusch">dittusch</a>,
     hawkfalcon,
@@ -108,7 +113,7 @@ else
     <a href="https://www.nexusmods.com/users/12252523">Karmylla</a>,
     Pucklynn,
     Robby LaFarge,
-    and a few anonymous users for their ongoing support; you're awesome! 🏅
+    and a few anonymous users for their ongoing support on Patreon; you're awesome!
 </p>
 
 <h2 id="modcreators">For mod creators</h2>

src/SMAPI.Web/wwwroot/Content/css/index.css

@@ -106,7 +106,25 @@ h1 {
     padding-left: 1em;
 }
 
-#support-links li small {
+#donate-links li {
-    display: block;
+    list-style: none;
-    width: 50em;
+    margin-bottom: 5px;
+}
+
+#donate-links .donate-button {
+    display: inline-block;
+    min-width: 10em;
+    background: #2A413B;
+    padding: 6px 12px;
+    font-family: Quicksand, Helvetica, Century Gothic, sans-serif;
+    text-decoration: none;
+    font-weight: 700;
+    color: #FFF;
+    border-radius: 8px;
+}
+
+#donate-links .donate-button img {
+    vertical-align: middle;
+    max-height: 15px;
+    max-width: 15px;
 }