Update the Add-Ons page

docs/addons/ar-video-player.md

@@ -1,6 +1,6 @@
 # Video Player
 
-An A-Frame component and primitive for playing videos in AR. `<ar-video-player>` is tailored for encantar.js. Unlike A-Frame's standard `<a-video>`, `<ar-video-player>` handles corner cases for AR and includes easy-to-use controls, so you can focus on creating and designing your projects rather than dealing with the various technicalities of video playback in the browser.
+An A-Frame component and primitive for playing videos in AR. `<ar-video-player>` is tailored for encantar.js. Unlike A-Frame's standard `<a-video>`, `<ar-video-player>` handles corner cases for AR and includes easy-to-use controls, so you can focus on creating your projects rather than dealing with the various technicalities and quirks of video playback in the browser.
 
 !!! tip "It's easy to use!"
 
@@ -85,7 +85,7 @@ Add the `ar-video-control` component to a descendant of `<ar-video-player>` as i
 
 ## Multiple videos
 
-You may want to play different videos depending on the target that is being tracked. This can be accomplished by setting an `<ar-video-player-source>` for each reference image as in the example below:
+You may play different videos depending on the target that is being tracked. This can be accomplished by setting an `<ar-video-player-source>` for each reference image as in the example below:
 
 ```html
 <ar-root>
@@ -206,7 +206,7 @@ Due to browser policies, there are restrictions to be aware of when using autopl
 
 * Usage of the [autoplay](#properties) setting on `<ar-video-player>` should be accompanied by a `muted` attribute on the `<video>` tag. If the page receives no user interaction, then you may only play your video automatically if it's muted.
 * Usage of the `autoplay` attribute on the `<video>` tag is discouraged. Video playback may be blocked. In addition, the Video Player will not show up in AR at the exact moment the page is loaded.
-* Ponder whether or not playing an initially muted video makes sense for your project. It may be better to wait for user input in order to initiate the playback, e.g., have the user click on a play button. If you decide to use autoplay, have a unmute button nearby.
+* Ponder whether or not playing an initially muted video makes sense for your project. It may be better to wait for user input in order to initiate the playback, e.g., have the user click on a play button. If you decide to use autoplay, have a [unmute button](#video-controls) nearby.
 
 *Example*
 

docs/addons/index.md

@@ -3,11 +3,14 @@
 Add-Ons provide an enriched experience with additional features that enhance the core of encantar.js. They're offered to supporters who purchase the various demos. Become a supporter and get exclusive access to these features!
 
 <style>
-.addon-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 4em 0; }
+.addon-container { margin: 4em 0; }
 .addon-container h2 { margin-top: 0; }
 .addon-container img { width: 100%; height: auto; }
-.addon-container:nth-child(2n+1) > div:nth-child(2) { min-width: 426px; margin-left: 32px; }
-.addon-container:nth-child(2n) > div:nth-child(2) { min-width: 426px; margin-right: 32px; order: -1; }
+@media screen and (min-width: 768px) {
+  .addon-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
+  .addon-container:nth-child(2n+1) > div:nth-child(2) { min-width: 426px; margin-left: 32px; }
+  .addon-container:nth-child(2n) > div:nth-child(2) { min-width: 426px; margin-right: 32px; order: -1; }
+}
 </style>
 
 <link rel="stylesheet" href="../style/lite-yt-embed.css">
@@ -20,7 +23,7 @@ Add-Ons provide an enriched experience with additional features that enhance the
 
 Enchant your audience using this [easy-to-use &amp; customizable](./ar-video-player.md) Video Player! Videos in AR are suitable for: product marketing, AR business cards, educational materials, interactive art, and more!
 
-[I want this!](https://ko-fi.com/s/697a184728){ .md-button ._blank }
+<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-video-player" data-goatcounter-click>I want this!</a>
 
   </div>
   <div>
@@ -35,7 +38,7 @@ Enchant your audience using this [easy-to-use &amp; customizable](./ar-video-pla
 
 Add interactivity to your scenes with easy-to-use buttons for AR! You can [customize their images and colors](./ar-button.md). They're bundled with the Video Player.
 
-[I want this!](https://ko-fi.com/s/697a184728){ .md-button ._blank }
+<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-buttons" data-goatcounter-click>I want this!</a>
 
   </div>
   <div markdown>
@@ -52,7 +55,7 @@ Add interactivity to your scenes with easy-to-use buttons for AR! You can [custo
 
 Turn 3D and 2D objects into "clickables" that respond to touch or mouse input. AR Clickables are based on the [Pointer Tracker](../api/pointer-tracker.md). They are the building blocks of AR Buttons and are included with them.
 
-[I want this!](https://ko-fi.com/s/697a184728){ .md-button ._blank }
+<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-clickables" data-goatcounter-click>I want this!</a>
 
   </div>
   <div markdown>
@@ -69,7 +72,7 @@ Turn 3D and 2D objects into "clickables" that respond to touch or mouse input. A
 
 Framework-agnostic solution for preloading assets such as: 3D models, video clips, audio files and more. This Add-On is bundled with the core.
 
-[I want this!](https://ko-fi.com/s/3ee4182cb6){ .md-button ._blank }
+<a href="https://ko-fi.com/s/3ee4182cb6" target="_blank" rel="external" class="md-button" id="addon-want-asset-manager" data-goatcounter-click>I want this!</a>
 
   </div>
   <div markdown>

mkdocs.yml

@@ -60,7 +60,7 @@ nav:
   - 'Download': 'download.md'
   - 'Demos': 'demos.md'
   - 'Add-Ons':
-    - 'Introduction': 'addons/index.md'
+    - 'Add-Ons': 'addons/index.md'
     - 'AR Button API': 'addons/ar-button.md'
     - 'AR Clickable API': 'addons/ar-clickable.md'
     - 'Video Player API': 'addons/ar-video-player.md'