Improve Shortcodes, example content, page scores, fonts

92 files changed, 376 insertions, 441 deletions

diff --git a/README.md b/README.md
index 1244c47..316d5af 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,6 @@ theme = "abridge"
 ```
 
 Or copy the `config.toml` from the theme directory to your project's root directory:
-(This will give you a base configuration with all config values used)
 
 ```bash
 cp themes/abridge/config.toml config.toml
diff --git a/config.toml b/config.toml
index 649142d..627c14c 100644
--- a/config.toml
+++ b/config.toml
@@ -1,9 +1,7 @@
-base_url = "https://jieiku.github.io/abridge-demo/"
+base_url = "https://jieiku.github.io/abridge-demo" # do NOT include a trailing slash on the base URL
 title = "Abridge"
 description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No JS."
 default_language = "en"
-#theme = "abridge"
-
 output_dir = "public"
 compile_sass = true
 build_search_index = true
@@ -17,6 +15,7 @@ taxonomies = [
     {name = "tags", feed = true},
 ]
 
+#theme = "abridge"
 [markdown]
 extra_syntaxes_and_themes = ["highlight_themes"] # Abridge's config.toml
 # In YOUR SITE'S config.toml set to: ["highlight_themes", "themes/abridge/highlight_themes"]
@@ -126,8 +125,8 @@ favicon16 = "favicon-16x16.png" # favicon-16x16.png
 #    {url = "font/Jost-Bold.woff2"},
 #]
 
-katex_enable = false # used to to render mathematical notations, requires js
-katex_auto_render = false
+math = false # katex math js library, used to to render mathematical notations, requires javascript
+math_auto_render = false
 
 ##########################
 # meta/seo/analytic tags
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
diff --git a/highlight_themes/ayu-dark-abridge.tmTheme b/highlight_themes/ayu-dark-abridge.tmTheme
index 5438ee7..54ff943 100644
--- a/highlight_themes/ayu-dark-abridge.tmTheme
+++ b/highlight_themes/ayu-dark-abridge.tmTheme
@@ -332,7 +332,7 @@ a {
 			<key>settings</key>
 			<dict>
 				<key>foreground</key>
-				<string>#39BAE690</string>
+				<string>#39BAE6</string>
 			</dict>
 		</dict>
 		<dict>
diff --git a/sass/_imports.scss b/sass/_imports.scss
index 602e669..1112ed7 100644
--- a/sass/_imports.scss
+++ b/sass/_imports.scss
@@ -16,7 +16,7 @@
 
 @import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
 
-//@import "include/scroller"; // figure
+@import "include/scroller"; // figure
 @import "include/button"; // button, a[role=button], type=button, type=submit ...
 @import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button)
 
