Rumperuu/Omphaloskepsis-2
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: increase chart size

Browse source
This commit is contained in:
Ben Goldsworthy 2025-01-11 16:18:22 +01:00
parent 393d243b66
commit 96b836b660
Signed by: Rumperuu
SSH key fingerprint: SHA256:e5XfzNOr9UvWpEzyLfw0GtTMZWIFh3NmxH+/qQIi3xE
2 changed files with 50 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/components/_chart.scss
View file

@ -1,7 +1,7 @@
.chart-container { .chart-container {
position: relative; position: relative;
margin-inline: auto; margin-inline: auto;
block-size: 50vh; block-size: 100vh;
inline-size: 95vw; inline-size: 95vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -12,7 +12,8 @@
} }
@include mq("large") { @include mq("large") {
block-size: 50vh; block-size: auto;
max-block-size: 80vh;
inline-size: 50vw; inline-size: 50vw;
} }

17
layouts/shortcodes/chart.html
View file

@ -2,17 +2,28 @@
{{- erroridf "a11y-chart-longdesc" "No longdesc found for chart '%q' (%q)" ( .Get "chart-id" ) .Page.File.Path -}} {{- erroridf "a11y-chart-longdesc" "No longdesc found for chart '%q' (%q)" ( .Get "chart-id" ) .Page.File.Path -}}
{{- end -}} {{- end -}}
<figure class="article__figure figure figure--chart{{ with .Get "class" }} {{ . }}{{ end }}" role="group">
<figure
class="article__figure figure figure--chart{{ with .Get "class" }}{{ . }}{{ end }}"
role="group"
>
{{- with .Get "chart-id" -}} {{- with .Get "chart-id" -}}
<div class="chart-container"> <div class="chart-container">
<canvas class="chart" id="{{ . }}"> <canvas
width="auto"
class="chart"
id="{{ . }}"
>
You must enable Javascript to view this chart. You must enable Javascript to view this chart.
</canvas> </canvas>
</div> </div>
{{- end -}} {{- end -}}
{{- with .Get "chart-id-2" -}} {{- with .Get "chart-id-2" -}}
<div class="chart-container"> <div class="chart-container">
<canvas class="chart" id="{{ . }}"> <canvas
class="chart"
id="{{ . }}"
>
You must enable Javascript to view this chart. You must enable Javascript to view this chart.
</canvas> </canvas>
</div> </div>