Vortex Devices section

StoneOrbits · Jan 16, 2025 · 60b9681 · 60b9681
1 parent d47b024
commit 60b9681
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 123 deletions.
diff --git a/docs/getting_started.md b/docs/getting_started.md
@@ -32,10 +32,12 @@ You can expect to find <span style="color: #00c6ff">navigation buttons</span> an
   <img width="220" height="220" class="device-icon" src="assets/images/spark-handle-render-square-512.png" alt="Spark Handle">
   <img width="220" height="220" class="device-icon" src="assets/images/chromadeck-render-square-512.png" alt="Chromadeck">
 
-## Duo
-The Duo's navigation button also doubles as it's power switch.
+## <div style="text-align: center;">Duo</div>
 
-  <img class="engine-icon" style="margin-right: 15px; width: 9%; height: auto;" src="assets/images/duo-logo-button-square-512.png" alt="Duo">
+<div style="text-align: center;">
+  <p>The Duo's navigation button also doubles as its power switch.</p>
+  <img class="engine-icon" style="margin: 0 auto; width: 9%; height: auto;" src="assets/images/duo-logo-button-square-512.png" alt="Duo">
+</div>
 
 ## Next Steps
 

diff --git a/docs/lightshow_lol_examples.md b/docs/lightshow_lol_examples.md
@@ -6,126 +6,7 @@ parent: Lightshow.lol
 has_children: true
 ---
 
-<style>
-  .panel-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 16px;
-    margin: 16px 0;
-  }
-
-  .panel-link {
-    background-color: #2e2e2e;
-    border-radius: 8px;
-    text-decoration: none;
-    color: #ffffff;
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    transition: transform 0.2s;
-    border: 1px solid #080808;
-  }
-
-  .panel-link:hover {
-    transform: scale(1.02);
-  }
-
-  .panel-title {
-    margin-bottom: 8px;
-    font-weight: bold;
-    color: #ffcc00;
-  }
-
-  .panel-img {
-    max-width: 100%;
-  }
-
-  .important-inline {
-    display: inline-block;
-    background-color: #fe00001f;
-    color: #ffffff;
-    border: 1px solid #ff5050;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
-    padding: 12px;
-    margin: 5px;
-  }
-  .important-inline-header {
-    display: block;
-    font-size: 1em;
-  }
-</style>
-
-
-<!-- <div style="text-align: center; margin: 20px">
-  <h1 style="color:orange;">⚠ <b style="color:yellow;">This page is under construction</b> ⚠<br></h1>
-</div> -->
-
-# Lightshow.lol
-
-This page details how to use the web-based Vortex Editor [lightshow.lol](https://lightshow.lol). 
-
-## Basics
-
-Lightshow.lol is an online tool that allows you to design, preview, and export custom [modes](modes.html) for any Vortex devices. 
-
-The lightshow preview is the main focus of the page, with various control panels serving to modify the pattern, colorset, and preview animation.
-
-{: .warning }
-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 **the preview will never look exactly the same as real LEDs**
-
-### 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">
-    <span class="panel-title">🔗 Animation Panel →</span>
-    <img src="assets/images/lightshow-lol-animation.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">
-  </a>
-  <a href="lightshow_lol_modes.html" class="panel-link">
-    <span class="panel-title">🔗 Modes Panel →</span>
-    <img src="assets/images/lightshow-lol-modes.png" class="panel-img">
-  </a>
-  <a href="lightshow_lol_led_selection.html" class="panel-link">
-    <span class="panel-title">🔗 Led Selection →</span>
-    <img src="assets/images/lightshow-lol-led-select.png" class="panel-img">
-  </a>
-  <a href="lightshow_lol_pattern.html" class="panel-link">
-    <span class="panel-title">🔗 Pattern Panel →</span>
-    <img src="assets/images/lightshow-lol-pattern.png" class="panel-img">
-  </a>
-  <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_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>
-  <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-basic.png" class="panel-img">
-  </a>
-</div>
+# Lightshow.lol Examples
 
 ### Example Workflows
 

diff --git a/docs/vortex_devices.md b/docs/vortex_devices.md
@@ -0,0 +1,34 @@
+---
+layout: default
+title: Vortex Devices
+nav_order: 2
+has_children: true
+---
+
+# Vortex Devices
+
+The Votex Engine is a open-source project designed to manage LEDs driven by microcontrollers. These are the products currently built to run the Vortex Engine with more to come in the future as it continues to grow.
+
+## Spark Orbit
+
+A 6-LED, USB-C rechargeable orbit designed for begginers. 
+- [Spark Orbit](Spark_Orbit_guide)
+
+## Spark Handles
+- [Spark Handle](Spark_Handle_guide)
+
+## Chromadeck
+- [Chromadeck](Chromadeck_guide.html)
+
+## Duo
+mutlipurpose LED
+- [Duo](duo_guide)
+
+## Vortex Orbit
+- [Vortex Orbit](orbit_guide)
+
+## Omega Handle
+- [Omega Handle](handles_guide)
+
+## Vortex Glove
+- [Vortex Glove](gloves_guide)