diff --git a/sass/fonts/_Bitter.scss b/sass/fonts/_Bitter.scss
deleted file mode 100644
index 55a915b..0000000
--- a/sass/fonts/_Bitter.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'Bitter';
-    src: local("Bitter"), url("/font/Bitter.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Bitter';
-    src: local("Bitter-Italic"), url("/font/Bitter-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Bitter';
-    src: local("Bitter-Bold"), url("/font/Bitter-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_DroidSans.scss b/sass/fonts/_DroidSans.scss
deleted file mode 100644
index f25c961..0000000
--- a/sass/fonts/_DroidSans.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@font-face {
-    font-family: 'DroidSans';
-    src: local("DroidSans"), url("/font/DroidSans.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'DroidSans';
-    src: local("DroidSans-Bold"), url("/font/DroidSans-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_Jost.scss b/sass/fonts/_Jost.scss
deleted file mode 100644
index a80b797..0000000
--- a/sass/fonts/_Jost.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'Jost';
-    src: local("Jost"), url("/font/Jost.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Jost';
-    src: local("Jost-Italic"), url("/font/Jost-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Jost';
-    src: local("Jost-Bold"), url("/font/Jost-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_Montserrat.scss b/sass/fonts/_Montserrat.scss
deleted file mode 100644
index 5a35c13..0000000
--- a/sass/fonts/_Montserrat.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'Montserrat';
-    src: local("Montserrat"), url("/font/Montserrat.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Montserrat';
-    src: local("Montserrat-Italic"), url("/font/Montserrat-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Montserrat';
-    src: local("Montserrat-Bold"), url("/font/Montserrat-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_OpenSans.scss b/sass/fonts/_OpenSans.scss
deleted file mode 100644
index a921a3d..0000000
--- a/sass/fonts/_OpenSans.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'OpenSans';
-    src: local("OpenSans"), url("/font/OpenSans.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'OpenSans';
-    src: local("OpenSans-Italic"), url("/font/OpenSans-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'OpenSans';
-    src: local("OpenSans-Bold"), url("/font/OpenSans-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_OpenSansCondensed.scss b/sass/fonts/_OpenSansCondensed.scss
deleted file mode 100644
index 28b9cce..0000000
--- a/sass/fonts/_OpenSansCondensed.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@font-face {
-    font-family: 'OpenSansCondensed';
-    src: local("OpenSansCondensed"), url("/font/OpenSansCondensed.woff2");//latin regular
-    font-display: swap;
-}
diff --git a/sass/fonts/_PTSans.scss b/sass/fonts/_PTSans.scss
deleted file mode 100644
index 759031b..0000000
--- a/sass/fonts/_PTSans.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'PTSans';
-    src: local("PTSans"), url("/font/PTSans.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'PTSans';
-    src: local("PTSans-Italic"), url("/font/PTSans-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'PTSans';
-    src: local("PTSans-Bold"), url("/font/PTSans-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_PTSansNarrow.scss b/sass/fonts/_PTSansNarrow.scss
deleted file mode 100644
index 85b25ae..0000000
--- a/sass/fonts/_PTSansNarrow.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@font-face {
-    font-family: 'PTSansNarrow';
-    src: local("PTSansNarrow"), url("/font/PTSansNarrow.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'PTSansNarrow';
-    src: local("PTSansNarrow-Bold"), url("/font/PTSansNarrow-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_RobotoCondensed.scss b/sass/fonts/_RobotoCondensed.scss
deleted file mode 100644
index 6509b86..0000000
--- a/sass/fonts/_RobotoCondensed.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'RobotoCondensed';
-    src: local("RobotoCondensed"), url("/font/RobotoCondensed.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'RobotoCondensed';
-    src: local("RobotoCondensed-Italic"), url("/font/RobotoCondensed-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'RobotoCondensed';
-    src: local("RobotoCondensed-Bold"), url("/font/RobotoCondensed-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_RobotoSlab.scss b/sass/fonts/_RobotoSlab.scss
deleted file mode 100644
index 695b45f..0000000
--- a/sass/fonts/_RobotoSlab.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@font-face {
-    font-family: 'RobotoSlab';
-    src: local("RobotoSlab"), url("/font/RobotoSlab.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'RobotoSlab';
-    src: local("RobotoSlab-Bold"), url("/font/RobotoSlab-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_SourceSansPro.scss b/sass/fonts/_SourceSansPro.scss
deleted file mode 100644
index 4baa541..0000000
--- a/sass/fonts/_SourceSansPro.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'SourceSansPro';
-    src: local("SourceSansPro"), url("/font/SourceSansPro.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'SourceSansPro';
-    src: local("SourceSansPro-Italic"), url("/font/SourceSansPro-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'SourceSansPro';
-    src: local("SourceSansPro-Bold"), url("/font/SourceSansPro-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/fonts/_Ubuntu.scss b/sass/fonts/_Ubuntu.scss
deleted file mode 100644
index d349ff3..0000000
--- a/sass/fonts/_Ubuntu.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
-    font-family: 'Ubuntu';
-    src: local("Ubuntu"), url("/font/Ubuntu.woff2");//latin regular
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Ubuntu';
-    src: local("Ubuntu-Italic"), url("/font/Ubuntu-Italic.woff2");//latin italic
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Ubuntu';
-    src: local("Ubuntu-Bold"), url("/font/Ubuntu-Bold.woff2");//latin bold
-    font-weight: bold;
-    font-display: swap;
-}
diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
index 39121d7..b6d84a7 100644
--- a/sass/include/_nav.scss
+++ b/sass/include/_nav.scss
@@ -19,7 +19,7 @@ main nav {
 main nav a,
 main nav a:visited {//pagination link styling
   font-weight: var(--fh);
-  border: .1rem solid var(--f2);
+  border: .1rem solid var(--c4);
   border-radius: var(--br);
   padding: .1rem var(--s1);
   margin: .1rem;
diff --git a/sass/skins/_abridge-auto.scss b/sass/skins/_abridge-auto.scss
index a844544..63e3008 100644
--- a/sass/skins/_abridge-auto.scss
+++ b/sass/skins/_abridge-auto.scss
@@ -1,8 +1,7 @@
 :root {
   // Regular Fonts used by default:
   --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
-  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
-  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+  //Good CLS, sorted by Size: Arimo(0.002), Roboto(0.002), Lato(0.002)
 
   // Monospace Fonts used for code:
   --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;
diff --git a/sass/skins/_abridge-dark.scss b/sass/skins/_abridge-dark.scss
index 39eb4a9..e49ce68 100644
--- a/sass/skins/_abridge-dark.scss
+++ b/sass/skins/_abridge-dark.scss
@@ -1,8 +1,7 @@
 :root {
   // Regular Fonts used by default:
   --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
-  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
-  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+  //Good CLS, sorted by Size: Arimo(0.002), Roboto(0.002), Lato(0.002)
 
   // Monospace Fonts used for code:
   --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;
diff --git a/sass/skins/_abridge-light.scss b/sass/skins/_abridge-light.scss
index 004b807..a1b03d3 100644
--- a/sass/skins/_abridge-light.scss
+++ b/sass/skins/_abridge-light.scss
@@ -1,8 +1,7 @@
 :root {
   // Regular Fonts used by default:
   --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
-  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
-  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+  //Good CLS, sorted by Size: Arimo(0.002), Roboto(0.002), Lato(0.002)
 
   // Monospace Fonts used for code:
   --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;
diff --git a/sass/skins/_blue-auto.scss b/sass/skins/_blue-auto.scss
index 7879b06..d33ae83 100644
--- a/sass/skins/_blue-auto.scss
+++ b/sass/skins/_blue-auto.scss
@@ -1,8 +1,7 @@
 :root {
   // Regular Fonts used by default:
   --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
-  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
-  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+  //Good CLS, sorted by Size: Arimo(0.002), Roboto(0.002), Lato(0.002)
 
   // Monospace Fonts used for code:
   --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;
diff --git a/sass/skins/_blue-dark.scss b/sass/skins/_blue-dark.scss
index 1c29f55..0428f53 100644
--- a/sass/skins/_blue-dark.scss
+++ b/sass/skins/_blue-dark.scss
@@ -1,8 +1,7 @@
 :root {
   // Regular Fonts used by default:
   --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
-  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
-  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+  //Good CLS, sorted by Size: Arimo(0.002), Roboto(0.002), Lato(0.002)
 
   // Monospace Fonts used for code:
   --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;
diff --git a/sass/skins/_blue-light.scss b/sass/skins/_blue-light.scss
index ea87f7e..48f00b9 100644
--- a/sass/skins/_blue-light.scss
+++ b/sass/skins/_blue-light.scss
@@ -1,8 +1,7 @@
 :root {
   // Regular Fonts used by default:
   --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
-  //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004)
-  //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401)
+  //Good CLS, sorted by Size: Arimo(0.002), Roboto(0.002), Lato(0.002)
 
   // Monospace Fonts used for code:
   --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace;
diff --git a/static/font/Bitter-Bold.woff2 b/static/font/Bitter-Bold.woff2
deleted file mode 100644
index 7add1cd..0000000
--- a/static/font/Bitter-Bold.woff2
+++ /dev/null
diff --git a/static/font/Bitter-Italic.woff2 b/static/font/Bitter-Italic.woff2
deleted file mode 100644
index 1af6b82..0000000
--- a/static/font/Bitter-Italic.woff2
+++ /dev/null
diff --git a/static/font/Bitter.woff2 b/static/font/Bitter.woff2
deleted file mode 100644
index 5c36b2b..0000000
--- a/static/font/Bitter.woff2
+++ /dev/null
diff --git a/static/font/DroidSans-Bold.woff2 b/static/font/DroidSans-Bold.woff2
deleted file mode 100644
index 49cc9cd..0000000
--- a/static/font/DroidSans-Bold.woff2
+++ /dev/null
diff --git a/static/font/DroidSans.woff2 b/static/font/DroidSans.woff2
deleted file mode 100644
index 214d458..0000000
--- a/static/font/DroidSans.woff2
+++ /dev/null
diff --git a/static/font/Jost-Bold.woff2 b/static/font/Jost-Bold.woff2
deleted file mode 100644
index d040d60..0000000
--- a/static/font/Jost-Bold.woff2
+++ /dev/null
diff --git a/static/font/Jost-Italic.woff2 b/static/font/Jost-Italic.woff2
deleted file mode 100644
index 95bee0a..0000000
--- a/static/font/Jost-Italic.woff2
+++ /dev/null
diff --git a/static/font/Jost.woff2 b/static/font/Jost.woff2
deleted file mode 100644
index b5fe38e..0000000
--- a/static/font/Jost.woff2
+++ /dev/null
diff --git a/static/font/Montserrat-Bold.woff2 b/static/font/Montserrat-Bold.woff2
deleted file mode 100644
index e8bf92b..0000000
--- a/static/font/Montserrat-Bold.woff2
+++ /dev/null
diff --git a/static/font/Montserrat-Italic.woff2 b/static/font/Montserrat-Italic.woff2
deleted file mode 100644
index 996797c..0000000
--- a/static/font/Montserrat-Italic.woff2
+++ /dev/null
diff --git a/static/font/Montserrat.woff2 b/static/font/Montserrat.woff2
deleted file mode 100644
index 1617aac..0000000
--- a/static/font/Montserrat.woff2
+++ /dev/null
diff --git a/static/font/OpenSans-Bold.woff2 b/static/font/OpenSans-Bold.woff2
deleted file mode 100644
index 00582c6..0000000
--- a/static/font/OpenSans-Bold.woff2
+++ /dev/null
diff --git a/static/font/OpenSans-Italic.woff2 b/static/font/OpenSans-Italic.woff2
deleted file mode 100644
index b323b27..0000000
--- a/static/font/OpenSans-Italic.woff2
+++ /dev/null
diff --git a/static/font/OpenSans.woff2 b/static/font/OpenSans.woff2
deleted file mode 100644
index f143cd4..0000000
--- a/static/font/OpenSans.woff2
+++ /dev/null
diff --git a/static/font/OpenSansCondensed.woff2 b/static/font/OpenSansCondensed.woff2
deleted file mode 100644
index dbfb8c0..0000000
--- a/static/font/OpenSansCondensed.woff2
+++ /dev/null
diff --git a/static/font/PTSans-Bold.woff2 b/static/font/PTSans-Bold.woff2
deleted file mode 100644
index a1c5e93..0000000
--- a/static/font/PTSans-Bold.woff2
+++ /dev/null
diff --git a/static/font/PTSans-Italic.woff2 b/static/font/PTSans-Italic.woff2
deleted file mode 100644
index 82a02a1..0000000
--- a/static/font/PTSans-Italic.woff2
+++ /dev/null
diff --git a/static/font/PTSans.woff2 b/static/font/PTSans.woff2
deleted file mode 100644
index 46ab186..0000000
--- a/static/font/PTSans.woff2
+++ /dev/null
diff --git a/static/font/PTSansNarrow-Bold.woff2 b/static/font/PTSansNarrow-Bold.woff2
deleted file mode 100644
index 2def8e1..0000000
--- a/static/font/PTSansNarrow-Bold.woff2
+++ /dev/null
diff --git a/static/font/PTSansNarrow.woff2 b/static/font/PTSansNarrow.woff2
deleted file mode 100644
index b7d8031..0000000
--- a/static/font/PTSansNarrow.woff2
+++ /dev/null
diff --git a/static/font/RobotoCondensed-Bold.woff2 b/static/font/RobotoCondensed-Bold.woff2
deleted file mode 100644
index a5ab9d8..0000000
--- a/static/font/RobotoCondensed-Bold.woff2
+++ /dev/null
diff --git a/static/font/RobotoCondensed-Italic.woff2 b/static/font/RobotoCondensed-Italic.woff2
deleted file mode 100644
index 9306a3e..0000000
--- a/static/font/RobotoCondensed-Italic.woff2
+++ /dev/null
diff --git a/static/font/RobotoCondensed.woff2 b/static/font/RobotoCondensed.woff2
deleted file mode 100644
index e4c259c..0000000
--- a/static/font/RobotoCondensed.woff2
+++ /dev/null
diff --git a/static/font/RobotoSlab-Bold.woff2 b/static/font/RobotoSlab-Bold.woff2
deleted file mode 100644
index dcb8b0a..0000000
--- a/static/font/RobotoSlab-Bold.woff2
+++ /dev/null
diff --git a/static/font/RobotoSlab.woff2 b/static/font/RobotoSlab.woff2
deleted file mode 100644
index c5d117b..0000000
--- a/static/font/RobotoSlab.woff2
+++ /dev/null
diff --git a/static/font/SourceSansPro-Bold.woff2 b/static/font/SourceSansPro-Bold.woff2
deleted file mode 100644
index cd6bfd0..0000000
--- a/static/font/SourceSansPro-Bold.woff2
+++ /dev/null
diff --git a/static/font/SourceSansPro-Italic.woff2 b/static/font/SourceSansPro-Italic.woff2
deleted file mode 100644
index 9448cd5..0000000
--- a/static/font/SourceSansPro-Italic.woff2
+++ /dev/null
diff --git a/static/font/SourceSansPro.woff2 b/static/font/SourceSansPro.woff2
deleted file mode 100644
index e49928e..0000000
--- a/static/font/SourceSansPro.woff2
+++ /dev/null
diff --git a/static/font/Ubuntu-Bold.woff2 b/static/font/Ubuntu-Bold.woff2
deleted file mode 100644
index 2c08bc6..0000000
--- a/static/font/Ubuntu-Bold.woff2
+++ /dev/null
diff --git a/static/font/Ubuntu-Italic.woff2 b/static/font/Ubuntu-Italic.woff2
deleted file mode 100644
index 70755ed..0000000
--- a/static/font/Ubuntu-Italic.woff2
+++ /dev/null
diff --git a/static/font/Ubuntu.woff2 b/static/font/Ubuntu.woff2
deleted file mode 100644
index 8070e4f..0000000
--- a/static/font/Ubuntu.woff2
+++ /dev/null
diff --git a/static/processed_images/199de027950a8f4800.jpg b/static/processed_images/199de027950a8f4800.jpg
deleted file mode 100644
index 51d50a8..0000000
--- a/static/processed_images/199de027950a8f4800.jpg
+++ /dev/null
diff --git a/templates/macros/head.html b/templates/macros/head.html
index 6736cd9..42d8fa0 100644
--- a/templates/macros/head.html
+++ b/templates/macros/head.html
@@ -203,14 +203,17 @@
   {%- endif %}
 {%- endmacro %}
 
-
+{# https://katex.org/docs/autorender.html #}
+{# https://github.com/KaTeX/KaTeX/ #}
+{# https://github.com/KaTeX/KaTeX/tree/main/contrib/mathtex-script-type/ #}
 {%- macro math() %}
-  {%- if config.extra.katex_enabled %}
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css" integrity="sha384-R4558gYOUz8mP9YWpZJjofhk+zx0AS11p36HnD2ZKj/6JR5z27gSSULCNHIRReVs" crossorigin="anonymous">
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js" integrity="sha384-z1fJDqw8ZApjGO3/unPWUPsIymfsJmyrDVWC8Tv/a1HeOtGmkwNd/7xUS0Xcnvsx" crossorigin="anonymous"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/mathtex-script-type.min.js" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script>
-  {%- if config.extra.katex_auto_render %}
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
+  {%- if config.extra.math or page.extra.math %}
+  <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.css" as="style" integrity="sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs" onload="this.onload=null;this.rel='stylesheet'" crossorigin="anonymous">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.js" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/contrib/mathtex-script-type.min.js" integrity="sha384-jiBVvJ8NGGj5n7kJaiWwWp9AjC+Yh8rhZY3GtAX8yU28azcLgoRo4oukO87g7zDT" crossorigin="anonymous"></script>
+  {%- if config.extra.math_auto_render or page.extra.math_auto_render %}
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
+  <script>document.addEventListener("DOMContentLoaded",function(){renderMathInElement(document.body,{delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],throwOnError:!1})});</script>
   {%- endif %}
   {%- endif %}
 {%- endmacro %}
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index ea236ef..3653c8a 100644
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@@ -3,5 +3,5 @@
     {% set type = source | split(pat=".") | last -%}
     <source srcset="{{ config.base_url | safe}}{{ page.path | safe }}{{ source | safe }}" type="{{ 'img/' ~ type }}">
   {% endfor -%}
-  <img src="{{ fallback_path }}" alt="{{ fallback_alt }}"/>
+  <img src="{{ fpath }}" alt="{{ falt | default(value='Image') }}" {% if fw %}width="{{fw}}" {% endif %}{% if fh %}height="{{fh}}" {% endif %}/>
 </picture>
diff --git a/templates/shortcodes/imagehover.html b/templates/shortcodes/imagehover.html
deleted file mode 100644
index 99dd4e4..0000000
--- a/templates/shortcodes/imagehover.html
+++ /dev/null
@@ -1,41 +0,0 @@
-{%- set_global bg = " " %}
-{%- set_global bgname = " " %}
-{%- for source in sources %}
-  {%- set sourcename = source | split(pat=".") | first %}
-  {%- if loop.first %}
-    {%- set_global bg = source %}
-    {%- set_global bgname = source | split(pat=".") | first %}
-  {%- else %}
-
-    <div id="{{ sourcename }}">## {{ sourcename }} </div>
-    <div id="{{ sourcename }}image" alt="{{ sourcename }}"> </div>
-
-  {%- endif %}
-{%- endfor %}
-
-{%- if w and h and p %}
-  {%- set padding = h / w * p %}
-{%- elif w and h %}
-  {%- set padding = h / w * 50 %}
-{%- else %}
-  {%- set padding = 50 %}
-{%- endif %}
-
-<style>
-  {%- for source in sources %}
-    {%- set sourcename = source | split(pat=".") | first %}
-    {%- if not loop.first %}
-      #{{ sourcename | safe }}image {
-        background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ bg | safe }}');
-        background-size: contain;
-        background-repeat: no-repeat;
-        width: {{ p | default(value=50) }}%;
-        height: 0;
-        padding-top: {{ padding }}%;
-      }
-      #{{ sourcename | safe }}image:hover {
-        background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ source | safe }}');
-      }
-    {%- endif %}
-  {%- endfor %}
-</style>
diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html
index d003eeb..46fb39d 100644
--- a/templates/shortcodes/img.html
+++ b/templates/shortcodes/img.html
@@ -1,45 +1,23 @@
-{# {{ img(path="", alt="", caption="", extended_width_pct=1.3, quality=90) }} #}
+{# {{ img(src="ferris.svg" class="" alt="" w=600 h=400) }} #}
 
-{# container_width = (pixel size, px) * (.container's max-width) #}
-{% set container_width = 16 * 42 %}
+{%- set dirtest = src | trim_start_matches(pat="./") %}
+{%- if dirtest is containing("/") %}
+  {%- set reldir = true %}
+{%- endif %}
 
-{# figure_width = container_width - (figure margin_blocks) #}
-{% set figure_width = container_width - (40 * 2) %}
+{%- if src is starting_with("./") and reldir %} {# Relative Path #}
+  {%- set path = src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+  {%- set path = path ~ "/"  %}
 
-{% if path is starting_with("./") %}
-  {% set relative_path = page.relative_path | split(pat="/") | slice(end=-1) | join(sep="/") %}
-  {% set img_path = path | trim_start_matches(pat="./") %}
-  {% set img_path = relative_path ~ "/" ~ img_path %}
-{% else %}
-  {% set img_path = path %}
-{% endif %}
+{%- elif src is starting_with("/") %} {# Root Path #}
+  {%- set rootpath = src | split(pat="/") | slice(end=-1) | join(sep="/") %}
+  {%- set path = config.base_url ~ rootpath ~ "/"  %}
 
-{% if path is not ending_with(".svg") %}
+{%- else %} {# Same Directory Path #}
+  {%- set path = "" %}
 
-  {% set resize = true %}
-  {% set image_quality = 90 %}
-  {% if quality %}
-    {% set image_quality = quality %}
-  {% endif %}
+{%- endif %}
 
-  {% if extended_width_pct %}
-
-    {% if extended_width_pct == -1 %}
-      {# adjust extended width to container width #}
-      {% set extended_width_pct = 0.042 %}
-    {% endif %}
-    {% set _width = config.extra.images.max_width - figure_width %}
-    {% set extended_width = (extended_width_pct * _width + figure_width) | round | int %}
-    {% if extended_width > config.extra.images.max_width %}
-      {% set extended_width = config.extra.images.max_width %}
-    {% endif %}
-    {% set resized_image = resize_image(path=img_path, width=extended_width, op="fit_width", quality=image_quality) %}
-
-  {% else %}
-    {% set resized_image = resize_image(path=img_path, width=figure_width, op="fit_width", quality=image_quality) %}
-  {% endif %}
-{% endif %}
-<figure>
-  <img src="{% if resize %}{{ resized_image.url }}{% else %}{{ path }}{% endif %}" {% if alt %}alt="{{alt}}"{% endif %}/>
-  {% if caption %}<figcaption>{{ caption | safe }}</figcaption>{% endif %}
-</figure>
+{%- set img = src | split(pat="/") | last %}
+{%- set name = img | split(pat=".") | first %}
+<img src="{{ path | safe }}{{ img | safe }}" {% if class %}class="{{class}}" {% endif %}{% if alt %}alt="{{alt}}" {% endif %}{% if w %}width="{{w}}" {% endif %}{% if h %}height="{{h}}" {% endif %}/>
diff --git a/templates/shortcodes/imghover.html b/templates/shortcodes/imghover.html
new file mode 100644
index 0000000..8063378
--- /dev/null
+++ b/templates/shortcodes/imghover.html
@@ -0,0 +1,85 @@
+{%- set_global bg = "" %}
+
+{%- for source in src %}
+
+  {%- set dirtest = source | trim_start_matches(pat="./") %}
+  {%- if dirtest is containing("/") %}
+    {%- set reldir = true %}
+  {%- endif %}
+
+  {%- if source is starting_with("./") and reldir %} {# Relative Path #}
+    {%- set pathtype = "rel-" %}
+    {%- set path = source | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+    {%- set path = path ~ "/"  %}
+
+  {%- elif source is starting_with("/") %} {# Root Path #}
+    {%- set pathtype = "root-" %}
+    {%- set rootpath = source | split(pat="/") | slice(end=-1) | join(sep="/") %}
+    {%- set path = config.base_url ~ rootpath ~ "/"  %}
+
+  {%- else %} {# Same Directory Path #}
+    {%- set pathtype = "same-" %}
+    {%- set path = "" %}
+  {%- endif %}
+
+  {%- set sourcepath = source | split(pat="/") | last %}
+  {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %}
+
+  {%- if loop.first %}
+    {%- set_global bg = source | split(pat="/") | last %}
+  {%- else %}
+    <div id="{{ sourcename }}"><b>{{ sourcename }} on hover</b></div>
+    <div id="{{ sourcename }}image" alt="{{ sourcename }}"> </div>
+  {%- endif %}
+
+{%- endfor %}
+
+{%- if w and h and p %}
+  {%- set padding = h / w * p %}
+{%- elif w and h %}
+  {%- set padding = h / w * 50 %}
+{%- else %}
+  {%- set padding = 50 %}
+{%- endif %}
+
+<style>
+  {%- for source in src %}
+
+    {%- set dirtest = source | trim_start_matches(pat="./") %}
+    {%- if dirtest is containing("/") %}
+      {%- set reldir = true %}
+    {%- endif %}
+
+    {%- if source is starting_with("./") and reldir %} {# Relative Path #}
+      {%- set pathtype = "rel-" %}
+      {%- set path = source | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+      {%- set path = path ~ "/"  %}
+
+    {%- elif source is starting_with("/") %} {# Root Path #}
+      {%- set pathtype = "root-" %}
+      {%- set rootpath = source | split(pat="/") | slice(end=-1) | join(sep="/") %}
+      {%- set path = config.base_url ~ rootpath ~ "/"  %}
+
+    {%- else %} {# Same Directory Path #}
+      {%- set pathtype = "same-" %}
+      {%- set path = "" %}
+    {%- endif %}
+
+    {%- set sourcepath = source | split(pat="/") | last %}
+    {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %}
+
+    {%- if not loop.first %}
+      #{{ sourcename | safe }}image {
+        background-image: url('{{ path | safe }}{{ bg | safe }}');
+        background-size: contain;
+        background-repeat: no-repeat;
+        width: {{ p | default(value=50) }}%;
+        height: 0;
+        padding-top: {{ padding }}%;
+      }
+      #{{ sourcename | safe }}image:hover {
+        background-image: url('{{ path | safe }}{{ sourcepath | safe }}');
+      }
+    {%- endif %}
+  {%- endfor %}
+</style>
diff --git a/templates/shortcodes/katex.html b/templates/shortcodes/katex.html
index cac8e97..9b9a1f7 100644
--- a/templates/shortcodes/katex.html
+++ b/templates/shortcodes/katex.html
@@ -1 +1 @@
-<script type="math/tex{% if block %};mode=display{% endif %}">{{body}}</script>
+<script type="math/tex{% if block %};mode=display{% endif %}">{{body | safe}}</script>
diff --git a/templates/shortcodes/quote.html b/templates/shortcodes/quote.html
deleted file mode 100644
index 8238b71..0000000
--- a/templates/shortcodes/quote.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<blockquote>
-  {{body}}<br />
-  {% if author %}
-  -- {{ author }}
-  {% endif %}
-</blockquote>