add image captions

README.md

@@ -106,7 +106,10 @@ The `image()` shortcode can be used to embed images in markdown as follows:
 
 Position can be either `left`, `center`, or `right`. Style allows you to embed css for the image.    
 
+The `icaption()` shortcode allows you to add smaller italicized text for image decoration. Position works the same way as image and style can be used to embed css for the `div` holding the text.  
+`{{ icaption(position="right" text="Yahallo!") }}`  
+
 The `tikz()` shortcode can be used to embed tikzpicture code in latex. For example: 
 `{{ tikz(style="width: 20%; height: 20%;" position="center" body="\begin{tikzpicture}\draw (0,0) circle (1in);\end{tikzpicture}") }}`
 
-Position works the same way as `image`. Style allows you to embed css for the `div` holding the tikz svg.
+Position works the same way as `image`. Style can be used to embed css for the `div` holding the tikz svg.

content/showcase.md

@@ -80,3 +80,6 @@ Images:
 Tikz:   
 
 {{ tikz(position="right" body="\begin{tikzpicture}\draw (0,0) circle (1in);\end{tikzpicture}") }}  
+  
+
+{{ icaption(position="right" text="A circle") }}

templates/index.html

@@ -260,6 +260,34 @@
                 margin-left: auto;
             }
 
+            .post_contents .icaption-left {
+                display: flex;
+                justify-content: left;
+                align-items: left;
+                margin-right: auto;
+                margin-top: 10px;
+                font-size: 0.9rem;
+            }
+
+            .post_contents .icaption-center {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                margin-left: auto;
+                margin-right: auto;
+                margin-top: 10px;
+                font-size: 0.9rem;
+            }
+
+            .post_contents .icaption-right {
+                display: flex;
+                justify-content: right;
+                align-items: right;
+                margin-left: auto;
+                margin-top: 10px;
+                font-size: 0.9rem;
+            }
+
             .post_contents .tikz-left {
                 width: 0;
                 display: flex;

templates/shortcodes/icaption.html

@@ -0,0 +1,5 @@
+{% if text %}
+<div class="icaption-{% if position %}{{ position }}{% else -%}center{%- endif %}" {%- if style %} style="{{ style | safe }}"{%- endif %}>
+    <i>{{ text | safe }}</i>
+</div>
+{% endif %}