Update readme and example slides

Author: Tenchi2xh

example.md

@@ -1,13 +1,18 @@
 ---
-marp: true
+# Edit this metadata
 title: New Codestar Marp theme
 author: Hamza Haiken
-theme: codestar
-# class: invert
-paginate: true
 header: "New Codestar Marp theme"
 footer: "Example slides"
+
+# Uncomment for dark mode
+# class: invert
 transition: wipe
+
+# Keep these settings
+marp: true
+theme: codestar
+paginate: true
 math: mathjax
 ---
 
@@ -20,28 +25,24 @@ math: mathjax
 
 ---
 
-## this is what title<br>cards look like
+<center>
 
-Optional sub-title
+Scan to follow along or keep the link for later:
 
-<!-- Presenter notes are derived from HTML comments -->
-
----
+<!-- Update this link with the name of your slides instead of 'example' -->
+![w:256px](https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=code-star.github.io/codestar-marp/example/&margin=16)
 
-<!-- _footer: That guy is doing some serious business -->
+*Link to the slides*
 
-![bg opacity:.1](https://picsum.photos/1080?image=5)
+</center>
 
-A slide with a background image
-<br>
+---
 
-<center>
+## this is what title<br>cards look like
 
-<!-- Update this link with the name of your slides instead of 'example' -->
-![w:256px](https://api.qrserver.com/v1/create-qr-code/?size=256x256&data=code-star.github.io/codestar-marp/example/&margin=16)
-*Link to the slides*
+Optional sub-title
 
-</center>
+<!-- Presenter notes are derived from HTML comments -->
 
 ---
 
@@ -126,6 +127,10 @@ And numbered:
 
 ---
 
+<!-- _footer: That guy is doing some serious business -->
+
+![bg opacity:.1](https://picsum.photos/1080?image=5)
+
 **bold!** _italic!_ emoji codes: :satellite: :otter:
 
 link: https://github.com/code-star

listing/listing.css

@@ -135,6 +135,7 @@ button, input, ul, li {
     margin-bottom: -0.15em;
     overflow: hidden;
     text-overflow: ellipsis;
+    justify-content: start;
 }
 
 .author {

readme.md

@@ -1,9 +1,14 @@
 # Codestar theme for Marp
 
+Contents:
+
 - [Theme features](#features)
 - [Usage](#usage)
+- [Editing guidelines](#editing-guidelines)
 - [Development](#development)
 
+---
+
 ## Features
 
 - The new Codestar styles and fonts
@@ -18,23 +23,55 @@ Quick links:
 
 ## Usage
 
-- Install [Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
+- Requirements:
+    - If you want to write your Markdown in VS Code with a live preview: [Marp for VS Code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
+    - Or, if you want to run a live preview server: `npm install -g @marp-team/marp-cli`
+
 - Run:
 
     ```bash
     mkdir decks/presentation-name
     cp example.md decks/presentation-name/slides.md
     ```
-- Extra resource files (for example images) can go in that new folder as well
-- Edit the new file in VS Code, and in the top right corner of the editor, click the preview button (or <kbd>⌘ + K, V</kbd>)
-    - Alternatively, you can run `marp -s --theme theme/codestar.css .` for a live server with a directory listing that you can navigate in a browser (you'll need [`marp-cli`](#development))
-- Make a pull request and merge, GitHub actions will build the slides and serve them on GitHub pages (TODO: link)
 
-### Quick links to some reference pages:
+    Extra resource files (for example images) can go in that new folder as well.
+
+- Edit and preview your slides:
+
+    - VS Code: open this repository's folder, edit the new `slides.md` file, and in the top right corner of the editor, click the preview button (or <kbd>⌘ + K, V</kbd>).
+
+    - `marp-cli`: from this repo's root, run `marp -s --theme theme/codestar.css .` to start a live server with a directory listing that you can navigate in a browser.
+
+- Make a pull request and merge. GitHub actions will build the slides and serve them on our [decks listing hosted on GH pages](https://code-star.github.io/codestar-marp/).
+
+## Editing guidelines
+
+- Fill all the metadata in the front matter
+- Keep the `div` structure of the title card intact
+- Make sure to update the QR code's link by replacing `example/` with the name of your presentation's directory.
+- If you prefer a dark theme, uncomment `class: invert` in the front matter.
+- Keep section title cards short, with at most a subtitle.
+- Presenter notes can be added using regular HTML comments, and will be visible on each slide when using the presenter mode. To start presenter mode, move the mouse over the presentation and click the right button on the toolbar.
+- Metadata directives can be changed for a particular slide. For example, if you want a different footer on one slide, include this:
+
+    ```html
+    <!-- _footer: This slide has a different footer! -->
+    ```
+
+    If you want a slide without a footer or header, add:
+
+    ```html
+    <!-- _header: '' -->
+    <!-- _footer: '' -->
+    ```
+- For reference on other formatting options, slide layouts, slide backgrounds, etc., check out all the slides from `examples.md` (you can also watch that presentation [here](https://code-star.github.io/codestar-marp/example/)).
+
+Quick reference links:
 
+- [Image syntax](https://marpit.marp.app/image-syntax)
 - [Transitions](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions)
-- [Emoji codes](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs)
-TODO: More links
+- [Directives](https://marpit.marp.app/directives)
+- [Supported emoji codes](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs)
 
 ## Development