Merge pull request #42 from chicio/images-caption 🚀

Images caption

Author: chicio

=

@@ -7,6 +7,13 @@
     }
   }
 
+  figure {
+    figcaption {
+      @include theme('color', $secondary-text-color);
+      font-size: 14px;
+    }
+  }
+
   .blog-post-title {
     @include theme('color', $accent-color);
     margin-bottom: 5px;
@@ -29,12 +36,6 @@
     @include theme('color', $accent-color);
   }
 
-  img {
-    max-width: 100%;
-    display: block;
-    margin: 20px auto;
-  }
-
   .emoji {
     margin: auto;
     display: inline;

_critical-screenshots/critical-blog-after.jpg

@@ -1 +1 @@
-hash: fd5ecb19c9664af2e861
+hash: aaf187c9d8fe249f4fd7

_critical-screenshots/critical-blog-before.jpg

@@ -1,3 +1,6 @@
 {% capture description %}{{ include.description | replace: ' ', '-' | downcase }}{% endcapture %}
-{% capture customClassAndBlogClass %}{{ include.class | default: '' | append: ' blog-image' }}{% endcapture %}
-{% include lazy-image.html id=description alt=include.description fill="BDBDBD" src=include.src width=include.width height=include.height class=customClassAndBlogClass %}
+{% capture customClassAndBlogClass %}{{ include.class | default: '' | append: ' figure-img img-fluid d-block mx-auto rounded blog-image' }}{% endcapture %}
+<figure class="d-block mx-auto">
+  {% include lazy-image.html alt=include.description fill="BDBDBD" src=include.src width=include.width height=include.height class=customClassAndBlogClass %}
+  <figcaption class="figure-caption text-center font-italic font-weight-light">{{ include.description }}</figcaption>
+</figure>