18 files changed, 117 insertions, 72 deletions
diff --git a/README.md b/README.md
index 27ecee1..1244c47 100644
--- a/README.md
+++ b/README.md
@@ -56,18 +56,24 @@ Enable the theme in your `config.toml` in the site directory:
 theme = "abridge"
 ```
 
-Or copy the `config.toml` from the theme directory to your project's
-root directory, and uncomment the theme line:
+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
-sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml
 ```
 
-Also point extra_syntaxes_and_themes at the correct directory:
-
+Uncomment the theme line, and point extra_syntaxes_and_themes at the correct directory:
+```bash
+sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml
+sed -i 's/^extra_syntaxes_and_themes = \["highlight_themes"\]/extra_syntaxes_and_themes = \["highlight_themes", "themes\/abridge\/highlight_themes"\]/' config.toml
 ```
-extra_syntaxes_and_themes = ["themes/abridge/highlight_themes"]
+
+The result should be:
+```toml
+theme = "abridge"
+[markdown]
+extra_syntaxes_and_themes = ["highlight_themes", "themes/abridge/highlight_themes"]
 ```
 
 ### Step 4: Add new content
diff --git a/config.toml b/config.toml
index 419274c..649142d 100644
--- a/config.toml
+++ b/config.toml
@@ -18,7 +18,8 @@ taxonomies = [
 ]
 
 [markdown]
-extra_syntaxes_and_themes = ["highlight_themes"]
+extra_syntaxes_and_themes = ["highlight_themes"] # Abridge's config.toml
+# In YOUR SITE'S config.toml set to: ["highlight_themes", "themes/abridge/highlight_themes"]
 highlight_code = true
 highlight_theme = "ayu-dark-abridge"
 # ayu-dark-abridge ayu-mirage-dark-abridge charcoal-dark-abridge dracula-dark-abridge material-dark-abridge
diff --git a/content/overview-embedded-videos.md b/content/overview-embedded-videos.md
deleted file mode 100644
index aa9074e..0000000
--- a/content/overview-embedded-videos.md
+++ /dev/null
@@ -1,23 +0,0 @@
-+++
-title = "Embedded Youtube & Vimeo Videos"
-date = 2021-05-07
-
-[taxonomies]
-categories = ["Features"]
-tags = ["shortcodes","video"]
-+++
-
-Zola has many shortcodes, and new are easily added, this example shows vimeo and youtube.
-<!-- more -->
-
-## Vimeo
-
-with `vm(id="id_here")`
-
-{{ vm(id="514402648") }}
-
-## Youtube
-
-with `yt(id="the_id_here")`
-
-{{ yt(id="32gyFIWecuw") }}
diff --git a/content/overview-embedded-vimeo.md b/content/overview-embedded-vimeo.md
new file mode 100644
index 0000000..e9dc03d
--- /dev/null
+++ b/content/overview-embedded-vimeo.md
@@ -0,0 +1,17 @@
++++
+title = "Embedded Vimeo Videos"
+date = 2021-05-07
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","video"]
++++
+
+Zola has many shortcodes, and new are easily added, this example shows vimeo.
+<!-- more -->
+
+## Vimeo
+
+with `vm(id="id_here" title="Youtube - Safe Systems Programming in Rust")`
+
+{{ vm(id="514402648" title="Youtube - Safe Systems Programming in Rust") }}
diff --git a/content/overview-embedded-youtube.md b/content/overview-embedded-youtube.md
new file mode 100644
index 0000000..b9787be
--- /dev/null
+++ b/content/overview-embedded-youtube.md
@@ -0,0 +1,17 @@
++++
+title = "Embedded Youtube Videos"
+date = 2021-05-08
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","video"]
++++
+
+Zola has many shortcodes, and new are easily added, this example shows youtube.
+<!-- more -->
+
+## Youtube
+
+with `yt(id="the_id_here" title="Vimeo - Gnome vs KDE")`
+
+{{ yt(id="32gyFIWecuw" title="Vimeo - Gnome vs KDE") }}
diff --git a/content/overview-fonts-imagehover-shortcode/index.md b/content/overview-fonts-imagehover-shortcode/index.md
index 655b6cd..448c7f0 100644
--- a/content/overview-fonts-imagehover-shortcode/index.md
+++ b/content/overview-fonts-imagehover-shortcode/index.md
@@ -7,9 +7,21 @@ categories = ["Features"]
 tags = ["shortcodes","image"]
 +++
 
-This shortcode accepts an array of images, the first element is the default, the remaining images are hover images.
+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 -->
 
