Commit 8dc2c498 authored by sajolida's avatar sajolida

Replace PNG chart by SVG code

parent 0d9445b2
......@@ -166,3 +166,55 @@ span.title {
#currency, #dollars-without-js h2, #euros-without-js {
display: none;
}
/* Expenses chart */
figure {
display: flex;
flex-direction: column;
}
@media (min-width: 640px) {
figure {
flex-direction: row;
}
}
.figure-content,
.figure-key {
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.figure-content svg {
height: auto;
}
.figure-key-list {
margin: 0;
padding: 0;
list-style: none;
}
.figure-key-list li {
margin: 0 0 8px;
padding: 0;
}
.key-dot {
display: inline-block;
vertical-align: top;
margin-top: 2px;
width: 18px;
height: 18px;
}
.figure-key {
font-size: 14px;
font-weight: bold;
}
.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-help .key-dot { background-color: #b2912f; }
#key-meetings .key-dot { background-color: #b276b2; }
#key-ux .key-dot { background-color: #decf3f; }
......@@ -461,7 +461,32 @@ permitted by law.</strong></p>
<h3>How we spend our money</h3>
<p>[[!img expenses.png link="no"]]</p>
<figure>
<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="22 78" stroke-dashoffset="25" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#faa43a" stroke-width="32" stroke-dasharray="22 78" stroke-dashoffset="103" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#60bd68" stroke-width="32" stroke-dasharray="21 79" stroke-dashoffset="81" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#f17cb0" stroke-width="32" stroke-dasharray="10 90" stroke-dashoffset="60" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#b2912f" stroke-width="32" stroke-dasharray="10 90" stroke-dashoffset="50" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#b276b2" stroke-width="32" stroke-dasharray="10 90" stroke-dashoffset="40" aria-labelledby=""></circle>
<circle cx="32" cy="32" r="15.91549430918954" fill="transparent" stroke="#decf3f" stroke-width="32" stroke-dasharray="5 95" stroke-dashoffset="30" aria-labelledby=""></circle>
</svg>
</div>
<figcaption class="figure-key">
<ul class="figure-key-list">
<li id="key-releases"><span class="key-dot"></span><span class="key-label">Releases & core code maintenance</span><span class="key-percent">(22%)</span></li>
<li id="key-admin"><span class="key-dot"></span><span class="key-label">Administration & management</span><span class="key-percent">(22%)</span></li>
<li id="key-features"><span class="key-dot"></span><span class="key-label">New features</span><span class="key-percent">(21%)</span></li>
<li id="key-infrastructure"><span class="key-dot"></span><span class="key-label">Infrastructure</span><span class="key-percent">(10%)</span></li>
<li id="key-help"><span class="key-dot"></span><span class="key-label">Help desk</span><span class="key-percent">(10%)</span></li>
<li id="key-meetings"><span class="key-dot"></span><span class="key-label">Meetings</span><span class="key-percent">(10%)</span></li>
<li id="key-ux"><span class="key-dot"></span><span class="key-label">User experience & documentation</span><span class="key-percent">(5%)</span></li>
</ul>
</figcaption>
</figure>
<p>Our financial records are available [[here|doc/about/finances]].</p>
......
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