Change 'Complex' theme to 'Puzzle theme' which makes it much easier t…

…o remember at-a-glance:

- Remove card #2 on 'Complex theme' and rename 'Puzzle theme'
- Remove following fields from the renamed 'Complex theme':
  - Remove '✔ What does this syntax do?' field, as well as removing:
    - ----✄-- Hide on front: Syntax (inline code)
    - »»♻»» Show as reference: Syntax (inline code)
    - ----✄-- Hide on front: Sample (code block or image)
    - »»♻»» Show as reference: Sample (code block or image)
- Rename fields including »»♻»» to »»♻«« and reset the card templates
- Easier to understand documentation for the themes (I hope)
- Change a few README urls

README.md

@@ -11,13 +11,13 @@ The template is built in html and css, with [syntax highlighting](./dist/themes/
 
 
 ## Card Types
-There are currently two types of card, a simple card and a complex card. Both share the `dist/themes/assets/css/main.css` file.
+There are currently two types of card, a simple card and a puzzle card. Both share the `dist/themes/assets/css/main.css` file.
 
 1. **[Simple](./dist/themes/README.md)**
   - What's the answer?
   - What does this syntax do?
-2. **[Complex](./dist/themes/README.md#complex-theme)**
-  - Everything in **Simple** theme
+2. **[Puzzle](./dist/themes/README.md#puzzle-theme)**
+  - What's the answer?
   - **+** Puzzle question
 
 

dist/deck/README.md

@@ -3,7 +3,7 @@
 - [Home](../../README.md)
   - **THEME**
     - [Simple Anki theme](../themes/README.md#simple-theme)
-    - [Complex Anki theme](../themes/README.md#complex-theme)
+    - [Puzzle Anki theme](../themes/README.md#puzzle-theme)
       - **Deck example**
       - [Notes](../themes/README.md#notes)
   - **THEME COLOURS**

dist/themes/README.md

@@ -3,7 +3,7 @@
 - [Home](../../README.md)
   - **THEME**
     - [Simple Anki theme](#simple-theme)
-    - [Complex Anki theme](#complex-theme)
+    - [Puzzle Anki theme](#puzzle-theme)
       - [Deck example](../deck/README.md)
       - [Notes](#notes)
   - **THEME COLOURS**
@@ -12,23 +12,17 @@
 
 
 
-## Simple theme
+## Card #01 (shared)
+### Simple theme
+### Puzzle theme
 
-Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same basic fields. This content will be used to output two cards:
+Both the **Simple theme** and **[Puzzle theme](#puzzle-theme)** share the *'What's the answer?'* fields and card:
 
 1. **What's the answer?**
   - What does the following code do?
   - How can we use the syntax examples and what would be the result?
-2. **What does this syntax do?**
-  - Ask another question about the code sample, or
-  - Drill on the specific uses for the function, or
-  - Remember the syntax:
-    - What function or method is this?
-    - And what will it achieve?
-
 
-## Card 01: What's the answer? (Fields 1-6)
-**Key:** ★ Required / ☆ Optional (recommended)
+> **Key:** ★ Required / ☆ Optional (recommended)
 
 #### ★ Title
 
@@ -64,8 +58,19 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
 - For any key functions or symbols, wrap in `<code>`.
 
 
-## Card 02: What does this syntax do? (Fields 7-11)
-**Key:** ✔ Optional / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields)
+## Card #02
+### Simple theme
+
+The simple theme introduces a way to add a *syntax reminder* question:
+
+2. **What does this syntax do?**
+  - Ask another question about the code sample, or
+  - Drill on the specific uses for the function, or
+  - Remember the syntax:
+    - What function or method is this?
+    - And what will it achieve?
+
+> **Key:** ✔ Optional / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields)
 
 #### ✔ What does this syntax do?
 
@@ -78,7 +83,7 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
   - Simply enter any text to hide field, i.e. `true`.
   - Great for questions that force you to remember the syntax, where you don't want any giveaways.
 
-#### »»♻»» Show as reference: Syntax (inline code)
+#### »»♻«« Show as reference: Syntax (inline code)
 
 - Optionally show the [inline code sample](#☆-syntax-inline-code)
   - Simply enter any text to hide field, i.e. `true`.
@@ -90,7 +95,7 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
   - Simply enter any text to hide field, i.e. `true`.
   - Depending on the sample code, you may want to hide this if it makes the answer too obvious.
 
-#### »»♻»» Show as reference: Sample (code block or image)
+#### »»♻«« Show as reference: Sample (code block or image)
 
 - Optionally show the main [sample code block](#☆-sample-code-block-or-image)
   - Simply enter any text to hide field, i.e. `true`.
@@ -100,19 +105,17 @@ Both the **Simple theme** and **[Complex theme](#complex-theme)** share the same
 
 -----
 
-## Complex theme
-
-<img align="right" src="https://media.giphy.com/media/C47AAXrd7EIz6/giphy.gif">
+## Card #02
+### Puzzle theme
 
-The complex theme extends the [Simple theme](#simple-theme) to allow us to get a little creative.
+The puzzle theme extends the *'What's the answer?'* fields (shared with the [Simple theme](#simple-theme)) to allow us to get a little creative.
 
-1. **Puzzle question**
+2. **Puzzle question**
   - Drill yourself in a different way.
   - Try a different result with the syntax you're learning.
   - Add a new function to the mix.
 
-## Card 03: Puzzle question (Fields 12-21)
-**Key:** ♞ Required / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields) / ♘ Optional (Only if ✄ is used)
+> **Key:** ♞ Required / ✄ Optional (explicitly *hide* fields) / ♻ Optional (explicity *show* fields) / ♘ Optional (Only if ✄ is used)
 
 #### ♞ Puzzle
 
@@ -170,7 +173,7 @@ The complex theme extends the [Simple theme](#simple-theme) to allow us to get a
 
 #### ✎ Other notes
 
-Use sparingly, as it's always best to be succinct with Anki. Simple is easier to remember than complex, so think of this as more of a 'reference' for future use.
+Use sparingly, as it's always best to be succinct with Anki. Simple is easier to remember than puzzle, so think of this as more of a 'reference' for future use.
 
 - Links to documentation
 - Supplementary notes

dist/themes/assets/README.md

@@ -1,6 +1,16 @@
 # Anki theme: Styles
 ## Tomorrow light and Monokai
 
+- [Home](../../../README.md)
+  - **THEME**
+    - [Simple Anki theme](../../README.md#simple-theme)
+    - [Puzzle Anki theme](../../README.md#puzzle-theme)
+      - [Deck example](../../../deck/README.md)
+      - [Notes](../../README.md#notes)
+  - **THEME COLOURS**
+    - [Basic highlighting](../css/README.md)
+    - [Automatic highlighting](../css/README.md#automatic-syntax-highlighting-with-highlightjs)
+
 ### Less
 
 I'm using `Less` to generate the `main.css` file from `src/assets/less/main.less` — refer to code and comments there. Quickly change the colour scheme by changing or creating your own variables in `src/assets/less/theme.less` and recompiling the css file.
@@ -61,7 +71,7 @@ You can also specify a language:
 5. Copy and paste into `Key point (code block or image)` or `Puzzle answer (code block or image)` fields
    - Including everything from `<pre>` to `</pre>`
 
-It's wise to keep a backup for easy editing, so I've added a `Markdown` field in both the [Simple](../../simple/README.md) and [Complex](../../complex/README.md) themes — here you can store raw markdown or a link to the original code (Github gist for example).
+It's wise to keep a backup for easy editing, so I've added a `Markdown` field in both the [Simple](../../simple/README.md) and [Puzzle](../../puzzle/README.md) themes — here you can store raw markdown or a link to the original code (Github gist for example).
 
 ### Changing the theme:
 
@@ -76,7 +86,7 @@ It's wise to keep a backup for easy editing, so I've added a `Markdown` field in
 
 - [Anki Themes](../../../README.md)
 - [Simple Anki theme](../../simple/README.md)
-- [Complex Anki theme](../../complex/README.md)
+- [Puzzle Anki theme](../../puzzle/README.md)
 - [Deck example](../../../dist/deck/README.md)
 
 

dist/themes/assets/css/README.md

@@ -4,7 +4,7 @@
 - [Home](../../../../README.md)
   - **THEME**
     - [Simple Anki theme](../../README.md#simple-theme)
-    - [Complex Anki theme](../../README.md#complex-theme)
+    - [Puzzle Anki theme](../../README.md#puzzle-theme)
       - [Deck example](../../../dist/deck/README.md)
       - [Notes](../README.md#notes)
   - **THEME COLOURS**
@@ -53,7 +53,7 @@ Styling our code with HTML5 tags is pretty efficient with the Anki wysiwyg, but
 3. Copy and paste into any `* (code block or image)` field:
    - Including everything from `<pre><code>` to `<code></pre>`.
 
-It's wise to keep a backup for easy editing, so I've added a `✎ Markdown` field in both the **Simple** and **Complex** themes — here you can store raw markdown or a link to the original code (Github gist for example).
+It's wise to keep a backup for easy editing, so I've added a `✎ Markdown` field in both the **Simple** and **Puzzle** themes — here you can store raw markdown or a link to the original code (Github gist for example).
 
 #### Disable highlighting
 

dist/themes/complex/card-01.html → dist/themes/puzzle/card-01.html

@@ -1,5 +1,5 @@
 <!-- ==========================================
-     Complex Theme
+     Puzzle Theme
 
    - Card: What's the answer?
    - Info: Question about the code example

dist/themes/complex/card-03.html → dist/themes/puzzle/card-02.html

@@ -1,5 +1,5 @@
 <!-- ==========================================
-     Complex Theme
+     Puzzle Theme
 
    - Card: What does this syntax do?
    - Info: Time to get creative!
@@ -47,19 +47,19 @@ <h1 class="puzzle">
   <div class="box-code">{{♞ Puzzle answer (code block or image)}}</div>
   <div class="box-notes">{{♞ Puzzle answer notes}}</div>
   <div class="reference">
-    {{#»»♻»» Show as reference: Syntax (inline code)}}
+    {{#»»♻«« Show as reference: Syntax (inline code)}}
       <div class="reference-syntax pt-">
         <h4 class="mb-">Original syntax:
           <code>{{☆ Syntax (inline code)}}</code>
         </h4>
       </div>
-    {{/»»♻»» Show as reference: Syntax (inline code)}}
-    {{#»»♻»» Show as reference: Sample (code block or image)}}
+    {{/»»♻«« Show as reference: Syntax (inline code)}}
+    {{#»»♻«« Show as reference: Sample (code block or image)}}
       <div class="reference-sample-code mb pt-">
         <h4 class="mb-">Original sample code:</h4>
         {{☆ Sample (code block or image)}}
       </div>
-    {{/»»♻»» Show as reference: Sample (code block or image)}}
+    {{/»»♻«« Show as reference: Sample (code block or image)}}
   </div>
   <div class="footer mt pb">
     {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}

dist/themes/simple/card-02.html

@@ -40,19 +40,19 @@ <h1 class="syntax">
   <div class="box-code">{{★ Key point (code block or image)}}</div>
   <div class="box-notes">{{★ Key point notes}}</div>
   <div class="reference">
-    {{#»»♻»» Show as reference: Syntax (inline code)}}
+    {{#»»♻«« Show as reference: Syntax (inline code)}}
       <div class="reference-syntax pt-">
         <h4 class="mb-">Original syntax:
           <code>{{☆ Syntax (inline code)}}</code>
         </h4>
       </div>
-    {{/»»♻»» Show as reference: Syntax (inline code)}}
-    {{#»»♻»» Show as reference: Sample (code block or image)}}
+    {{/»»♻«« Show as reference: Syntax (inline code)}}
+    {{#»»♻«« Show as reference: Sample (code block or image)}}
       <div class="reference-sample-code mb pt-">
         <h4 class="mb-">Original sample code:</h4>
         {{☆ Sample (code block or image)}}
       </div>
-    {{/»»♻»» Show as reference: Sample (code block or image)}}
+    {{/»»♻«« Show as reference: Sample (code block or image)}}
   </div>
   <div class="footer mt pb">
     {{#✎ Other notes}}{{✎ Other notes}}{{/✎ Other notes}}