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

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

@ -1,22 +1,23 @@
.chart-container { .chart-container {
position: relative; position: relative;
margin-inline: auto; margin-inline: auto;
block-size: 50vh; block-size: 100vh;
inline-size: 95vw;
display: flex;
justify-content: center;
@media (orientation: landscape) {
block-size: 75vh;
inline-size: 95vw; inline-size: 95vw;
display: flex; }
justify-content: center;
@media (orientation: landscape) { @include mq("large") {
block-size: 75vh; block-size: auto;
inline-size: 95vw; max-block-size: 80vh;
} inline-size: 50vw;
}
@include mq("large") { & + .chart-container {
block-size: 50vh; margin-block-start: 1em;
inline-size: 50vw; }
}
& + .chart-container {
margin-block-start: 1em;
}
} }

53
layouts/shortcodes/chart.html
View file

@ -2,26 +2,37 @@
{{- 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">
{{- with .Get "chart-id" -}}
<div class="chart-container">
<canvas class="chart" id="{{ . }}">
You must enable Javascript to view this chart.
</canvas>
</div>
{{- end -}}
{{- with .Get "chart-id-2" -}}
<div class="chart-container">
<canvas class="chart" id="{{ . }}">
You must enable Javascript to view this chart.
</canvas>
</div>
{{- end -}}
{{- if or ( .Get "caption" ) ( .Get "title" ) -}} <figure
<figcaption class="figure__caption{{ if not ( or ( .Get "caption" ) ( .Get "title" ) ) }} figure__caption--no-height{{ end }}"> class="article__figure figure figure--chart{{ with .Get "class" }}{{ . }}{{ end }}"
{{- with .Get "title" -}}<h4 class="figcaption__title">{{ . | markdownify | safeHTML }}</h4>{{- end -}} role="group"
{{- with .Get "caption" -}}<p class="figcaption__caption">{{ . | markdownify | safeHTML }}</p>{{- end -}} >
</figcaption> {{- with .Get "chart-id" -}}
{{- end -}} <div class="chart-container">
<canvas
width="auto"
class="chart"
id="{{ . }}"
>
You must enable Javascript to view this chart.
</canvas>
</div>
{{- end -}}
{{- with .Get "chart-id-2" -}}
<div class="chart-container">
<canvas
class="chart"
id="{{ . }}"
>
You must enable Javascript to view this chart.
</canvas>
</div>
{{- end -}}
{{- if or ( .Get "caption" ) ( .Get "title" ) -}}
<figcaption class="figure__caption{{ if not ( or ( .Get "caption" ) ( .Get "title" ) ) }}figure__caption--no-height{{ end }}">
{{- with .Get "title" -}}<h4 class="figcaption__title">{{ . | markdownify | safeHTML }}</h4>{{- end -}}
{{- with .Get "caption" -}}<p class="figcaption__caption">{{ . | markdownify | safeHTML }}</p>{{- end -}}
</figcaption>
{{- end -}}
</figure> </figure>