Improve Shortcodes, example content, page scores, fonts

30 files changed, 249 insertions, 151 deletions

diff --git a/content/overview-abridge.md b/content/overview-abridge.md
index b5c2a05..0d5d675 100644
--- a/content/overview-abridge.md
+++ b/content/overview-abridge.md
@@ -4,7 +4,7 @@ date = 2022-05-17
 
 [taxonomies]
 categories = ["Features"]
-tags = ["theme","config"]
+tags = ["config"]
 +++
 
 For quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used.
diff --git a/content/overview-fonts-imagehover-shortcode/Arimo.png b/content/overview-fonts-imagehover-shortcode/Arimo.png
deleted file mode 100644
index ceff44d..0000000
--- a/content/overview-fonts-imagehover-shortcode/Arimo.png
+++ /dev/null
diff --git a/content/overview-fonts-imagehover-shortcode/DroidSans.png b/content/overview-fonts-imagehover-shortcode/DroidSans.png
deleted file mode 100644
index d6cb2a1..0000000
--- a/content/overview-fonts-imagehover-shortcode/DroidSans.png
+++ /dev/null
diff --git a/content/overview-fonts-imagehover-shortcode/Lato.png b/content/overview-fonts-imagehover-shortcode/Lato.png
deleted file mode 100644
index 2401bb0..0000000
--- a/content/overview-fonts-imagehover-shortcode/Lato.png
+++ /dev/null
diff --git a/content/overview-fonts-imagehover-shortcode/Roboto.png b/content/overview-fonts-imagehover-shortcode/Roboto.png
deleted file mode 100644
index ea2f7d9..0000000
--- a/content/overview-fonts-imagehover-shortcode/Roboto.png
+++ /dev/null
diff --git a/content/overview-fonts-imagehover-shortcode/System.png b/content/overview-fonts-imagehover-shortcode/System.png
deleted file mode 100644
index e01bdea..0000000
--- a/content/overview-fonts-imagehover-shortcode/System.png
+++ /dev/null
diff --git a/content/overview-fonts-imagehover-shortcode/Ubuntu.png b/content/overview-fonts-imagehover-shortcode/Ubuntu.png
deleted file mode 100644
index 807c21a..0000000
--- a/content/overview-fonts-imagehover-shortcode/Ubuntu.png
+++ /dev/null
diff --git a/content/overview-fonts-imagehover-shortcode/index.md b/content/overview-fonts-imagehover-shortcode/index.md
deleted file mode 100644
index 448c7f0..0000000
--- a/content/overview-fonts-imagehover-shortcode/index.md
+++ /dev/null
@@ -1,27 +0,0 @@
-+++
-title = "Image Comparison imagehover Shortcode"
-date = 2021-05-04
-
-[taxonomies]
-categories = ["Features"]
-tags = ["shortcodes","image"]
-+++
-
-This shortcode accepts an array of images, the first element is the one you are comparing to all the others.
-
-The first image in the array is displayed, hover you mouse over the image to display the one your comparing to.
-<!-- more -->
-
-This can also be used to compare just one picture with another by passing only two files in the array:
-
-`imagehover(sources=["regular.png", "hover.png"] w=560 h=650 p=45`
-
-To Compare many images just add more images to the array:
-
-`imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45`
-
-- w is the width of the image.
-- h is the height of the image.
-- p is the percent size that you want the image to use on the page.(50 is the default)
-
-{{ imagehover(sources=["System.png", "DroidSans.png", "Roboto.png", "Arimo.png", "Lato.png", "Ubuntu.png"] w=560 h=650 p=45) }}
diff --git a/content/overview-images/corro.svg b/content/overview-images/corro.svg
new file mode 100644
index 0000000..959dbf8
--- /dev/null
+++ b/content/overview-images/corro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
diff --git a/content/overview-images/ferris-gesture.svg b/content/overview-images/ferris-gesture.svg
new file mode 100644
index 0000000..d819588
--- /dev/null
+++ b/content/overview-images/ferris-gesture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
diff --git a/content/overview-images/ferris-happy.svg b/content/overview-images/ferris-happy.svg
new file mode 100644
index 0000000..5e2f904
--- /dev/null
+++ b/content/overview-images/ferris-happy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="m505 250-6-13v-1c0-15-15-28-40-38v9l-7-3v-4c-36-13-89-21-147-21-52 0-99 6-133 16v14-17c-36 11-58 27-58 44l2 9-4 6s-3 4 2 12a1069 1069 0 0 0 48 60c1-1-3-15-13-30l-14-28c9 6 65 34 179 34 116-1 167-37 173-42-2 8-9 24-14 35-9 17-12 31-12 31l8-11c10-15 30-43 34-51s2-11 2-11"/><path fill="#f74c00" d="m540 250-40-30-1-4 13-18c1-2 2-5 1-7s-3-4-5-4l-22-4-3-5 9-21v-7c-1-2-4-3-6-3l-22 1-4-5 5-22c1-3 0-5-1-7l-7-2-21 6-5-4 1-23c0-3-1-5-3-6s-4-2-6-1l-20 10-5-3-4-23c0-2-2-4-4-5s-4-1-6 1l-18 13-6-1-8-22c0-2-2-4-4-4-3-1-5 0-6 2l-16 17-5-1-12-20c-1-2-3-3-6-3-2 0-4 1-5 3l-12 20-5 1-16-17a6 6 0 0 0-11 2l-7 22-6 1-18-13c-2-2-4-2-6-1s-4 3-4 5l-4 23-5 3-20-10c-2-1-5 0-6 1-2 1-3 3-3 6v23l-4 4-22-6-6 2c-1 2-2 4-1 7l5 22-4 5-22-1c-3 0-5 1-6 3v7l9 21-3 5-22 4c-2 0-4 2-5 4s0 5 1 7l13 18v1l-37 40s-6 4 2 14a1471 1471 0 0 0 79 80c1-1-4-18-20-39-13-18-29-47-25-50 0 0 4-6 13-10 0 0-1 0 0 0 0 0 185 85 356 2 20-4 31 7 31 7 4 2-6 31-15 51-12 22-13 39-12 40l11-17 49-71c6-11 0-14 0-14"/><path fill="#f74c00" d="M459 239s27-2 61-37l5-11s-54-54 30-91c0 0-7 12-5 58 0 0 26-8 33-50 0 0 37 49-40 95 0 0-36 58-88 53z"/><path d="M338 205s19-20 37 0c0 0 15 27 0 41 0 0-23 18-37 0 0 0-15-15 0-41"/><path fill="#fff" d="M360 213c0 7-5 14-10 14-6 0-11-7-11-14 0-8 5-15 11-15 5 0 10 7 10 15"/><path d="M256 200s32-14 40 17c0 0 9 36-26 38 0 0-44-8-14-55"/><path fill="#fff" d="M272 213c0 8-5 15-11 15s-10-7-10-15 4-15 10-15 11 7 11 15"/><path d="m297 268 40-3s-1 6-7 11c0 0-13 16-29-1 0 0-3-3-4-7"/><path fill="#f74c00" d="M135 231h-1c-13-3-50-13-60-28 0 0 50-57-28-93l9 63s-24-16-29-51c0 0-58 42 26 83 0 0 8 28 81 51a12 12 0 0 0 14-13c0-7-5-12-12-12"/></svg>
diff --git a/content/overview-images/ferris.svg b/content/overview-images/ferris.svg
new file mode 100644
index 0000000..1409b10
--- /dev/null
+++ b/content/overview-images/ferris.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
diff --git a/content/overview-images/image.jpg b/content/overview-images/image.jpg
deleted file mode 100644
index 7b9e98d..0000000
--- a/content/overview-images/image.jpg
+++ /dev/null
diff --git a/content/overview-images/img/ferris-gesture.svg b/content/overview-images/img/ferris-gesture.svg
new file mode 100644
index 0000000..d819588
--- /dev/null
+++ b/content/overview-images/img/ferris-gesture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
diff --git a/content/overview-images/img/ferris.svg b/content/overview-images/img/ferris.svg
new file mode 100644
index 0000000..1409b10
--- /dev/null
+++ b/content/overview-images/img/ferris.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
diff --git a/content/overview-images/index.md b/content/overview-images/index.md
index d253932..22e1f92 100644
--- a/content/overview-images/index.md
+++ b/content/overview-images/index.md
@@ -1,28 +1,104 @@
 +++
