diff --git a/bin/release b/bin/release
index ba6630aaa8b3baf49c066e1d14e372fad0c59ab0..c6b97c1c0370fd6afcb0de7ba297d45ee944e4fb 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 837ba69782863edeb56137c3091f1446654f4992..881d2aa455138f1f13ea224ba9c1dc47f765458f 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
Binary files /dev/null and b/doc/yinyang.png differ
diff --git a/index.html b/index.html
index 2988d4a8a94fe8e53645928a3363a6a5d291b2c0..646598000637c5c9706ffda21d384f58b9b76892 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>