Update figure shortcode to properly float left and right

assets/css/main.css

@@ -92,17 +92,26 @@ figure {
   max-width: 100%;
   margin: 25px 0;
 
-  &.left {
+  &.center {
-    margin-right: auto;
+    width: 100%;
+    float: none;
   }
   
-  &.center {
+  &.left {
-    margin-left: auto;
+    width: 50%;
-    margin-right: auto;
+    float: left;
+    padding-right: 3em;
   }
 
   &.right {
+    width: 50%;
+    float: right;
+    padding-left: 3em;
+  }
+
+  img {
     margin-left: auto;
+    margin-right: auto;
   }
 
   figcaption {
@@ -122,7 +131,7 @@ figure {
     }
 
     &.right {
-      text-align: right;
+      text-align: left;
     }
   }
 }

layouts/shortcodes/figure.html

@@ -1,5 +1,5 @@
 {{ if .Get "src" }}
-  <figure class="{{ with .Get "position"}}{{ . }}{{ else -}} left {{- end }}" >
+  <figure class="{{ with .Get "position"}}{{ . }}{{ else -}} center {{- end }}" {{ with .Get "containerStyle" }} style="{{ . | safeCSS }}" {{ 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" | safeHTML }}</figcaption>