updated all the llol pages

docs/lightshow_lol.md

@@ -9,7 +9,7 @@ has_children: true
 <style>
   .panel-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 16px;
     margin: 16px 0;
   }
@@ -34,6 +34,7 @@ has_children: true
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
@@ -76,9 +77,18 @@ The lightshow preview is the main focus of the page, with various control panels
   <span>Although the preview is an exact simulation of a real device, due to the difference in the way color is produced by LEDs and displays <b>the preview will never look exactly the same as real LEDs</b>.</span>
 </span>
 
-----
-<h2>Panel Breakdown</h2>
-<p>Select one of the Panels below to learn more about it</p>
+### What is a Vortex Editor
+
+In the **Vortex Engine** ecosystem a [mode](modes.html) consists of a [pattern](patterns.html) and a [colorset](colorsets.html) for each LED on a device.
+
+For example, the **Spark Orbit** has **6 LEDs** which means **6 Patterns** and **6 Colorsets** -- one for each LED.
+
+A **Vortex Editor** is any kind of software designed to edit the **Patterns** or **Colorsets** in the **Modes** of a **Vortex Device**.
+
+### Panel Breakdown
+In order to get familiar with how lightshow.lol works it is important to first familiarize yourself with each UI Panel.
+
+Select one of the Panels below to learn more about it:
 
 <div class="panel-grid">
   <a href="lightshow_lol_animation.html" class="panel-link">
@@ -109,4 +119,19 @@ The lightshow preview is the main focus of the page, with various control panels
     <span class="panel-title">🔗 Color Picker →</span>
     <img src="assets/images/lightshow-lol-color-picker.png" class="panel-img">
   </a>
+  <a href="lightshow_lol_update_panel.html" class="panel-link">
+    <span class="panel-title">🔗 Update Panel →</span>
+    <img src="assets/images/lightshow-lol-device-update.png" class="panel-img">
+  </a>
+  <a href="lightshow_lol_chromalink_duo.html" class="panel-link">
+    <span class="panel-title">🔗 Chromalink Panel →</span>
+    <img src="assets/images/lightshow-lol-chromalink-duo.png" class="panel-img">
+  </a>
 </div>
+
+### Example Workflows
+
+Once you're satisfied with your understanding of the UI Panels then read the example workflows at the bottom of this page.
+
+To use Lightshow.lol with
+

docs/lightshow_lol_animation.md

@@ -9,7 +9,6 @@ parent: Lightshow.lol
   .panel-grid-title {
     margin: 0 auto;
     text-align: center;
-
   }
 
   .panel-grid {
@@ -40,44 +39,64 @@ parent: Lightshow.lol
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
     max-width: 100%;
+    border-radius: 4px;
+  }
+
+  .preview-img-container {
+    float: right;
+    margin: 20px;
+    max-width: 40%;
+    border: 2px solid #444;
+    border-radius: 8px;
+  }
+
+  .preview-img-container img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 6px;
+  }
+
+  ul {
+    margin-left: 20px;
+    margin-top: 10px;
   }
 </style>
 
 # Preview Animation
 
-<div style="float: right; margin: 20px; max-width: 40%">
-  <img src="assets/images/lightshow-lol-animation.png">
+<div class="preview-img-container">
+  <img src="assets/images/lightshow-lol-animation.png" alt="Lightshow.lol Animation">
 </div>
 
-The **Preview** is the spinning circle of colors immediately visible when entering the page, the **Animation Panel** specifically controls the appearance of this **Preview**.
+The **Preview** is the spinning circle of colors immediately visible when entering the page, and the **Animation Panel** specifically controls the appearance of this **Preview**.
 
-The **Preview** will react to changes made in various UI panels (like Pattern or Colorset) but the **Animation Panel** is slightly different. The **Animation Panel** only affects the **Preview** on screen, not how the device looks.
+While the **Preview** will react to changes made in various UI panels (like Pattern or Colorset), the **Animation Panel** only affects the on-screen preview, not how the actual device looks.
 
 The five animation shape options are self-explanatory, but the six slider options in this panel are:
 
-- **Speed**: This represents how fast the animation will progress.
-- **Trail**: This corresponds to how long the colors will remain visible (i.e., the length of the trail).
-- **Size**: This is the size of each blink of color on the screen.
-- **Blur**: This controls the appearance of the blink on the screen, increasing softness and diffusion.
-- **Radius**: This controls the size of the animation pattern on the screen.
-- **Spread**: With many LEDs, this controls the distance between LEDs in the preview.
-
-
+- **Speed**: How fast the animation progresses.
+- **Trail**: How long the colors remain visible (the length of the trail).
+- **Size**: The size of each blink of color.
+- **Blur**: Softness/diffusion of the blink on screen.
+- **Radius**: The size of the animation pattern on screen.
+- **Spread**: With many LEDs, the distance between LEDs in the preview.
 
 <div class="panel-grid-title">
-  <p>  </p>
+  <p> </p>
 </div>
 <div class="panel-grid">
-  <a href="lightshow_lol_color_picker.html" class="panel-link">
-    <span class="panel-title">← Color Picker 🔗</span>
-    <img src="assets/images/lightshow-lol-color-picker.png" class="panel-img">
+  <a href="lightshow_lol_chromalink_duo.html" class="panel-link">
+    <span class="panel-title">← Chromalink Panel 🔗</span>
+    <img src="assets/images/lightshow-lol-chromalink-duo.png" class="panel-img">
   </a>
   <a href="lightshow_lol_device_controls.html" class="panel-link">
     <span class="panel-title">🔗 Device Control →</span>
