Improve imghover shortcode, examples, page scores

7 files changed, 75 insertions, 50 deletions

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).