-title = "Image Examples"
-date = 2021-05-09
+title = "Image Shortcodes"
+date = 2021-05-19
 
 [taxonomies]
 categories = ["Features"]
-tags = ["images"]
+tags = ["shortcodes","images"]
+[extra]
+toc = true
 +++
 
-Images can be embed using direct or relative paths.
+This post covers the **imghover and img shortcodes**. Images can also be embeded directly using markdown `![Ferris](ferris.svg)`, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score.
 <!-- more -->
-Use `img(path="./image.jpg", alt="Papaya")` to specify the relative path of image:
 
-{{ img(path="./image.jpg", alt="Papaya") }}
+# img Shortcode
 
-This is an example note with direct image, without using shortcode:
+- src is the path and filename of the image. (mandatory)
+- class sets a class for the image. (optional)
+- alt sets the alt note for the image. (recommended for google lighthouse)
+- w is the width of the image. (recommended for google lighthouse)
+- h is the height of the image. (recommended for google lighthouse)
 
-`![Rust](rust.png)`
+## Usage (same path)
+```rs
+{{/* img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) */}}
+```
+**Output**
+```html
+{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }}
+```
+{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }}
 
-![Rust](rust.png)
+## Usage (relative path ./)
+```rs
+{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) */}}
+```
+**Output**
+```html
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }}
+```
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }}
 
