Add figure shortcode

layouts/shortcodes/figure.html

@@ -0,0 +1,8 @@
+{{ if .Get "src" }}
+  <figure class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" >
+    <img src="{{ .Get "src" | safeURL }}" {{ with .Get "alt" }} alt="{{ . | plainify }}" {{ end }} {{ with .Get "style" }} style="{{ . | safeCSS }}" {{ end }} />
+    {{ if .Get "caption" }}
+      <figcaption class="{{ with .Get "captionPosition"}}{{ . }}{{ else -}} center {{- end }}" {{ with .Get "captionStyle" }} style="{{ . | safeCSS }}" {{ end }}>{{ .Get "caption" }}</figcaption>
+    {{ end }}
+  </figure>
+{{ end }}

source/css/main.css

@@ -94,6 +94,43 @@ img {
   }
 }
 
+figure {
+  display: table;
+  max-width: 100%;
+  margin: 25px 0;
+
+  &.left {
+    margin-right: auto;
+  }
+
+  &.center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.right {
+    margin-left: auto;
+  }
+
+  figcaption {
+    font-size: 14px;
+    margin-top: 5px;
+    opacity: .8;
+
+    &.left {
+      text-align: left;
+    }
+
+    &.center {
+      text-align: center;
+    }
+
+    &.right {
+      text-align: right;
+    }
+  }
+}
+
 code {
   font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
   font-feature-settings: normal;