-with `imagehover(sources=["file1.jpg", "file2.jpg", "file3.jpg"])`
+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"]) }}
+{{ 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/index.md b/content/overview-images/index.md
index 0e623e5..d253932 100644
--- a/content/overview-images/index.md
+++ b/content/overview-images/index.md
@@ -1,6 +1,6 @@
 +++
-title = "Images, Direct and Relative Path"
-date = 2021-05-08
+title = "Image Examples"
+date = 2021-05-09
 
 [taxonomies]
 categories = ["Features"]
@@ -9,12 +9,14 @@ tags = ["images"]
 
 Images can be embed using direct or relative paths.
 <!-- more -->
-Use `img()` to specify the relative path of image:
+Use `img(path="./image.jpg", alt="Papaya")` to specify the relative path of image:
 
-{{ img(path="./image.jpg", alt="") }}
+{{ img(path="./image.jpg", alt="Papaya") }}
 
 This is an example note with direct image, without using shortcode:
 
+`![Rust](rust.png)`
+
 ![Rust](rust.png)
 
 This is an svg image:
diff --git a/content/overview-markdown-syntax.md b/content/overview-markdown-syntax.md
index a289f2a..add1d58 100644
--- a/content/overview-markdown-syntax.md
+++ b/content/overview-markdown-syntax.md
@@ -12,7 +12,7 @@ toc = true
 
 This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme.
 <!-- more -->
-## Headings
+# Headings
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section
 headings. `<h1>` is the highest section level while `<h6>` is the lowest.
@@ -24,7 +24,7 @@ headings. `<h1>` is the highest section level while `<h6>` is the lowest.
 ##### H5
 ###### H6
 
-## Paragraph
+# Paragraph
 
 Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum,
 voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma
@@ -40,18 +40,18 @@ tiustia prat.
 Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne
 sapicia is sinveli squiatum, core et que aut hariosam ex eat.
 
-## Blockquotes
+# Blockquotes
 
 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 without attribution
 
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use *Markdown syntax* within a blockquote.
 
-#### Blockquote with attribution
+## Blockquote with attribution
 
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
@@ -59,7 +59,7 @@ and optionally with in-line changes such as annotations and abbreviations.
 > All men by nature desire to know.<br>
 > ― <cite>Aristotle[^2]</cite>
 
-## Tables
+# Tables
 
 Tables aren't part of the core Markdown spec, but Zola supports them
 out-of-the-box.
@@ -72,13 +72,13 @@ out-of-the-box.
    John | 59
   Kerry | 23
 
-#### Inline Markdown within tables
+## Inline Markdown within tables
 
 | Italics   | Bold     | Code   | StrikeThrough     |
 | --------  | -------- | ------ | ----------------- |
 | *italics* | **bold** | `code` | ~~strikethrough~~ |
 
-## Foldable Text
+# Foldable Text
 
 <details>
     <summary>Title 1</summary>
@@ -90,13 +90,13 @@ out-of-the-box.
     <p>Stay awhile, and listen!</p>
 </details>
 
-## Code Blocks
+# Code Blocks
 
 Code blocks.. ❤️ with automatic syntax highlighting ✨‍
 
 See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting/) for options.
 
-#### Code block with backticks
+## Code block with backticks
 
 ```html
 <!doctype html>
@@ -111,25 +111,25 @@ See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting
 </html>
 ```
 
-#### Inline Code block
+## Inline Code block
 
 If we want, we can also `specify inline code` which is useful for `the small stuff`.
 
-## List Types
+# List Types
 
-#### Ordered List
+## Ordered List
 
 1. First item
 2. Second item
 3. Third item
 
-#### Unordered List
+## Unordered List
 
 - List item
 - Another item
 - And another item
 
-#### Nested list
+## Nested list
 
 - Fruit
   - Apple
@@ -139,7 +139,7 @@ If we want, we can also `specify inline code` which is useful for `the small stu
   - Milk
   - Cheese
 
-## Other Elements — abbr, sub, sup, kbd, mark, link
+# Other Elements — abbr, sub, sup, kbd, mark, link
 
 <abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
 
diff --git a/content/overview-math.md b/content/overview-math.md
index df1b8b4..d8f50da 100644
--- a/content/overview-math.md
+++ b/content/overview-math.md
@@ -1,5 +1,5 @@
 +++
-title = "Mathematical Notations Support"
+title = "Mathematical Notations"
 date = 2021-05-05
 updated = 2022-01-01
 [taxonomies]
@@ -13,7 +13,7 @@ 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
+## 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).
@@ -23,7 +23,7 @@ at your site root. Now every section and page of your site will load the KaTeX [
 math = true
 ```
 
-### Per-section Basis
+## 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).
@@ -35,7 +35,7 @@ math = true
 +++
 ```
 
-### Per-page Basis
+## 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).
diff --git a/templates/categories/list.html b/templates/categories/list.html
index f85f732..10a8c8b 100644
--- a/templates/categories/list.html
+++ b/templates/categories/list.html
@@ -19,13 +19,15 @@
     <div>
       <center>
         <h1>{{ terms | length }} Categories</h1>
-        <p>{%- for term in terms %}[<a href="#{{ term.name }}">{{ term.name }}</a>] &nbsp; {%- endfor %}</p>
+        <p>{% for term in terms %} [<a href="#{{ term.name }}">{{ term.name }}</a>] {% endfor %}</p>
       </center>
       {%- for term in terms %}
       <h2 id="{{ term.name }}"><a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2>
       {%- for page in term.pages %}
-      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat |	default(value="%B %e, %Y")) }}</time></p>
+      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format="%F") }}</time></p>
       {%- endfor %}
       {%- endfor %}
     </div>
 {%- endblock content %}
+
+
diff --git a/templates/categories/single.html b/templates/categories/single.html
index f1c5cfe..b1cd680 100644
--- a/templates/categories/single.html
+++ b/templates/categories/single.html
@@ -21,7 +21,7 @@
       {%- for year, posts in term.pages | group_by(attribute="year") %}
       <h3>{{ year }}</h3>
       {%- for page in posts %}
-      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p>
+      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format="%F") }}</time></p>
       {%- endfor %}
       {%- endfor %}
     </div>
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index e4fcf73..541ebfe 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -17,7 +17,7 @@
 
 
 {%- macro footer(page) %}
-<h3><a href="#">Back to top</a></h3>
+<p><b><a href="#">Back to top</a></b></p>
 {%- endmacro footer %}
 
 
diff --git a/templates/posts.html b/templates/posts.html
index bd5d0d8..e4f1d54 100644
--- a/templates/posts.html
+++ b/templates/posts.html
@@ -23,7 +23,7 @@
       {%- for year, posts in section_item.pages | group_by(attribute="year") %}
       <h2>{{ year }}</h2>
       {%- for post in posts %}
-      <p><a href="{{ post.permalink | safe }}" title="{{ post.title }}">{{ post.title }}</a> - {{ post.date | date(format="%F") }}</p>
+      <p><a href="{{ post.permalink | safe }}" title="{{ post.title }}">{{ post.title }}</a> - <time datetime="{{ post.date }}">{{ post.date | date(format="%F") }}</time></p>
       {%- endfor %}
       {%- endfor %}
     </div>
diff --git a/templates/shortcodes/imagehover.html b/templates/shortcodes/imagehover.html
index 68f25be..99dd4e4 100644
--- a/templates/shortcodes/imagehover.html
+++ b/templates/shortcodes/imagehover.html
@@ -8,22 +8,33 @@
   {%- else %}
 
     <div id="{{ sourcename }}">## {{ sourcename }} </div>
-    <a onmouseover="document.getElementById('{{ sourcename }}').innerHTML='{{ bgname }}';" onmouseout="document.getElementById('{{ sourcename }}').innerHTML='{{ sourcename }}';" href="#"><div id="{{ sourcename }}image"> </div></a>
+    <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 }}{{ source | safe }}');
-        width: 560px;
-        height: 650px;
+        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 }}{{ bg | safe }}');
+        background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ source | safe }}');
       }
     {%- endif %}
   {%- endfor %}
diff --git a/templates/shortcodes/vm.html b/templates/shortcodes/vm.html
index 230e557..70230fe 100644
--- a/templates/shortcodes/vm.html
+++ b/templates/shortcodes/vm.html
@@ -1,3 +1,3 @@
 <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
-	<iframe src="https://player.vimeo.com/video/{{id}}" style="position:absolute;top:0;left:0;"></iframe>
+	<iframe src="https://player.vimeo.com/video/{{id}}" title="{{title | default(value="Vimeo") }}" style="position:absolute;top:0;left:0;"></iframe>
 </div>
diff --git a/templates/shortcodes/yt.html b/templates/shortcodes/yt.html
index 7816bd8..9ee9d1f 100644
--- a/templates/shortcodes/yt.html
+++ b/templates/shortcodes/yt.html
@@ -1,3 +1,3 @@
 <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
-	<iframe src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" style="position:absolute;top:0;left:0;"></iframe>
+	<iframe src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" title="{{title | default(value="Youtube") }}" style="position:absolute;top:0;left:0;"></iframe>
 </div>
diff --git a/templates/tags/list.html b/templates/tags/list.html
index e03b6df..3559ada 100644
--- a/templates/tags/list.html
+++ b/templates/tags/list.html
@@ -19,12 +19,12 @@
     <div>
       <center>
         <h1>{{ terms | length }} Tags</h1>
-        <p>{%- for term in terms %}#<a href="#{{ term.name }}">{{ term.name }}</a> &nbsp; {%- endfor %}</p>
+        <p>{% for term in terms %} #<a href="#{{ term.name }}">{{ term.name }}</a> {% endfor %}</p>
       </center>
       {%- for term in terms %}
       <h2 id="{{ term.name }}">#<a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2>
       {%- for page in term.pages %}
-      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat |	default(value="%B %e, %Y")) }}</time></p>
+      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format="%F") }}</time></p>
       {%- endfor %}
       {%- endfor %}
     </div>
diff --git a/templates/tags/single.html b/templates/tags/single.html
index b4428ff..c8bc0a3 100644
--- a/templates/tags/single.html
+++ b/templates/tags/single.html
@@ -21,7 +21,7 @@
       {%- for year, posts in term.pages | group_by(attribute="year") %}
       <h3>{{ year }}</h3>
       {%- for page in term.pages %}
-      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p>
+      <p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format="%F") }}</time></p>
       {%- endfor %}
       {%- endfor %}
     </div>