-This is an svg image:
+## Usage (root path /)
+```rs
+{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) */}}
+```
+**Output**
+```html
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }}
+```
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }}
 
-<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
+# SVG image directly in code:
+```html
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
+```
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
+
+
+# imghover Shortcode
+
+The first image in the src array is the one compared to all the others.
+
+When you hover your mouse over an image it will display the image to compare.
+
+This can be used to compare only one image with another by passing only two src in the array.
+
+- src is an array of paths and filenames for the images. (mandatory)
+- w is the width of the image.
+- h is the height of the image.
+- p is the percent size that you want the image to use on the page. (50 is the default)
+
+*w and h are used only to calculate the aspect ratio, overall size is set by p*
+
+## Usage (same path)
+```rs
+{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}}
+```
+**Output**
+```html
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+
+## Usage (relative path ./)
+```rs
+{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Output**
+```html
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+
+## Usage (root path /)
+```rs
+{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Output**
+```html
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
 
-<style>
-.canon { background: white; width: 50%; height: auto; }
-</style>
diff --git a/content/overview-images/rust.png b/content/overview-images/rust.png
deleted file mode 100644
index 38cbc4f..0000000
--- a/content/overview-images/rust.png
+++ /dev/null
diff --git a/content/overview-markdown-syntax.md b/content/overview-markdown-syntax.md
index add1d58..1dc7e11 100644
--- a/content/overview-markdown-syntax.md
+++ b/content/overview-markdown-syntax.md
@@ -46,7 +46,7 @@ The blockquote element represents content that is quoted from another source,
 optionally with a citation which must be within a `footer` or `cite` element,
 and optionally with in-line changes such as annotations and abbreviations.
 
-## Blockquote without attribution
+## Blockquote no attribution
 
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use *Markdown syntax* within a blockquote.
@@ -59,6 +59,11 @@ and optionally with in-line changes such as annotations and abbreviations.
 > All men by nature desire to know.<br>
 > ― <cite>Aristotle[^2]</cite>
 
+## Blockquote with author
+
+> Power comes in response to a need, not a desire.<br>
+> — *Goku*
+
 # Tables
 
 Tables aren't part of the core Markdown spec, but Zola supports them
@@ -72,12 +77,25 @@ out-of-the-box.
    John | 59
   Kerry | 23
 
-## Inline Markdown within tables
+## Table with Inline Markdown
 
 | Italics   | Bold     | Code   | StrikeThrough     |
 | --------  | -------- | ------ | ----------------- |
 | *italics* | **bold** | `code` | ~~strikethrough~~ |
 
+
+## Large table within figure tag
+
+Surround very Large tables with `<figure></figure>` so they can scroll horizontally.
+<figure>
+
+| **Manufacturer** | Volkswagen | Toyota | Ford | Honda | Chevrolet | BMW | Hyundai | Audi | Nissan | Kia | Mercedes | Tesla | Mitsubishi | Suzuki | Volvo | Subaru | Mazda | Jaguar | Buick | Lexus | GMC | Porsche | Cadillac |
+| ---------- | ---- | ---- | ---- | ---- | ---- | ---- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| **Revenue $B** | $254 | $249 | $127 | $124 | $123 | $113 | $88 | $83 | $74 | $61 | $55 | $54 | $38 | $31 | $30 | $28 | $27 | $22 | $21 | $19 | $17 | $16 | $12 |
+
+</figure>
+*revenue values found on search engine and not verified, for figure scroller table demonstration purposes only.*
+
 # Foldable Text
 
 <details>
diff --git a/content/overview-math.md b/content/overview-math.md
index d8f50da..a759cac 100644
--- a/content/overview-math.md
+++ b/content/overview-math.md
@@ -4,31 +4,35 @@ date = 2021-05-05
 updated = 2022-01-01
 [taxonomies]
 categories = ["Features"]
-tags = ["KaTeX", "Mathematics"]
+tags = ["shortcodes","Mathematics"]
 [extra]
 math = true
+math_auto_render = true
 +++
 
-You can use [$\KaTeX$](https://katex.org) to render mathematical notations.
+You can use [KaTeX](https://katex.org) to render mathematical notations.
 
 You can enable the $\KaTeX$ support globally, per-section or per-page basis.
 <!-- more -->
 ## Enable Globally
 
 To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml`
-at your site root. Now every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
+at your site root. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
+and every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
 
 ```toml
 [extra]
 math = true
+math_auto_render = true
 ```
 
 ## Per-section Basis
 
-To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. Now every page under this section will load the KaTeX
-[autorender extension](https://katex.org/docs/autorender.html).
+To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`.
+Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
+and the section of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
 
-```md
+```toml
 +++
 [extra]
 math = true
@@ -38,12 +42,14 @@ math = true
 ## Per-page Basis
 
 To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's
-frontmatter. Now this page will load the $\KaTeX$ [autorender extension](https://katex.org/docs/autorender.html).
+frontmatter. Now the katex shortcode will be rendered, you can also add `math_auto_render = true`
+and the page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html).
 
-```markdown
+```toml
 +++
 [extra]
 math = true
+math_auto_render = true
 +++
 ```
 
@@ -60,26 +66,38 @@ Mathematics and `$$...$$` for block Mathematics.
 
 This is the most beautiful equation I've ever seen:
 
+### Usage
+```rs
+{%/* katex(block=false) */%} e^{i\pi}+1=0 {%/* end */%}
 ```
-$e^{i\pi}+1=0$
+### Output
+```html
+{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
 ```
-$e^{i\pi}+1=0$
+{% katex(block=false) %} e^{i\pi}+1=0 {% end %}
 
 ### Block Mathematics
 
 Some Mathematics in display mode is fair enough:
 
+### Usage
+```rs
+{%/* katex(block=true) */%} \int_0^1 x^2 dx {%/* end */%}
 ```
-$$
-\int_0^1 x^2 dx
-$$
+### Output
+```html
+{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
+```
+{% katex(block=true) %} \int_0^1 x^2 dx {% end %}
+
+### Auto Render Inline Example
+```
+$ e^{i\pi}+1=0 $
 ```
-$$
-\int_0^1 x^2 dx
-$$
 
-### Another Example
+$ e^{i\pi}+1=0 $
 
+### Auto Render Block Example
 ```
 $$
 f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
diff --git a/content/overview-rich-content.md b/content/overview-rich-content.md
deleted file mode 100644
index b511713..0000000
--- a/content/overview-rich-content.md
+++ /dev/null
@@ -1,90 +0,0 @@
-+++
-title = "Rich Content"
-description = "A brief description of Zola Shortcodes"
-date = 2021-05-06
-
-[taxonomies]
-categories = ["Features"]
-tags = ["video", "audio", "images", "shortcodes"]
-[extra]
-toc = true
-+++
-
-Several custom shortcodes are included to augment CommonMark (courtesy of d3c3nt theme), in addition to those [already provided by Zola][built-in]. `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing.
-
-<!-- more -->
-
-## Video
-
-The `video` shortcode takes a `sources` parameter (an array of strings)
-and returns a `<video>` tag. Each string in the `sources` array should
-be a path to a video file of a different type (`webm`, `mp4`, etc). Each
-individual source is then converted into a `<source>` tag, and the
-element is returned.
-
-### Usage
-```rs
-{{/* video(sources=["example.webm", "example.mp4"]) */}}
-```
-### Output
-```html
-{{ video(sources=["example.webm", "example.mp4"]) }}
-```
-
-## Image
-
-The `image` shortcode returns a `<picture>` tag and accepts three
-parameters: `sources` (an array of strings), `fallback_path`, and
-`fallback_alt` (both strings).
-
-Each string in the `sources` array should be a path to an image file of
-a different type (`webp`, `png`, `jpg`, etc). `fallback_path` and
-`fallback_alt` are used to create an `<img>` tag for the browser to fall
-back on if the other formats aren't yet supported.
-
-### Usage
-```rs
-{{/* image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") */}}
-```
-### Output
-```html
-{{ image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") }}
-```
-
-## GIF
-
-The `gif` shortcode is exactly the same as the [video shortcode][video]
-– it takes an array of strings called `sources` and returns a
-`<video>` tag. The only difference is in the outermost tag, which has
-four additional properties: `autoplay`, `loop`, `muted`, `playsinline`.
-
-Using the `<video>` tag in place of gifs allows for reduced file sizes,
-which is especially important in regions where internet is slower or
-less reliable.
-
-### Usage
-```rs
-{{/* gif(sources=["example.webm", "example.mp4"]) */}}
-```
-### Output
-```html
-{{ gif(sources=["example.webm", "example.mp4"]) }}
-```
-
-## Audio
-
-The `audio` shortcode takes a `sources` array of strings and returns an
-`<audio>` tag. Each string in the `sources` array should be a path to an
-audio file of a different type (`wav`, `ogg`, `mp3`, etc).
-
-### Usage
-```rs
-{{/* audio(sources=["example.wav", "example.ogg", "example.mp3"]) */}}
-```
-### Output
-```html
-{{ audio(sources=["example.wav", "example.ogg", "example.mp3"]) }}
-```
-
-[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes
-[video]: @/overview-rich-content.md#video
diff --git a/content/overview-rich-content/ferris-gesture.svg b/content/overview-rich-content/ferris-gesture.svg
new file mode 100644
index 0000000..d819588
--- /dev/null
+++ b/content/overview-rich-content/ferris-gesture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M327 173c-57 0-109 7-148 18v-3c-39 13-64 30-64 50l2 9-4 7s-3 4 2 13a1191 1191 0 0 0 54 67c0-1-4-16-15-34l-16-31c11 7 25 13 41 18 39 11 91 18 148 18 66 0 124-9 164-23v-86c-40-14-98-23-164-23m223 79-7-14v-1c0-16-16-31-44-42v84c13-6 24-12 31-18-2 9-10 26-16 39-9 18-13 34-13 34a1239 1239 0 0 0 46-69c6-9 3-13 3-13"/><path fill="#f74c00" d="m589 252-44-32-1-5 14-21c2-2 2-5 1-7s-3-4-6-5l-24-4-3-6 10-23v-7c-2-3-4-4-7-4l-25 1-4-5 6-25c1-3 0-5-2-7s-4-3-7-2l-24 6-5-4 1-26c0-3-1-6-3-7s-5-2-7-1l-23 11-5-3-4-26c-1-2-2-4-5-5-2-1-5-1-7 1l-20 15-6-2-8-24c-1-3-3-5-6-5-2-1-5 0-7 2l-17 19-6-1-13-22c-1-2-4-3-6-3-3 0-5 1-6 3l-13 22-7 1-16-19a7 7 0 0 0-13 3l-8 24-6 2-20-15c-3-2-5-2-8-1-2 1-4 3-4 5l-4 26-5 3-23-11c-2-1-5 0-7 1s-3 4-3 7l1 26-5 4-24-6c-3-1-6 0-7 2-2 2-3 4-2 7l5 25-3 5-25-1c-3 0-5 1-7 4v7l10 23-3 6-24 4c-3 1-5 3-6 5s-1 5 1 7l14 21v1l-41 44s-6 5 3 17a1639 1639 0 0 0 87 88c2-1-4-20-22-43-14-21-32-53-28-56 0 0 5-6 14-11 1 0 0 0 0 0s206 95 397 2c22-4 35 8 35 8 4 2-7 35-17 56a98 98 0 0 0-14 45l12-19c17-23 49-68 55-79 7-12 0-16 0-16"/><path d="m398 312 1-1-67-6c55-73 99-14 103-8v15z"/><path fill="#f74c00" d="M139 232s-55-21-65-44c0 0 65-52-13-107l-2 70s-23-23-22-62c0 0-72 35 12 96 0 0 3 33 79 73z"/><path d="M365 203s21-23 41 0c0 0 16 30 0 45 0 0-26 21-41 0 0 0-18-17 0-45"/><path fill="#fff" d="M389 211c0 9-5 16-12 16-6 0-11-7-11-16s5-16 11-16c7 0 12 7 12 16"/><path d="M273 197s35-16 45 19c0 0 10 40-29 43 0 0-50-10-16-62"/><path fill="#fff" d="M291 211c0 9-5 16-12 16s-12-7-12-16 5-17 12-17 12 8 12 17"/><path fill="#f74c00" d="M501 241s-7 29-53 60l-13 3s-41-76-100 10c0 0 18-11 67 2 0 0-22 35-68 34 0 0 44 52 110-24 0 0 70-27 76-85z"/></svg>
diff --git a/content/overview-rich-content/ferris.svg b/content/overview-rich-content/ferris.svg
new file mode 100644
index 0000000..1409b10
--- /dev/null
+++ b/content/overview-rich-content/ferris.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400"><path fill="#a52b00" d="M299 179c-61 0-116 7-157 19v101c41 12 96 20 157 20 69 0 131-10 173-25v-91c-42-15-104-24-173-24m235 82-7-15v-1c0-17-17-32-46-45v89c13-6 24-12 32-19-2 9-10 28-16 42-11 19-14 35-14 36l9-14 40-59c5-9 2-14 2-14M75 246l1 9-4 8s-3 4 3 14a1259 1259 0 0 0 56 70c1-1-4-17-16-35l-16-33c11 7 26 13 43 19V194c-42 13-67 31-67 52"/><path fill="#f74c00" d="m576 261-47-34-1-5 15-22c2-2 2-5 1-8-1-2-3-4-6-5l-26-4-3-6 11-25c1-3 1-6-1-8-1-2-4-4-7-4l-26 1-4-5 6-27c1-2 0-5-2-7s-5-3-7-2l-26 6-5-4 1-28c0-3-1-5-3-7-3-1-5-2-8 0l-24 11-6-3-4-27c0-3-2-5-5-6-2-2-5-1-7 0l-21 16-7-2-9-25c-1-3-3-5-6-5-2-1-5 0-7 2l-18 20h-6l-14-24c-1-2-4-4-7-4-2 0-5 2-6 4l-14 24h-7l-17-20a8 8 0 0 0-13 3l-10 25-6 2-21-16c-2-1-5-2-8 0-2 1-4 3-4 6l-5 27-5 3-24-11c-3-2-6-1-8 0-2 2-3 4-3 7l1 28-5 4-26-6c-3-1-5 0-7 2s-3 5-2 7l6 27-4 5-27-1c-2 0-5 2-6 4-2 2-2 5-1 8l11 25-3 6-26 4c-3 1-5 3-6 5-1 3-1 6 1 8l15 22v1l-44 46s-6 6 4 18a1732 1732 0 0 0 92 94c1-1-4-22-24-46-15-22-34-56-29-60 0 0 5-6 15-11 0 1 0 0 0 0s218 101 420 2c23-4 37 8 37 8 4 3-8 37-18 60-14 26-16 46-15 47s6-7 13-19l58-84c7-13 0-17 0-17"/><path d="m225 325-1-1 71-5c-58-77-105-16-110-9v15zm149 0 1-1-69-5c59-80 102-17 107-10v16z"/><path fill="#f74c00" d="M483 249s-8 31-56 63l-14 3s-44-80-106 10c0 0 19-11 71 3 0 0-23 37-72 35 0 0 47 56 117-24 0 0 74-29 80-90z"/><path d="M339 209s21-24 43 0c0 0 17 32 0 47 0 0-28 23-43 0 0 0-19-17 0-47"/><path fill="#fff" d="M364 218c0 9-6 16-12 16-7 0-13-7-13-16 0-10 6-17 13-17 6 0 12 7 12 17"/><path d="M242 202s37-16 47 21c0 0 11 43-31 45 0 0-52-10-16-66"/><path fill="#fff" d="M260 217c0 10-5 18-12 18s-13-8-13-18c0-9 6-17 13-17s12 8 12 17"/><path fill="#f74c00" d="M221 331c46-6 72-6 72-6-61-81-111-8-111-8-13-4-25-22-35-38l-38-11c44 75 77 76 77 76 68 87 100 17 100 17-38-4-65-30-65-30"/></svg>
diff --git a/content/overview-rich-content/index.md b/content/overview-rich-content/index.md
new file mode 100644
index 0000000..27c1718
--- /dev/null
+++ b/content/overview-rich-content/index.md
@@ -0,0 +1,95 @@
++++
+title = "Rich Content"
+description = "A brief description of Zola Shortcodes"
+date = 2021-05-18
+
+[taxonomies]
+categories = ["Features"]
+tags = ["video", "audio", "images", "shortcodes"]
+[extra]
+toc = true
++++
+
+Several custom shortcodes are included to augment CommonMark (courtesy of [d3c3nt theme](https://d3c3nt.figbert.com/posts/rich-content/)), in addition to those [already provided by Zola][built-in]. `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing.
+
+<!-- more -->
+
+## Video
+
+The `video` shortcode takes a `sources` parameter (an array of strings)
+and returns a `<video>` tag. Each string in the `sources` array should
+be a path to a video file of a different type (`webm`, `mp4`, etc). Each
+individual source is then converted into a `<source>` tag, and the
+element is returned.
+
+### Usage
+```rs
+{{/* video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
+```
+### Output
+```html
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+```
+{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+
+## Image
+
+The `image` shortcode returns a `<picture>` tag and accepts three
+parameters: `sources` (an array of strings), `fallback_path`, and
+`fallback_alt` (both strings).
+
+Each string in the `sources` array should be a path to an image file of
+a different type (`webp`, `png`, `jpg`, etc). `fpath` and
+`falt` are used to create an `<img>` tag for the browser to fall
+back on if the other formats aren't yet supported, fw and fh set the width and height of the fallback
+
+### Usage
+```rs
+{{/* image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") */}}
+```
+### Output
+```html
+{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+```
+{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
+
+## GIF
+
+The `gif` shortcode is exactly the same as the [video shortcode][video]
+– it takes an array of strings called `sources` and returns a
+`<video>` tag. The only difference is in the outermost tag, which has
+four additional properties: `autoplay`, `loop`, `muted`, `playsinline`.
+
+Using the `<video>` tag in place of gifs allows for reduced file sizes,
+which is especially important in regions where internet is slower or
+less reliable.
+
+### Usage
+```rs
+{{/* gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) */}}
+```
+### Output
+```html
+{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+```
+{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
+
+## Audio
+
+The `audio` shortcode takes a `sources` array of strings and returns an
+`<audio>` tag. Each string in the `sources` array should be a path to an
+audio file of a different type (`ogg`, `mp3`, `flac`, `wav`, etc).
+The browser will play the first type it supports, so placing them in order of size smallest to largest will use the least bandwidth if that is your goal.
+
+### Usage
+```rs
+{{/* audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) */}}
+```
+### Output
+```html
+{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
+```
+{{ audio(sources=["over9000.ogg", "over9000.mp3"]) }}
+
+[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes
+[video]: @/overview-rich-content/index.md#video
diff --git a/content/overview-rich-content/over9000-400.webp b/content/overview-rich-content/over9000-400.webp
new file mode 100644
index 0000000..1b2876f
--- /dev/null
+++ b/content/overview-rich-content/over9000-400.webp
diff --git a/content/overview-rich-content/over9000-640.webp b/content/overview-rich-content/over9000-640.webp
new file mode 100644
index 0000000..7ce3c43
--- /dev/null
+++ b/content/overview-rich-content/over9000-640.webp
diff --git a/content/overview-rich-content/over9000-960.webp b/content/overview-rich-content/over9000-960.webp
new file mode 100644
index 0000000..28fba9c
--- /dev/null
+++ b/content/overview-rich-content/over9000-960.webp
diff --git a/content/overview-rich-content/over9000.mp3 b/content/overview-rich-content/over9000.mp3
new file mode 100644
index 0000000..6b08f54
--- /dev/null
+++ b/content/overview-rich-content/over9000.mp3
diff --git a/content/overview-rich-content/over9000.ogg b/content/overview-rich-content/over9000.ogg
new file mode 100644
index 0000000..1eb0a5a
--- /dev/null
+++ b/content/overview-rich-content/over9000.ogg
diff --git a/content/overview-rich-content/over9000_av1.mp4 b/content/overview-rich-content/over9000_av1.mp4
new file mode 100644
index 0000000..24ade41
--- /dev/null
+++ b/content/overview-rich-content/over9000_av1.mp4
diff --git a/content/overview-rich-content/over9000_vp9.webm b/content/overview-rich-content/over9000_vp9.webm
new file mode 100644
index 0000000..2999e6c
--- /dev/null
+++ b/content/overview-rich-content/over9000_vp9.webm