feat(style): center figure SVGs

This commit is contained in:
George Cushen 2021-02-17 21:15:12 +00:00
commit 0fd5d2a250
2 changed files with 20 additions and 10 deletions

View file

@ -235,8 +235,17 @@ video {
}
// Center all figure images by default.
figure img {
@extend .margin-auto;
figure {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
figure img,
figure svg {
height: auto;
max-width: 100%;
flex-basis: 100%;
}
// Center all figure captions by default.

View file

@ -2,17 +2,16 @@
{{/* Load image from page dir falling back to media library at `assets/images/` and then to remote URI. */}}
{{ $destination := .Get "src" }}
{{ $caption := .Get "title" | default (.Get "caption") | default "" }}
{{ $id := .Get "id" | default $caption }}
{{ $caption := .Get "caption" | default (.Get "title") | default "" }}{{/* Support legacy `title` option. */}}
{{ $id := anchorize (.Get "id" | default ($caption | plainify)) }}
{{ $alt := .Get "alt" | default ($caption | plainify) }}
{{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
{{- if and (not $img) .Page.File -}}
{{ $path := $destination }}
{{- $img = resources.Get (path.Join "images" $path) -}}
{{- if not $img -}}
{{- $img = resources.Get (path.Join "images" $destination) -}}
{{- end -}}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ anchorize . }}"{{ end }}>
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ . }}"{{ end }}>
{{- if $img -}}
{{ $isSVG := eq $img.MediaType.SubType "svg" }}
@ -22,13 +21,15 @@
{{- $img_lg := $img.Fit "1200x1200" -}}
{{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
{{- $img_sm := $img_md.Fit "400x400" -}}
{{- $width := (.Get "width") | default $img_md.Width -}}
{{- $height := (.Get "height") | default $img_md.Height -}}
<img alt="{{ $alt }}" srcset="
{{ $img_sm.RelPermalink }} 400w,
{{ $img_md.RelPermalink }} 760w,
{{ $img_lg.RelPermalink }} 1200w"
src="{{ $img_sm.RelPermalink }}"
width="{{ (.Get "width") | default $img_md.Width }}"
height="{{ (.Get "height") | default $img_md.Height }}"
width="{{ $width }}"
height="{{ $height }}"
loading="lazy"
data-zoomable />
{{ end }}