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