Commit 0a27a35d authored by sajolida's avatar sajolida

Add income diversity chart to /donate (#16923)

parent 919b58db
......@@ -149,7 +149,7 @@ span.title {
/* Other ways */
#other-ways-1, #other-ways-2, #other-ways-3, #meet-partner {
#other-ways-1, #other-ways-2, #other-ways-3, #income {
margin-top: 2em;
background: #f5f5f5;
box-sizing: border-box;
......@@ -234,10 +234,10 @@ figure {
.key-label {
margin: 0 0.5em;
}
#key-releases .key-dot { background-color: #5da5da; }
#key-admin .key-dot { background-color: #faa43a; }
#key-features .key-dot { background-color: #60bd68; }
#key-infrastructure .key-dot { background-color: #f17cb0; }
#key-releases .key-dot, #key-individuals .key-dot { background-color: #5da5da; }
#key-admin .key-dot, #key-ngos .key-dot { background-color: #faa43a; }
#key-features .key-dot, #key-us .key-dot { background-color: #60bd68; }
#key-infrastructure .key-dot, #key-companies .key-dot { background-color: #f17cb0; }
#key-help .key-dot { background-color: #b2912f; }
#key-meetings .key-dot { background-color: #b276b2; }
#key-ux .key-dot { background-color: #decf3f; }
......@@ -527,6 +527,39 @@ permitted by law.</strong></p>
</div> <!-- .row -->
<div id="income" class="row">
<div class="col-md-12">
<h3>Where our money comes from</h3>
<!-- Speadsheet in fundraising.git:tools -->
<figure>
<!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
<div class="figure-content">
<svg width="75%" height="75%" viewBox="0 0 64 64">
<!-- stroke-dashoffset = 100 - sum(lengths of preceding segments) + offset of 1st segment -->
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#5da5da" stroke-width="32" stroke-dasharray="36 64" stroke-dashoffset="25" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#faa43a" stroke-width="32" stroke-dasharray="30 70" stroke-dashoffset="89" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#60bd68" stroke-width="32" stroke-dasharray="25 75" stroke-dashoffset="59" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#f17cb0" stroke-width="32" stroke-dasharray="9 91" stroke-dashoffset="34" aria-labelledby=""></circle>
</svg>
</div>
<figcaption class="figure-key">
<ul class="figure-key-list">
<li id="key-individuals"><div class="key-dot"></div><div class="key-label">Individuals</div><div class="key-percent">(36%)</div></li>
<li id="key-ngos"><div class="key-dot"></div><div class="key-label">Foundations & NGOs</div><div class="key-percent">(30%)</div></li>
<li id="key-us"><div class="key-dot"></div><div class="key-label">Related to US government</div><div class="key-percent">(25%)</div></li>
<li id="key-companies"><div class="key-dot"></div><div class="key-label">Private companies</div><div class="key-percent">(9%)</div></li>
</ul>
</figcaption>
</figure>
</div>
</div> <!-- .row -->
<div id="meet-partner" class="row">
<div class="col-md-12">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment