style: center figure captions

Since figures are now centered.

assets/sass/academic/_root.scss

@@ -138,10 +138,10 @@ video {
 figcaption {
   display: block;
   margin-top: 0.75em;
-  line-height: 1.25;
-  font-size: 1rem;
   margin-bottom: 1.65rem;
-  font-family: $sta-font-heading, sans-serif;
+  line-height: 1.4;
+  font-size: 0.76rem;
+  text-align: center;
 }
 
 figcaption.numbered:before {
@@ -154,13 +154,6 @@ figcaption.numbered {
   counter-increment: captions;
 }
 
-figcaption h4 {
-  display: inline;
-  font-size: 1rem;
-  font-weight: 400;
-  margin: 0;
-}
-
 pre,
 code {
   font-family: $sta-font-mono, monospace;

exampleSite/content/post/getting-started/index.md

@@ -49,7 +49,7 @@ projects: []
   - 👕 [Wear the **T-shirt**](https://academic.threadless.com/)
   - :woman_technologist: [**Contribute**](https://sourcethemes.com/academic/docs/contribute/)
 
-{{< figure src="https://raw.githubusercontent.com/gcushen/hugo-academic/master/academic.png" lightbox="true" >}}
+{{< figure src="https://raw.githubusercontent.com/gcushen/hugo-academic/master/academic.png" title="Academic is mobile first with a responsive design to ensure that your site looks stunning on every device." >}}
 
 **Key features:**
 

layouts/shortcodes/figure.html

@@ -3,27 +3,34 @@
 {{ if .Get "library" }}
   {{ $image_src = printf "img/%s" $image_src | relURL }}
 {{ end }}
+
+{{/* Disallow user from opening image in the lightbox? */}}
 {{ $lightbox := eq (.Get "lightbox" | default "true") "true" }}
+
+{{/* Get lightbox group for showing multiple images in a lightbox. */}}
 {{ $group := .Get "lightbox-group" | default "" }}
 
+{{/* Get caption. Support legacy `title` option. */}}
+{{ $caption := .Get "title" | default (.Get "caption") | default "" }}
+
 <figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
+
 {{ if $lightbox }}
-  <a data-fancybox="{{$group}}" href="{{$image_src}}" {{ with .Get "caption"}}data-caption="{{ .|markdownify|emojify }}"{{ end }}>
+  <a data-fancybox="{{$group}}" href="{{$image_src}}" {{ with $caption }}data-caption="{{ .|markdownify|emojify }}"{{ end }}>
 {{ else if .Get "link"}}
   <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{.}}"{{ end }}{{ with .Get "rel" }} rel="{{.}}"{{ end }}>
+{{ end -}}
+
+<img src="{{$image_src}}" alt="{{ with .Get "alt" }}{{.}}{{end}}" {{ with .Get "width" }}width="{{.}}" {{end}}{{ with .Get "height" }}height="{{.}}" {{end}}>
+
+{{- if or $lightbox (.Get "link") }}</a>{{ 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="{{ index $figure 0 }}" data-post="{{ index $figure 1 }}" class="numbered"{{ end }}>
+    {{ $caption | markdownify | emojify }}
+  </figcaption>
 {{ end }}
-<img src="{{$image_src}}" alt="{{ if or (.Get "alt") (.Get "caption") }}{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}{{ end }}" {{ with .Get "width" }}width="{{.}}" {{ end }}{{ with .Get "height" }}height="{{.}}" {{ end }}>
-{{ if or $lightbox (.Get "link") }}</a>{{ end }}
-{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
-{{ $figure := split (i18n "figure" | default "Figure %d:") "%d" }}
-<figcaption data-pre="{{ index $figure 0 }}" data-post="{{ index $figure 1 }}" {{ if eq (.Get "numbered") "true" }}class="numbered"{{ end }}>
-  {{ if isset .Params "title" }}<h4>{{ .Get "title" | markdownify | emojify }}</h4>{{ end }}
-  {{ if or (.Get "caption") (.Get "attr")}}<p>
-    {{ .Get "caption" | markdownify | emojify }}
-    {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
-    {{ .Get "attr" }}
-    {{ if .Get "attrlink"}}</a> {{ end }}
-  </p> {{ end }}
-</figcaption>
-{{ end }}
+
 </figure>