[frontpage] Overhaul the download and donate part

ZhennanWu · Feb 19, 2015 · 68847ad · 68847ad
1 parent de68486
commit 68847ad
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 62 deletions.
diff --git 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
@@ -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
diff --git a/index.html b/index.html
@@ -84,46 +84,42 @@ <h2>This is CodeMirror</h2>
       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>