I'm really sick of not making any progress

md/help articles/How to use ttcMD.md

@@ -1 +1,87 @@
-# Henlo, am help
+# Table of Contents
+- [Table of Contents](#table-of-contents)
+- [How do you use ttcMD?](#how-do-you-use-ttcmd)
+  - [Enhanced Standard Elements](#enhanced-standard-elements)
+    - [Links](#links)
+  - [Custom Elements](#custom-elements)
+    - [Pop-outs](#pop-outs)
+  - [Block-level Elements](#block-level-elements)
+    - [Accordions](#accordions)
+
+# How do you use ttcMD?
+
+ttcMD is a flavor of markdown that has been specifically designed to use with [ttcQuery](/help/ttcQuery.md). It has all of the basic syntax of [markdown](https://www.markdownguide.org/cheat-sheet/), but also includes Tables, basic Fenced Code Blocks and a slew of custom elements and styling annotations.
+
+## Enhanced Standard Elements
+
+This section will cover all of the enhancements that are added for basic markdown elements
+
+### Links
+
+You can use the typical link syntax: `[link name](/link/location)`, but there are a few presets that allow you to style them to look a bit nicer.
+
+**Primary Button:**
+Prefix the link name with ````button` to create a button.
+`[```button link name](#links)` produces:
+
+[```button link name](#links)
+
+**Call to Action:**
+Prefix the link name with ````cta` to create a modestly styled button/call to action.
+`[```cta link name](#links)` produces:
+
+[```cta link name](#links)
+
+## Custom Elements
+
+This section will cover the specific elements custom built for Tabletop Commander.
+
+### Pop-outs
+
+Pop-outs, or popovers, are the little cards that "pop out" when you hover over an item.
+
+The syntax is thus: `^[pop-out title]<<pop-out content>>`. The pop-out title will be rendered inline, just like a link, and the content will be included in the pop-out itself. Content can also include inline markdown elements as well, so you can format the content within as well.
+
+Example:
+
+This syntax `^[goofy!]<<This is my *favorite* picture: ![goofy](https://yt3.ggpht.com/a/AATXAJwbIW0TwEhqdT2ZPeSB1AtdtWD2ZXam80oijg=s900-c-k-c0xffffffff-no-rj-mo)>>` will produce this element: ^[goofy!]<<This is my *favorite* picture: ![goofy](https://yt3.ggpht.com/a/AATXAJwbIW0TwEhqdT2ZPeSB1AtdtWD2ZXam80oijg=s900-c-k-c0xffffffff-no-rj-mo)>>
+
+Note: currently, only inline elements are available, so formatting is limited
+
+## Block-level Elements
+
+Block-level elements have a slightly different syntax than the single-line and inline elements we've seen so far. In order to use block-level elements, they *must* be formatted correctly, including the empty lines. As a general rule, you cannot nest block-level elements within themselves, but you can nest different block-level elements within it.
+
+### Accordions
+
+Accordions are when you can click an item to expand it to show additional information.
+
+Syntax: 
+
+[][][]
+
+```
+[accordion title]
+
+whatever markdown you desire, including non-accordion block elements
+
+[/accordion]
+```
+
+[accordion this is what an accordion looks like]
+
+This is the body of the accordion.
+
+As you can see, I can do normal markdown in here.
+
+I can include a [link](#accordions), or *italic* and **bold** text.
+
+[[
+
+I can even include a card, like this one
+
+]]
+
+[/accordion]
+
+/[]