From 68847ad9d5913c271050a5de4d647803ccfe5c42 Mon Sep 17 00:00:00 2001
From: Marijn Haverbeke <marijnh@gmail.com>
Date: Sun, 15 Feb 2015 11:56:50 +0100
Subject: [PATCH] [frontpage] Overhaul the download and donate part

---
 bin/release     |   4 +--
 doc/docs.css    |  88 ++++++++++++++++++++++++++++++++----------------
 doc/yinyang.png | Bin 0 -> 4633 bytes
 index.html      |  58 +++++++++++++++----------------
 4 files changed, 88 insertions(+), 62 deletions(-)
 create mode 100644 doc/yinyang.png

diff --git a/bin/release b/bin/release
index ba6630aaa..c6b97c1c0 100755
--- a/bin/release
+++ b/bin/release
@@ -41,6 +41,6 @@ rewrite("doc/compress.html", function(cmp) {
 });
 
 rewrite("index.html", function(index) {
-  return index.replace(/<strong>version \d+\.\d+<\/strong>/,
-                       "<strong>version " + simple + "</strong>");
+  return index.replace(/\.zip">\d+\.\d+<\/a>/,
+                       ".zip>" + simple + "</a>");
 });
diff --git a/doc/docs.css b/doc/docs.css
index 837ba6978..881d2aa45 100644
--- a/doc/docs.css
+++ b/doc/docs.css
@@ -148,49 +148,79 @@ section.first {
   z-index: 25;
 }
 
