From 1e8616424a5415ffca08f587e0df52399635fc74 Mon Sep 17 00:00:00 2001
From: EvilMuffinHa <hkailadka88@gmail.com>
Date: Thu, 23 Jun 2022 21:50:12 -0400
Subject: [PATCH] add image captions

---
 README.md                          |  5 ++++-
 content/showcase.md                |  5 ++++-
 templates/index.html               | 28 ++++++++++++++++++++++++++++
 templates/shortcodes/icaption.html |  5 +++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 templates/shortcodes/icaption.html

diff --git a/README.md b/README.md
index 24cf582..8521b02 100644
--- a/README.md
+++ b/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.
diff --git a/content/showcase.md b/content/showcase.md
index 69cfad8..ae59712 100644
--- a/content/showcase.md
+++ b/content/showcase.md
@@ -79,4 +79,7 @@ Images:
 
 Tikz:   
 
-{{ tikz(position="right" body="\begin{tikzpicture}\draw (0,0) circle (1in);\end{tikzpicture}") }}
+{{ tikz(position="right" body="\begin{tikzpicture}\draw (0,0) circle (1in);\end{tikzpicture}") }}  
+  
+
+{{ icaption(position="right" text="A circle") }}
diff --git a/templates/index.html b/templates/index.html
index 5f1454c..fbeebee 100644
--- a/templates/index.html
+++ b/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;
diff --git a/templates/shortcodes/icaption.html b/templates/shortcodes/icaption.html
new file mode 100644
index 0000000..0ae5347
--- /dev/null
+++ b/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 %}