feat: add support for Figure image theme and max_width

New options:

`theme="light"` inverts image when browsing in dark mode
`theme="dark"` inverts image when browsing in light mode
`max_width="300px"` sets an image max width

Also, improves use of Figure in `{{%` Markdown shortcodes (e.g. Callout) by further stripping HTML indentation.

wowchemy/assets/scss/wowchemy/_base.scss

@@ -196,85 +196,6 @@ a:focus {
   color: $sta-dark-link-hover;
 }
 
-img,
-video {
-  height: auto;
-  max-width: 100%;
-  display: block;
-}
-
-audio {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-video {
-  width: 100%;
-  height: auto;
-  max-height: 400px;
-}
-
-.img-responsive {
-  /* Extend Bootstrap declaration with centering. */
-  margin: 0 auto;
-}
-
-/* Hide overflowing of zoomed child img element */
-.img-hover-zoom {
-  overflow: hidden;
-}
-
-/* Smooth transition for image zoom on hover */
-.img-hover-zoom img {
-  transition: transform 0.3s ease-in-out;
-}
-
-/* Transform the image scale when container gets hovered */
-.img-hover-zoom:hover img {
-  transform: scale(1.1);
-}
-
-// Center all figure images by default.
-figure {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-}
-
-figure img {
-  height: auto;
-  max-width: 100%;
-  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;
-}
-
-// Center all figure captions by default.
-figcaption {
-  display: block;
-  margin-top: 0.75em;
-  margin-bottom: 1.65rem;
-  line-height: 1.4;
-  font-size: 0.76rem;
-  text-align: center;
-}
-
-figcaption.numbered::before {
-  font-weight: 700;
-  text-transform: uppercase;
-  content: attr(data-pre) counter(captions) attr(data-post);
-}
-
-figcaption.numbered {
-  counter-increment: captions;
-}
-
-// Dynamically theme SVGs
-svg {
-  fill: currentColor;
-}
-
 pre,
 code {
   font-family: $sta-font-mono, monospace;

wowchemy/assets/scss/wowchemy/elements/_media.scss

@@ -1,3 +1,102 @@
+img,
+video {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
+
+audio {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+video {
+  width: 100%;
+  height: auto;
+  max-height: 400px;
+}
+
+.img-responsive {
+  /* Extend Bootstrap declaration with centering. */
+  margin: 0 auto;
+}
+
+/*************************************************
+ *  Image zoom on hover for previews.
+ **************************************************/
+
+/* Hide overflowing of zoomed child img element */
+.img-hover-zoom {
+  overflow: hidden;
+}
+
+/* Smooth transition for image zoom on hover */
+.img-hover-zoom img {
+  transition: transform 0.3s ease-in-out;
+}
+
+/* Transform the image scale when container gets hovered */
+.img-hover-zoom:hover img {
+  transform: scale(1.1);
+}
+
+/*************************************************
+ *  Figures
+ **************************************************/
+
+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;
+  }
+
+  figcaption.numbered::before {
+    font-weight: 700;
+    text-transform: uppercase;
+    content: attr(data-pre) counter(captions) attr(data-post);
+  }
+
+  figcaption.numbered {
+    counter-increment: captions;
+  }
+}
+
+/*************************************************
+ *  Dynamic theming.
+ **************************************************/
+
+// Dynamically theme `img`
+.dark .img-light,
+body:not(.dark) .img-dark {
+  filter: invert(1);
+}
+
+// Dynamically theme inline `svg`
+svg {
+  fill: currentColor;
+}
+
 /*************************************************
  *  Image zooming.
  **************************************************/

wowchemy/layouts/shortcodes/figure.html

@@ -8,6 +8,9 @@
 {{ $zoom := eq (.Get "lightbox" | default "true") "true" }}
 {{ $id := anchorize (.Get "id" | default ($caption | plainify)) }}
 {{ $alt := .Get "alt" | default ($caption | plainify) }}
+{{ $img_class := "" }}
+{{ if eq (.Get "theme" | lower) "light" }}{{ $img_class = printf "%s img-light" $img_class }}{{end}}
+{{ if eq (.Get "theme" | lower) "dark" }}{{ $img_class = printf "%s img-dark" $img_class }}{{end}}
 
 {{- $img := (.Page.Resources.ByType "image").GetMatch $destination -}}
 {{- if not $img -}}
@@ -15,37 +18,42 @@
 {{- end -}}
 
 <figure {{ with .Get "class" }}class="{{.}}"{{ end }} {{ with $id }}id="figure-{{ . }}"{{ end }}>
+  <div class="figure-img-wrap" {{ with .Get "max_width" }}style="max-width: {{.}}"{{end}}>
+    {{- if $img -}}
+      {{ $isSVG := eq $img.MediaType.SubType "svg" }}
+      {{ if $isSVG -}}
+        <img alt="{{ $alt }}"
+         src="{{ $img.RelPermalink }}"
+         loading="lazy"
+         {{- if $zoom }} data-zoomable{{end}}
+         {{- with .Get "width" }} width="{{.}}"{{end}}
+         {{- with .Get "height" }} height="{{.}}"{{end}}
+         {{- with $img_class }} class="{{.}}"{{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 -}}
+        <img alt="{{ $alt }}" srcset="
+             {{ $img_sm.RelPermalink }} 400w,
+             {{ $img_md.RelPermalink }} 760w,
+             {{ $img_lg.RelPermalink }} 1200w"
+             src="{{ $img_sm.RelPermalink }}"
+             width="{{ $width }}"
+             height="{{ $height }}"
+             loading="lazy"
+             {{- if $zoom }} data-zoomable{{end}}
+             {{- with $img_class }} class="{{.}}"{{end}} />
+      {{- end }}
+    {{- else -}}
+      <img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
+           {{- with .Get "width" }} width="{{.}}"{{end}} {{- with .Get "height" }} height="{{.}}"{{end}}
+           {{- with $img_class }} class="{{.}}"{{end}} />
+    {{- end -}}
+  </div>
 
-  {{- if $img -}}
+  {{- if $caption -}}
-    {{ $isSVG := eq $img.MediaType.SubType "svg" }}
-    {{ if $isSVG -}}
-      <img alt="{{ $alt }}"
-       src="{{ $img.RelPermalink }}"
-       loading="lazy"
-       {{ if $zoom }}data-zoomable{{end}}
-       {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{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 -}}
-      <img alt="{{ $alt }}" srcset="
-           {{ $img_sm.RelPermalink }} 400w,
-           {{ $img_md.RelPermalink }} 760w,
-           {{ $img_lg.RelPermalink }} 1200w"
-           src="{{ $img_sm.RelPermalink }}"
-           width="{{ $width }}"
-           height="{{ $height }}"
-           loading="lazy"
-           {{ if $zoom }}data-zoomable{{end}} />
-    {{- end }}
-  {{- else -}}
-    <img src="{{ $destination | safeURL }}" alt="{{ $alt }}" loading="lazy" {{ if $zoom }}data-zoomable{{end}}
-         {{ with .Get "width" }}width="{{.}}"{{end}} {{ with .Get "height" }}height="{{.}}"{{end}} />
-  {{- end -}}
-
-  {{ if $caption }}
     {{/* Localize the figure numbering (if enabled). */}}
     {{- $figure := split (i18n "figure" | default "Figure %d:") "%d" -}}
     <figcaption{{ if eq (.Get "numbered") "true" }} data-pre="{{- trim (index $figure 0) " " -}}&nbsp;" data-post="{{ index $figure 1 }}&nbsp;" class="numbered"{{ end }}>