Clear up the blabber documentation

_sass/parts/figures.scss

@@ -0,0 +1,8 @@
+.mediafigure {
+  margin: 2em;
+  text-align: center;
+
+  figcaption {
+    font-style: italic;
+  }
+}

css/style.scss

@@ -154,6 +154,7 @@ body:not(.dark-mode) .form-control {
 @import "./parts/code.scss";
 @import "./parts/details.scss";
 @import "./parts/section.scss";
+@import "./parts/figures.scss";
 @import "./parts/headings.scss";
 @import "./parts/hero.scss";
 @import "./parts/blog.scss";

wiki/blabber/dialogue_generator/main-view.html

@@ -70,7 +70,7 @@ <h3>State Properties</h3>
                 <span class="dialogue-state-flex" id="dialogue-state-action">
                     <select autocomplete="off" id="dialogue-state-action-type">
                         <option selected value="">No Action</option>
-                        <option value="blabber:command" data-pattern=".+" data-placeholder="say hi, /effect give @s strength, ...">Command</option>
+                        <option value="blabber:command" data-pattern=".+" data-placeholder="“say hi”, or “/effect give @s strength”, etc.">Command</option>
                         <option value="requiem:remnant_choice" data-pattern="[a-z0-9_-]+:[a-z0-9_/-]+" data-error-message="Must be a valid namespaced identifier (modid:name)" data-placeholder="requiem:remnant, ratsmischief:ratified, ...">[Requiem] Remnant Choice</option>
                     </select>
                     <input type="text" id="dialogue-state-action-value"/>

wiki/blabber/index.md

@@ -48,9 +48,9 @@ Each file describes the various states a dialogue can be in.
 
 Here's a super basic example:
 
-<figure style="text-align: center; margin: 2em;">
+<figure class="mediafigure">
 {% include_relative basic-dialogue.svg %}
-<figcaption style="font-style: italic">State diagram for a dialogue with 2 intermediate states and 2 end states</figcaption>
+<figcaption>State diagram for a dialogue with 2 intermediate states and 2 end states</figcaption>
 </figure>
 
 This dialogue has 5 states: `start`, `accept`, `end_success`, `refuse`, and `end_failure`.
@@ -238,7 +238,9 @@ For example:
 
 If you are allergic to code, try this online tool: [blabber dialogue editor](dialogue_generator)
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/Hm_bQlgqSCQ?si=A5SH8mRNEkGSi14i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<div class="mediafigure">
+<iframe width="672" height="378" src="https://www.youtube.com/embed/Hm_bQlgqSCQ?si=A5SH8mRNEkGSi14i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
 
 ### Validation
 
@@ -266,7 +268,15 @@ to incorporate dialogues into your modpack's or server's quests.
 
 The [Text Animator](https://modrinth.com/mod/text-animator) mod can be used to add special effects to your dialogues' texts :
 
-![Text animator with Blabber demo](https://cdn.modrinth.com/data/HBIG5nRf/images/e15e996bb6b5311bc0c0ae9e71d42a9d07ba9911.webp)
+<figure class="mediafigure">
+<video controls width="650">
+<source src="textanimator-blabber-demo.mp4" type="video/webm" />
+Download the
+<a href="textanimator-blabber-demo.mp4">MP4</a>
+video.
+</video>
+<figcaption>Text animator with Blabber and Heracles demo (warning: movement and color flashes)</figcaption>
+</figure>
 
 
 ## Using Blabber (for developers)