-    <img src="assets/images/lightshow-lol-device.png" class="panel-img">
+    <img src="assets/images/lightshow-lol-device.png" class="panel-img" alt="Device Control">
   </a>
-</div>
+</div>

docs/lightshow_lol_color_picker.md

@@ -10,7 +10,6 @@ parent: Lightshow.lol
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin: 0 auto;
-    margin-top: 50px;
     max-width: 80%;
   }
 
@@ -34,6 +33,7 @@ parent: Lightshow.lol
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
@@ -55,13 +55,15 @@ The color picker is opened by selecting a color in the colorset, and it can be c
 
 When a device is connected it will display a live preview of the color being chosen as the user navigates the color picker.
 
+## Other Panels
+
 <div class="panel-grid">
   <a href="lightshow_lol_colorset.html" class="panel-link">
     <span class="panel-title">← Colorset Panel 🔗</span>
     <img src="assets/images/lightshow-lol-colorset.png" class="panel-img">
   </a>
-  <a href="lightshow_lol_animation.html" class="panel-link">
-    <span class="panel-title">🔗 Animation Panel →</span>
-    <img src="assets/images/lightshow-lol-animation.png" class="panel-img">
+  <a href="lightshow_lol_update_panel.html" class="panel-link">
+    <span class="panel-title">🔗 Update Panel →</span>
+    <img src="assets/images/lightshow-lol-device-update.png" class="panel-img">
   </a>
 </div>

docs/lightshow_lol_colorset.md

@@ -10,7 +10,6 @@ parent: Lightshow.lol
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin: 0 auto;
-    margin-top: 50px;
     max-width: 80%;
   }
 
@@ -34,6 +33,7 @@ parent: Lightshow.lol
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
@@ -53,6 +53,8 @@ The **Colorset Panel** represents the list of colors for the selected leds of th
 
 There is a maximum of 8 colors in a colorset, black is considered 'off' which can be used to extend gaps in the pattern.
 
+## Other Panels
+
 <div class="panel-grid">
   <a href="lightshow_lol_pattern.html" class="panel-link">
     <span class="panel-title">← Pattern Panel 🔗</span>

docs/lightshow_lol_device_controls.md

@@ -10,7 +10,6 @@ parent: Lightshow.lol
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin: 0 auto;
-    margin-top: 50px;
     max-width: 80%;
   }
 
@@ -34,6 +33,7 @@ parent: Lightshow.lol
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
@@ -52,6 +52,8 @@ The **Device Controls Panel** is very simple, offering only two purposes: **sele
 
 In both cases, whether **Selecting** or **Connecting** a device, the **LED Selection Panel** will appear, this will be covered below.
 
+## Other Panels
+
 <div class="panel-grid">
   <a href="lightshow_lol_animation.html" class="panel-link">
     <span class="panel-title">← Animation Panel 🔗</span>

docs/lightshow_lol_led_selection.md

@@ -10,7 +10,6 @@ parent: Lightshow.lol
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin: 0 auto;
-    margin-top: 50px;
     max-width: 80%;
   }
 
@@ -34,6 +33,7 @@ parent: Lightshow.lol
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
@@ -56,6 +56,8 @@ The LED Selection panel only appears after a device has been selected or connect
 
 Led selections can be added or removed by holding shift or ctrl respectively, and the image supports drawing boxes with the cursor to affect multiple leds at a time.
 
+## Other Panels
+
 <div class="panel-grid">
   <a href="lightshow_lol_modes.html" class="panel-link">
     <span class="panel-title">← Modes Panel 🔗</span>

docs/lightshow_lol_modes.md

@@ -10,7 +10,6 @@ parent: Lightshow.lol
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin: 0 auto;
-    margin-top: 50px;
     max-width: 80%;
   }
 
@@ -34,6 +33,7 @@ parent: Lightshow.lol
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
@@ -53,6 +53,7 @@ The **Modes Panel** organizes and manages your lightshow's overall structure. A
 - **Import/Export:** Import existing modes from your device or export them for sharing.
 - **Sharing:** Quickly share your mode with the Vortex Community.
 
+## Other Panels
 
 <div class="panel-grid">
   <a href="lightshow_lol_device_controls.html" class="panel-link">

docs/lightshow_lol_pattern.md

@@ -10,7 +10,6 @@ parent: Lightshow.lol
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
     margin: 0 auto;
-    margin-top: 50px;
     max-width: 80%;
   }
 
@@ -34,6 +33,7 @@ parent: Lightshow.lol
   .panel-title {
     margin-bottom: 8px;
     font-weight: bold;
+    color: #ffcc00;
   }
 
   .panel-img {
@@ -53,6 +53,8 @@ The **Pattern Panel** is where you design and assign animations for your LEDs. P
 
 The various parameters control the appearance of the blinking of the LED, like the timing and length of blinks.
 
+## Other Panels
+
 <div class="panel-grid">
   <a href="lightshow_lol_led_selection.html" class="panel-link">
     <span class="panel-title">← Led Selection 🔗</span>