From d5dccd6b8ac3529d3e063088c3e74a57e8d925fb Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Thu, 26 May 2022 20:18:35 -0700
Subject: Toc, Examples, Fonts

---
 content/overview-abridge.md            |   2 +-
 content/overview-markdown-and-style.md | 350 +++++++++++++++++++++++++++++++++
 content/overview-markdown-syntax.md    | 179 -----------------
 3 files changed, 351 insertions(+), 180 deletions(-)
 create mode 100644 content/overview-markdown-and-style.md
 delete mode 100644 content/overview-markdown-syntax.md

(limited to 'content')

diff --git a/content/overview-abridge.md b/content/overview-abridge.md
index 0d5d675..e6b8db3 100644
--- a/content/overview-abridge.md
+++ b/content/overview-abridge.md
@@ -1,5 +1,5 @@
 +++
-title = "Abridge Zola Theme and css Framework"
+title = "Abridge Zola Theme"
 date = 2022-05-17
 
 [taxonomies]
diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md
new file mode 100644
index 0000000..29b938a
--- /dev/null
+++ b/content/overview-markdown-and-style.md
@@ -0,0 +1,350 @@
++++
+title = "Markdown and Style Guide"
+description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
+date = 2022-05-15
+
+[taxonomies]
+categories = ["Features"]
+tags = ["Markdown"]
+[extra]
+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
+
+The following HTML `<h1>`—`<h6>` elements represent six levels of section
+headings. `<h1>` is the highest section level while `<h6>` is the lowest.
+
+# H1
+## H2
+### H3
+#### H4
+##### H5
+###### H6
+
+# 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
+dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as
+cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin
+porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur?
+Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit
+ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda
+veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore
+eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata
+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
+
+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 no attribution
+
+> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
+> **Note** that you can use *Markdown syntax* within a blockquote.
+
+## Blockquote with attribution
+
+> Don't communicate by sharing memory, share memory by communicating.<br>
+> — <cite>Rob Pike[^1]</cite>
+
+> 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
+out-of-the-box.
+
+   Name | Age
+--------|------
+  Alice | 23
+    Bob | 27
+   Cody | 33
+   John | 59
+  Kerry | 23
+
+## 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>
+    <summary>Title 1</summary>
+    <p>IT'S A SECRET TO EVERYBODY.</p>
+</details>
+
+<details>
+    <summary>Title 2</summary>
+    <p>Stay awhile, and listen!</p>
+</details>
+
+# 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
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Example HTML5 Document</title>
+</head>
+<body>
+  <p>Test</p>
+</body>
+</html>
+```
+
+## Inline Code block
+
+If we want, we can also `specify inline code` which is useful for `the small stuff`.
+
+# List Types
+
+## Ordered List
+
+1. First item
+2. Second item
+3. Third item
+
+## Unordered List
+
+- List item
+- Another item
+- And another item
+
+## Nested list
+
+- Fruit
+  - Apple
+  - Orange
+  - Banana
+- Dairy
+  - Milk
+  - Cheese
+
+# Other Elements — abbr, sub, sup, kbd, mark, link
+
+<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
+
+H<sub>2</sub>O
+
+X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
+
+Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the
+session.
+
+Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and
+other small creatures.
+
+---
+<!-- Note: There must be a blank line between every two lines of the footnote difinition.  -->
+[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c)
+during Gopherfest, November 18, 2015.
+
+[^2]: The quote is the first sentence of Aristotle's [Metaphysics](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)).
+
+
+# Forms:
+
+<form name="contact" method="POST" >
+    <p><label>Name</label>
+        <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
+    </p>
+    <p><label>Email Address</label>
+        <input type="email" placeholder="name@example.com" id="email" required data-validation-required-message="Please enter your email address.">
+    </p>
+    <p><label>Message</label>
+        <textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
+    </p>
+    <div id="success"></div>
+    <p><button type="submit" id="sendMessageButton">Send</button></p>
+    <br>
+    <!-- Select -->
+    <label for="fruit">Fruit</label>
+    <select id="fruit" required>
+        <option value="" selected>Select a fruit…</option>
+        <option>Banana</option>
+        <option>Watermelon</option>
+        <option>Apple</option>
+        <option>Orange</option>
+        <option>Mango</option>
+    </select>
+    <!-- Radios -->
+    <fieldset>
+        <legend>Size</legend>
+        <label for="small">
+        <input type="radio" id="small" name="size" value="small" checked>
+        Small
+        </label>
+        <label for="medium">
+        <input type="radio" id="medium" name="size" value="medium">
+        Medium
+        </label>
+        <label for="large">
+        <input type="radio" id="large" name="size" value="large">
+        Large
+        </label>
+        <label for="extralarge">
+        <input type="radio" id="extralarge" name="size" value="extralarge" disabled>
+        Extra Large
+        </label>
+    </fieldset>
+    <!-- Checkboxes -->
+    <fieldset>
+        <label for="terms">
+        <input type="checkbox" id="terms" name="terms">
+        I agree to the Terms and Conditions
+        </label>
+        <label for="terms_sharing">
+        <input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
+        I agree to share my information with partners
+        </label>
+    </fieldset>
+    <!-- Switches -->
+    <fieldset>
+        <label for="switch">
+        <input type="checkbox" id="switch" name="switch" role="switch">
+        Publish on my profile
+        </label>
+        <label for="switch_disabled">
+        <input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch_disabled" disabled checked>
+        Publish on my profile my accomplishments
+        </label>
+    </fieldset>
+    <br>
+    <!-- Search -->
+    <input type="search" id="search" name="search" placeholder="Search">
+    <!-- File browser -->
+    <label for="file">File browser
+    <input type="file" id="file" name="file">
+    </label>
+    <!-- Range slider -->
+    <label for="range">Range slider
+    <input type="range" min="0" max="100" value="50" id="range" name="range">
+    </label>
+    <!-- Date -->
+    <label for="date">Date
+    <input type="date" id="date" name="date">
+    </label>
+    <!-- Time -->
+    <label for="time">Time
+    <input type="time" id="time" name="time">
+    </label>
+    <!-- Color -->
+    <label for="color">Color
+    <input type="color" id="color" name="color" value="#0eaaaa">
+    </label>
+</form>
+
+# Navs
+
+Site primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example.
+
+If the nav tag is under the main tag instead of the header tag then the links will have a border:
+
+<header>
+    <nav>
+        <ul>
+            <li><a href="#">&#60; Previous</a></li>
+            <li><a href="#">Next &#62;</a></li>
+        </ul>
+    </nav>
+</header>
+
+
+# Infinity Flex Grid
+
+## Simple Grid
+
+<section>
+    <section> 1 </section>
+    <section> 2 </section>
+    <section> 3 </section>
+</section>
+<section>
+    <section>1</section>
+    <section>2</section>
+    <section>3</section>
+    <section>4</section>
+</section>
+<section>
+    <section> 1 </section>
+    <section> 2 </section>
+    <section> 3 </section>
+    <section> 4 </section>
+    <section> 5 </section>
+</section>
+
+## Complex grid
+
+<section>
+    <section> 1 </section>
+    <section> 2 </section>
+    <section> 3 </section>
+</section>
+<section>
+    <section style = "--c:2">Merge the first 2 columns</section>
+    <section>2</section>
+    <section>3</section>
+    <section>4</section>
+</section>
+<section>
+    <section> 1 </section>
+    <section style = "--c:3"> Merge 3 columns </section>
+    <section> 3 </section>
+</section>
+<section>
+    <section>1</section>
+    <section style = "--c:2">Merge 2</section>
+    <section style = "--c:3">Merge 3</section>
+    <section>4</section>
+    <section>5</section>
+    <section>6</section>
+    <section>7</section>
+</section>
+<section>
+    <div style = "--c:1"> 1 </div>
+    <div style = "--c:2"> Merge 2 columns</div>
+    <div style = "--c:1"> 3 </div>
+</section>
+
+<style>
+    [style*="--c:"],section>section{
+    background-color:#777;
+    }
+</style>
diff --git a/content/overview-markdown-syntax.md b/content/overview-markdown-syntax.md
deleted file mode 100644
index 1dc7e11..0000000
--- a/content/overview-markdown-syntax.md
+++ /dev/null
@@ -1,179 +0,0 @@
-+++
-title = "Markdown Syntax Guide"
-description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
-date = 2022-05-15
-
-[taxonomies]
-categories = ["Features"]
-tags = ["Markdown"]
-[extra]
-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
-
-The following HTML `<h1>`—`<h6>` elements represent six levels of section
-headings. `<h1>` is the highest section level while `<h6>` is the lowest.
-
-# H1
-## H2
-### H3
-#### H4
-##### H5
-###### H6
-
-# 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
-dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as
-cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin
-porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur?
-Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit
-ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda
-veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore
-eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata
-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
-
-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 no attribution
-
-> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
-> **Note** that you can use *Markdown syntax* within a blockquote.
-
-## Blockquote with attribution
-
-> Don't communicate by sharing memory, share memory by communicating.<br>
-> — <cite>Rob Pike[^1]</cite>
-
-> 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
-out-of-the-box.
-
-   Name | Age
---------|------
-  Alice | 23
-    Bob | 27
-   Cody | 33
-   John | 59
-  Kerry | 23
-
-## 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>
-    <summary>Title 1</summary>
-    <p>IT'S A SECRET TO EVERYBODY.</p>
-</details>
-
-<details>
-    <summary>Title 2</summary>
-    <p>Stay awhile, and listen!</p>
-</details>
-
-# 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
-
-```html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-```
-
-## Inline Code block
-
-If we want, we can also `specify inline code` which is useful for `the small stuff`.
-
-# List Types
-
-## Ordered List
-
-1. First item
-2. Second item
-3. Third item
-
-## Unordered List
-
-- List item
-- Another item
-- And another item
-
-## Nested list
-
-- Fruit
-  - Apple
-  - Orange
-  - Banana
-- Dairy
-  - Milk
-  - Cheese
-
-# Other Elements — abbr, sub, sup, kbd, mark, link
-
-<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
-
-H<sub>2</sub>O
-
-X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
-
-Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the
-session.
-
-Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and
-other small creatures.
-
----
-<!-- Note: There must be a blank line between every two lines of the footnote difinition.  -->
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c)
-during Gopherfest, November 18, 2015.
-
-[^2]: The quote is the first sentence of Aristotle's [Metaphysics](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)).
-- 
cgit v1.3.1