Add support for image captions & center images

_config.yml

@@ -27,5 +27,5 @@ github:
   repo:         https://github.com/chesterhow/tale
 
 # Gems
-gems:
+plugins:
   - jekyll-paginate

_posts/2017-03-16-example-content.md

@@ -72,14 +72,16 @@ Check out tale on [GitHub](https://github.com/chesterhow/tale).
 
 # Images
 {% highlight markdown %}
-![placeholder](https://placehold.it/800x400 "Large example image")
-![placeholder](https://placehold.it/400x200 "Medium example image")
-![placeholder](https://placehold.it/200x200 "Small example image")
+![Placeholder image](https://placehold.it/800x400 "Placeholder image")
+
+![Image with caption](https://placehold.it/700x400 "Image with caption")
+_This is an image with a caption_
 {% endhighlight %}
 
-![placeholder](https://placehold.it/800x400 "Large example image")
-![placeholder](https://placehold.it/400x200 "Medium example image")
-![placeholder](https://placehold.it/200x200 "Small example image")
+![Placeholder image](https://placehold.it/800x400 "Placeholder image")
+
+![Image with caption](https://placehold.it/700x400 "Image with caption")
+_This is an image with a caption_
 
 # Code and Syntax Highlighting
 Use back-ticks for `inline code`. Multi-line code snippets are supported too through Pygments.

_sass/_post.scss

@@ -4,7 +4,7 @@
   &-info {
     color: $default-tint;
     font-family: $palatino;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
     text-align: center;
 
     span {
@@ -21,7 +21,7 @@
   }
 
   &-line {
-    border-top: .4rem solid $default-shade;
+    border-top: 0.4rem solid $default-shade;
     display: block;
     margin: 0 auto 3rem;
     width: 4rem;
@@ -35,4 +35,17 @@
   a:hover {
     text-decoration: underline;
   }
+
+  img {
+    margin: 0 auto 0.5rem;
+  }
+
+  img + em {
+    color: $default-tint;
+    display: block;
+    font-family: $sans-font;
+    font-size: 0.9rem;
+    font-style: normal;
+    text-align: center;
+  }
 }