-.bankinfo {
-  text-align: left;
-  display: none;
-  padding: 0 .5em;
+.yinyang {
   position: absolute;
-  border: 2px solid #aaa;
-  border-radius: 5px;
-  background: #eee;
-  top: 10px;
-  left: 30px;
+  top: -10px;
+  left: 0; right: 0;
+  margin: auto;
+  display: block;
+  height: 120px;
+}
+
+.actions {
+  margin: 1em 0 0;
+  min-height: 100px;
+  position: relative;
 }
 
-.bankinfo_close {
+.actionspicture {
+  pointer-events: none;
   position: absolute;
-  top: 0; right: 6px;
+  height: 100px;
+  top: 0; left: 0; right: 0;
+}
+
+.actionlink {
+  pointer-events: auto;
+  font-family: arial;
+  font-size: 80%;
   font-weight: bold;
-  cursor: pointer;
+  position: absolute;
+  top: 0; bottom: 0;
+  line-height: 1;
+  height: 1em;
+  margin: auto;
 }
 
-.bigbutton {
-  cursor: pointer;
-  text-align: center;
-  padding: 0 1em;
-  display: inline-block;
+.actionlink.download {
   color: white;
-  position: relative;
-  line-height: 1.9;
-  color: white !important;
-  background: #A21313;
+  right: 50%;
+  margin-right: 13px;
+  text-shadow: -1px 1px 3px #b00, -1px -1px 3px #b00, 1px 0px 3px #b00;
+}
+
+.actionlink.fund {
+  color: #b00;
+  left: 50%;
+  margin-left: 15px;
+}
+
+.actionlink:hover {
+  text-decoration: underline;
+}
+
+.actionlink a {
+  color: inherit;
 }
 
-.bigbutton.right {
-  border-bottom-left-radius: 100px;
-  border-top-left-radius: 100px;
+.actionsleft {
+  float: left;
 }
 
-.bigbutton.left {
-  border-bottom-right-radius: 100px;
-  border-top-right-radius: 100px;
+.actionsright {
+  float: right;
+  text-align: right;
 }
 
-.bigbutton:hover {
-  background: #E30808;
+@media screen and (max-width: 800px) {
+  .actions {
+    padding-top: 120px;
+  }
+  .actionsleft, .actionsright {
+    float: none;
+    text-align: left;
+    margin-bottom: 1em;
+  }
 }
 
 th {
diff --git a/doc/yinyang.png b/doc/yinyang.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eafd3f1ca137898ede8c27d0e64d99919bdc1ab
GIT binary patch
literal 4633
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
P00000NkvXXu0mjf!~eO`

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 2988d4a8a..646598000 100644
--- a/index.html
+++ b/index.html
@@ -84,46 +84,42 @@
       matchBrackets: true
     });
   </script>
-  <div style="position: relative; margin: 1em 0;">
-    <a class="bigbutton left" href="http://codemirror.net/codemirror.zip">DOWNLOAD LATEST RELEASE</a>
-    <div><strong>version 4.12</strong> (<a href="doc/releases.html">Release notes</a>)</div>
-    <div>or use the <a href="doc/compress.html">minification helper</a></div>
-    <div style="position: absolute; top: 0; right: 0; text-align: right">
-      <span class="bigbutton right" onclick="document.getElementById('paypal').submit();">DONATE WITH PAYPAL</span>
-      <div style="position: relative">
-        or <span onclick="document.getElementById('bankinfo').style.display = 'block';" class=quasilink>Bank</span>,
-        <span onclick="document.getElementById('bcinfo').style.display = 'block';" class=quasilink>Bitcoin</span>,
-        <a href="http://www.patreon.com/marijn">Patreon</a><br>
-        <a href="https://gratipay.com/marijnh/">Gratipay</a><br>
-        <div id=bankinfo class=bankinfo>
-          <span class=bankinfo_close onclick="document.getElementById('bankinfo').style.display = '';">×</span>
-          Bank: <i>Rabobank</i><br/>
-          Country: <i>Netherlands</i><br/>
-          SWIFT: <i>RABONL2U</i><br/>
-          Account: <i>147850770</i><br/>
-          Name: <i>Marijn Haverbeke</i><br/>
-          IBAN: <i>NL26 RABO 0147 8507 70</i>
-        </div>
-        <div id=bcinfo class=bankinfo>
-          <span class=bankinfo_close onclick="document.getElementById('bcinfo').style.display = '';">×</span>
-          Bitcoin address: 1HVnnU8E9yLPeFyNgNtUPB5deXBvUmZ6Nx
-        </div>
-        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
-          <input type="hidden" name="cmd" value="_s-xclick"/>
-          <input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
-        </form>
+
+  <div class=actions>
+    <div class=actionspicture>
+      <img src="doc/yinyang.png" class=yinyang>
+      <div class="actionlink download">
+        <a href="http://codemirror.net/codemirror.zip">DOWNLOAD</a>
       </div>
-      <div>
-        Purchase <a href="http://codemirror.com">commercial support</a>
+      <div class="actionlink fund">
+        <a href="https://marijnhaverbeke.nl/fund/">FUND</a>
       </div>
     </div>
+    <div class=actionsleft>
+      Get the current version: <a href="http://codemirror.net/codemirror.zip">4.12</a>.<br>
+      You can see the <a href="https://github.com/codemirror/codemirror" title="Github repository">code</a> or<br>
+      read the <a href="doc/releases.html">release notes</a>.<br>
+      There is a <a href="doc/compress.html">minification helper</a>.
+    </div>
+    <div class=actionsright>
+      Software needs maintenance,<br>
+      maintainers need to subsist.<br>
+      Current funding status = <img src="//marijnhaverbeke.nl/fund/status_s.png" title="Current maintainer happiness" style="vertical-align: middle; height: 16px; width: 16px"><br>
+      You can help <a href="https://marijnhaverbeke.nl/fund/" title="Set up a monthly contribution">per month</a> or
+      <a title="Donate with Paypal" href="javascript:document.getElementById('paypal').submit();">once</a>.
+      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypal">
+        <input type="hidden" name="cmd" value="_s-xclick"/>
+        <input type="hidden" name="hosted_button_id" value="3FVHS5FGUY7CC"/>
+      </form>
+    </div>
   </div>
+  
 </section>
 
 <section id=features>
   <h2>Features</h2>
   <ul>
-    <li>Support for <a href="mode/index.html">over 60 languages</a> out of the box
+    <li>Support for <a href="mode/index.html">over 90 languages</a> out of the box
     <li>A powerful, <a href="mode/htmlmixed/index.html">composable</a> language mode <a href="doc/manual.html#modeapi">system</a>
     <li><a href="doc/manual.html#addon_show-hint">Autocompletion</a> (<a href="demo/xmlcomplete.html">XML</a>)
     <li><a href="doc/manual.html#addon_foldcode">Code folding</a>
-- 
GitLab