diff --git a/wowchemy/assets/scss/wowchemy/elements/_media.scss b/wowchemy/assets/scss/wowchemy/elements/_media.scss index 5eb485ae..1963a2fb 100644 --- a/wowchemy/assets/scss/wowchemy/elements/_media.scss +++ b/wowchemy/assets/scss/wowchemy/elements/_media.scss @@ -45,30 +45,17 @@ video { **************************************************/ figure { - display: flex; - flex-flow: row wrap; - justify-content: center; - - .figure-img-wrap { - flex-basis: 100%; - // Safari fix for responsive aspect ratio issue when `height: auto` set with flex parent. - // See https://stackoverflow.com/a/61196907 - align-self: flex-start; - } - img { height: auto; max-width: 100%; } - // Center all figure captions by default. figcaption { - flex-basis: 100%; // Appear on row beneath image. margin-top: 0.75em; margin-bottom: 1.65rem; line-height: 1.4; font-size: 0.76rem; - text-align: center; + text-align: center; // Center figure captions. } figcaption.numbered::before { diff --git a/wowchemy/layouts/shortcodes/figure.html b/wowchemy/layouts/shortcodes/figure.html index f15fca8b..008599de 100644 --- a/wowchemy/layouts/shortcodes/figure.html +++ b/wowchemy/layouts/shortcodes/figure.html @@ -22,40 +22,42 @@ {{- end -}} {{- end -}} -
-
- {{- if $img -}} - {{ $isSVG := eq $img.MediaType.SubType "svg" }} - {{ if $isSVG -}} - {{ $alt }} - {{- else }} - {{- $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 -}} - {{ $alt }} - {{- end }} - {{- else -}} - {{ $alt }} +
+
+ {{- if $img -}} + {{ $isSVG := eq $img.MediaType.SubType "svg" }} + {{ if $isSVG -}} + {{ $alt }} - {{- end -}} + {{- else }} + {{- $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 -}} + {{ $alt }} + {{- end }} + {{- else -}} + {{ $alt }} + {{- end -}} +
{{- if $caption -}} @@ -65,4 +67,4 @@ {{ $caption | markdownify | emojify }} {{- end -}} -
+ \ No newline at end of file