From 2cb40af62f7511255e7fbffdd3f360273ed36ae6 Mon Sep 17 00:00:00 2001
From: Arjun Kathuria <arjun.kathuria8@gmail.com>
Date: Tue, 12 Oct 2021 15:35:42 +0530
Subject: [PATCH] make donate button primary call-to-action, move it
 above-the-fold for better visibility, move need-help section near footer

---
 docs/css/extra.css | 37 ++++++++++++++++++++++++-------------
 docs/index.md      | 23 +++++++++++++----------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/docs/css/extra.css b/docs/css/extra.css
index 2068ed4..44c272c 100644
--- a/docs/css/extra.css
+++ b/docs/css/extra.css
@@ -68,19 +68,6 @@ div.gh-badge img {
   height: 25px;
 }
 
-a.donate-badge img {
-  margin-top: 10px;
-  margin-bottom: 0;
-  padding: 0;
-  height: 35px;
-}
-
-@media only screen and (min-width: 1000px) {
-  a.donate-badge img {
-    margin-top: 0;
-  }
-}
-
 /* Definition List styles */
 
 dd {
@@ -273,6 +260,30 @@ footer > hr {
   }
 }
 
+.index-cta-donate .donate-button a {
+  position: absolute;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.index-cta-donate .donate-button {
+  margin: 10px auto;
+  position: relative;
+  display: block;
+  background: none;
+  padding: none;
+  border: none;
+  background: url("https://opencollective.com/webpack/donate/button@2x.png?color=blue");
+  width: 35%;
+  min-width: 240px;
+  max-width: 280px;
+  height: 50px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
 .ghcup-os-container {
   width: 100%;
   margin: 10px 0;
diff --git a/docs/index.md b/docs/index.md
index f7fb284..68ff946 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -54,20 +54,23 @@ hide:
 		<a href="https://gitlab.haskell.org/haskell/ghcup-hs/-/blob/master/scripts/bootstrap/bootstrap-haskell.ps1" target="_blank">What does this do?</a> <b>&nbsp;&middot;&nbsp;</b> <a href="https://www.haskell.org/ghcup/install/#manual-install">I don't like curl | sh</a> <div class="show-all-platforms"><b>&nbsp;&middot;&nbsp;</b> <a class="show-all-platforms-button" href="#">Show all platforms</a></div></p>
 	</div>
     </div>
-
-
 </section>
 
-<p id="help">
-Need help? Ask on <a href="https://kiwiirc.com/nextclient/irc.libera.chat/?nick=Guest%7C?#haskell,#haskell-ghcup"><img src="irc.svg" alt="" />IRC</a>, <a href="https://discord.gg/pKYf3zDQU7"><img src="Discord-Logo-Black.svg" alt="" />Discord</a>, <a href="https://app.element.io/#/room/#haskell-tooling:matrix.org"><img src="Matrix_logo.svg" alt=""/></a> or <a href="https://gitlab.haskell.org/haskell/ghcup-hs/issues">report a bug <img src="Octicons-bug.svg" alt="" /></a>
-<div id="collective" href="https://opencollective.com/ghcup#category-CONTRIBUTE" target="_blank">
-<a href="https://opencollective.com/ghcup#category-CONTRIBUTE" class="donate-badge">
-<img src="https://opencollective.com/webpack/donate/button@2x.png?color=blue" alt="Donate">
-</a>
-</div>
-</p>
+<section class="index-cta-donate">
+  <button class="donate-button">
+    <a href="https://opencollective.com/ghcup#category-CONTRIBUTE" class="donate-badge" />
+    </button>
+</section>
 
 ----
 
 ![GHCup](./ghcup.gif){: .center style="width:700px"}
 
+<p id="help">
+Need help? Ask on
+<a href="https://kiwiirc.com/nextclient/irc.libera.chat/?nick=Guest%7C?#haskell,#haskell-ghcup">
+<img src="irc.svg" alt="" />IRC</a>,
+<a href="https://discord.gg/pKYf3zDQU7"><img src="Discord-Logo-Black.svg" alt="" />Discord</a>, <a href="https://app.element.io/#/room/#haskell-tooling:matrix.org"><img src="Matrix_logo.svg" alt=""/></a> or <a href="https://gitlab.haskell.org/haskell/ghcup-hs/issues">report a bug <img src="Octicons-bug.svg" alt="" /></a>
+</p>
+
+<script type="text/javascript" src="javascripts/ghcup.js"></script>