Skip to content

Commit

Permalink
update you draw it annotations font and axis label sizes #13
Browse files Browse the repository at this point in the history
  • Loading branch information
fredhohman committed Aug 14, 2020
1 parent d29fdf7 commit afeb2e0
Showing 1 changed file with 13 additions and 9 deletions.
22 changes: 13 additions & 9 deletions src/diagrams/you-draw-it.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -177,14 +177,14 @@
stroke-dasharray: 5 5;
}
svg :global(.x.axis text) {
font-size: 2em;
svg :global(.x.axis text, .y.axis text) {
font-size: 1.625em;
}
.chartwrap {
position: relative;
max-width: 90%;
margin: 0 auto 1em auto;
margin: 0 auto 1em 3em;
display: block;
/* height: 400px; */
}
Expand All @@ -195,8 +195,8 @@
}
.caption-text {
margin: 2em auto 0 auto;
max-width: 300px;
font-size: 0.9em;
/* max-width: 300px; */
/* font-size: 0.9em; */
text-align: center;
}
Expand All @@ -211,14 +211,15 @@
.reset-button {
text-decoration: underline;
cursor: pointer;
/* text-transform: uppercase; */
}
#not-completed-anno {
position: absolute;
top: 55%;
left: 50%;
font-size: 12px;
color: #999999;
/* color: #999999; */
line-height: 1.2;
}
Expand Down Expand Up @@ -249,17 +250,20 @@
</svg>
<div class="annotate">
{#if !completed}
<div id="not-completed-anno">
<div id="not-completed-anno" class="figcaption">
Make a guess for each year up until 2014 to reveal the true trend.
</div>
{/if}
</div>
</div>
<div class="caption-text">
{#if completed}
<div class="reset-button" on:click={() => _reset()}>Reset</div>
<div on:click={() => _reset()}><span class="reset-button figcaption">Reset</span></div>
{:else}
<div>Fill in the trend to see the actual data. Measured in metric tons of CO2.</div>
<div class="figcaption" style="color: black; opacity: 0.5">
<!-- Fill in the trend to see the actual data. -->
Measured in metric tons of CO2.
</div>
{/if}
</div>
</div>
Expand Down

0 comments on commit afeb2e0

Please sign in to comment.