Commit d418fc27 authored by sajolida's avatar sajolida

Use a more specific namespace

parent 34b66fa0
......@@ -493,9 +493,9 @@ permitted by law.</strong></p>
<!-- Spreadsheet in fundraising.git:tools:expenses-chart.ods -->
<figure>
<figure class="chart">
<!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
<div class="figure-content">
<div class="chart-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>
......@@ -508,8 +508,8 @@ permitted by law.</strong></p>
</svg>
</div>
<figcaption class="figure-key">
<ul class="figure-key-list">
<figcaption class="chart-key">
<ul class="chart-key-list">
<li id="key-blue"><div class="key-dot"></div><div class="key-label">Release management & code maintenance</div><div class="key-percent">(22%)</div></li>
<li id="key-orange"><div class="key-dot"></div><div class="key-label">Administration, fundraising & management</div><div class="key-percent">(22%)</div></li>
<li id="key-green"><div class="key-dot"></div><div class="key-label">New features</div><div class="key-percent">(21%)</div></li>
......@@ -535,9 +535,9 @@ permitted by law.</strong></p>
<!-- Spreadsheet in fundraising.git:tools:income-chart.ods -->
<figure>
<figure class="chart">
<!-- Adapted from https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 -->
<div class="figure-content">
<div class="chart-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>
......@@ -547,8 +547,8 @@ permitted by law.</strong></p>
</svg>
</div>
<figcaption class="figure-key">
<ul class="figure-key-list">
<figcaption class="chart-key">
<ul class="chart-key-list">
<li id="key-blue"><div class="key-dot"></div><div class="key-label">Passionate people like you</div><div class="key-percent">(36%)</div></li>
<li id="key-orange"><div class="key-dot"></div><div class="key-label">Foundations & NGOs</div><div class="key-percent">(30%)</div><br/>like Mozilla or the Handshake Foundation</li>
<li id="key-green"><div class="key-dot"></div><div class="key-label">Entities related to the US government</div><div class="key-percent">(25%)</div><br/>like the Open Technology Fund or the ISC Project</li>
......
......@@ -1401,36 +1401,36 @@ div#highlight p {
/* Chart */
figure {
figure.chart {
display: flex !important;
flex-direction: column;
}
@media (min-width: 640px) {
figure {
figure.chart {
flex-direction: row;
}
}
.figure-content,
.figure-key {
.chart-content,
.chart-key {
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.figure-content svg {
.chart-content svg {
height: auto;
}
.figure-key-list {
.chart-key-list {
margin: 0;
padding: 0;
list-style: none;
}
.figure-key-list li {
.chart-key-list li {
margin: 0 0 8px;
padding: 0;
font-size: 14px;
}
.figure-key-list li div {
.chart-key-list li div {
display: inline-block;
}
.key-dot {
......
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