prettied up the demo page

This commit is contained in:
Joshua Seigler 2016-07-01 01:39:03 -04:00
parent 27cd5fa4e8
commit 7f00d09e1e

View file

@ -6,25 +6,41 @@
<title>Embeddable Cryptocurrency Charts : Cryptohistory</title> <title>Embeddable Cryptocurrency Charts : Cryptohistory</title>
<style> <style>
*, *:after, *:before { box-sizing: inherit; } *, *:after, *:before { box-sizing: inherit; }
html {
background-image: linear-gradient(105deg, #403, #107);
background-attachment: fixed;
}
body { body {
font-family: sans-serif; font-family: sans-serif;
background-color: #ffe;
line-height: 1.25rem; line-height: 1.25rem;
margin: 0; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
color: white;
max-width: 60em;
min-height: 100vh;
background-color: rgba(0,0,0,0.25);
position: relative;
}
body:before {
content: '';
display: table;
}
a {
color: white;
} }
header { header {
padding: 0 2rem; padding: 0 2rem;
} }
main { main {
margin: 0 auto 0 0; padding: 0 2rem 8rem;
padding: 0 2rem 4rem;
max-width: 70em;
} }
section { section {
display: block; display: block;
margin: 1rem 0; margin: 1rem 0;
} }
section + section {
margin-top: 2rem;
}
figure { figure {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -36,7 +52,10 @@
border: 1px dashed rgba(0,0,0,0.2); border: 1px dashed rgba(0,0,0,0.2);
font-size: 1.2em; font-size: 1.2em;
line-height: 1.25rem; line-height: 1.25rem;
background-color: white; background-color: black;
}
img {
max-width: 100%;
} }
footer { footer {
position: absolute; position: absolute;
@ -52,10 +71,10 @@
</header> </header>
<main> <main>
<section> <section>
<h2>Poloniex Dash/BTC Price</h2> <h2>SVG and PNG charts with your favorite cryptocurrencies</h2>
<figure> <figure>
<img src="/charts/dark/dash-btc/7d/svg" alt="Poloniex Dash/BTC price"> <img src="/charts/light/dash-btc/7d/svg" alt="Poloniex Dash/BTC price">
<figcaption>7 Day Dash price in BTC <code>http://cryptohistory.org/charts/dark/dash-btc/7d/svg</code></figcaption> <figcaption>7 Day Dash price in BTC <code>http://cryptohistory.org/charts/light/dash-btc/7d/svg</code></figcaption>
</figure> </figure>
</section> </section>
<section> <section>
@ -64,9 +83,15 @@
<code>http://cryptohistory.org/charts/{theme}/{currency}-btc/{timespan}/{format}</code>.</p> <code>http://cryptohistory.org/charts/{theme}/{currency}-btc/{timespan}/{format}</code>.</p>
<p>Theme: <code>dark</code> or <code>light</code>. (More planned)</p> <p>Theme: <code>dark</code> or <code>light</code>. (More planned)</p>
<p>Currency: anything active on Poloniex. Prices are all in bitcoin.</p> <p>Currency: anything active on Poloniex. Prices are all in bitcoin.</p>
<p>Timespan: <code>30d</code>, <code>7d</code>, or <code>24h</code>. (More planned)</p> <p>Timespan: <code>7d</code> or <code>24h</code>. (More planned)</p>
<p>Format: <code>svg</code> (best) or <code>png</code>.</p> <p>Format: <code>svg</code> (best) or <code>png</code>.</p>
</section> </section>
<section>
<h2>Examples:</h2>
<p>Ethereum 24h, dark SVG: <code><a href="/charts/dark/eth-btc/24h/svg" target="_blank">http://cryptohistory.org/charts/dark/eth-btc/24h/svg</a></code></p>
<p>Litecoin 7d, light colored PNG: <code><a href="/charts/dark/ltc-btc/7d/png" target="_blank">http://cryptohistory.org/charts/dark/ltc-btc/7d/png</a></code></p>
<p>Factom 7d, dark SVG: <code><a href="/charts/dark/fct-btc/24h/svg" target="_blank">http://cryptohistory.org/charts/dark/fct-btc/24h/svg</a></code></p>
</section>
</main> </main>
<footer> <footer>
Made by <a href="https://joshua.seigler.net/">Joshua Seigler</a> using <a href="https://github.com/seigler/neat-charts">seigler/neat-charts</a>, <a href="http://altorouter.com/">AltoRouter</a>, and <a href="http://www.phpfastcache.com/">phpfastcache</a> with data from the <a href="https://poloniex.com/support/api/">Poloniex public API</a>. Made by <a href="https://joshua.seigler.net/">Joshua Seigler</a> using <a href="https://github.com/seigler/neat-charts">seigler/neat-charts</a>, <a href="http://altorouter.com/">AltoRouter</a>, and <a href="http://www.phpfastcache.com/">phpfastcache</a> with data from the <a href="https://poloniex.com/support/api/">Poloniex public API</a>.