updates

StoneOrbits · Aug 14, 2024 · 3eb579c · 3eb579c
1 parent e73f883
commit 3eb579c
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 30 deletions.
diff --git a/docs/guides.md b/docs/guides.md
@@ -19,14 +19,14 @@ Below is an animated guide provided by StoneOrbits:
 <iframe src="https://docs.google.com/presentation/d/e/1PACX-1vRLsq6i3h9JlYHX0wS3SG9eDZ1vzIsRIU8GAZ9C2QW80uRoexr6_MAmvv_RAu7yuKxZiHy0dH9s2c3q/embed?start=false&loop=false&delayms=3000" frameborder="0" width="100%" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
 {% endraw %}
 
-## Quick Use Guides
+## Device Guides
 
-Here are the quick use guides for each Vortex Device:
+Here are the quick device guides for each Vortex Device:
 
- - [Orbit Quick Use Guide](orbit_quick_use.html)
- - [Handles Quick Use Guide](handle_quick_use.html)
- - [Wired Gloves Quick Use Guide](gloves_quick_use.html)
- - [Duo Quick Use Guide](duo_quick_use.html)
+ - [Orbit Guide](orbit_quick_use.html)
+ - [Handles Guide](handle_quick_use.html)
+ - [Wired Gloves Guide](gloves_quick_use.html)
+ - [Duo Guide](duo_quick_use.html)
 
 ## Upgrade Guide
 

diff --git a/docs/orbit_quick_use.md b/docs/orbit_quick_use.md
@@ -1,11 +1,17 @@
 ---
 layout: default
-title: Orbit Quick Guide
+title: Orbit Guide
 nav_order: 1
 parent: Guides & Tutorials
 ---
 
 <style>
+.device-icon {
+   margin: 0px;
+   width: 30%;
+   height: 30%
+}
+
 .white { background-color: rgba(255, 255, 255); }
 .cyan { background-color: rgba(0, 255, 255); }
 .purple { background-color: rgba(128, 0, 128); }
@@ -15,58 +21,122 @@ parent: Guides & Tutorials
 .red { background-color: rgba(255, 0, 0); }
 
 .rounded-box { 
-   display:inline-block;
-   width:28px;
-   height:12px;
-   margin-right:8px;
-   margin-left:8px;
-   margin-top: 4px;
+   display: inline-block;
+   width: 16px;
+   height: 16px;
+   margin-right: 8px;
+   margin-left: 5px;
    border-radius: 2px;
-   border: 2px solid #dfdfdf;
-   align-items: center;
+   border: 2px solid #555;
+   vertical-align: middle;
 }
 
 .color-list-entry {
+   display: flex;
    align-items: center;
+   font-size: 16px;
+   font-weight: bold;
+   margin-bottom: 10px; /* Remove bottom margin for seamless transition */
+   padding: 8px;
+   border: 1px solid #333;
+   border-bottom: none; /* Remove bottom border */
+   border-radius: 4px; /* Round top corners only */
+   background-color: #222; /* Darker background */
+   color: #eee; /* Light text for contrast */
+   transition: background-color 0.3s; /* Smooth background color transition */
+}
+
+.color-list-entry:hover {
+   background-color: #2a2a2a; /* Slightly lighter on hover */
+}
+
+.color-list-entry + div {
+   margin-top: 0; /* Remove top margin for seamless transition */
+   margin-bottom: 16px;
+   padding-left: 30px;
    font-size: 18px;
+   line-height: 1.5;
+   padding: 10px;
+   border: 1px solid #333;
+   border-top: none; /* Remove top border */
+   border-radius: 0 0 4px 4px; /* Round bottom corners only */
+   background-color: #333; /* Dark background for text */
+   color: #ccc; /* Light text for readability */
+   transition: background-color 0.3s; /* Smooth background color transition */
+}
+
+.color-list-entry + div:hover {
+   background-color: #3a3a3a; /* Slightly lighter on hover */
+}
+
+.menu-wrapper {
+   padding-left: 60px;
+   padding-right: 60px;
+}
+
+/* Scoped link styles within the menu section */
+.menu-wrapper a {
+   text-decoration: none; /* Remove default link styling */
+   color: inherit; /* Inherit color from parent */
+   display: block; /* Ensures the link covers the whole section */
 }
 
 .device-icon {
-   margin: 0px;
+   margin: 20px;
    width: 30%;
-   height: 30%
+   height: 30%;
 }
 </style>
 
 <img align="right" width="" height="220" class="device-icon" src="assets/images/device-orbit.png">
 
-# Orbit Quick Use Guide
+# Orbit Guide
 
-Welcome to the Vortex Orbit Quick-Use-Guide, this guide aims to get you up and running as fast as possible.
+Welcome to the Vortex Orbit Guide, this page aims to get you up and running as fast as possible.
 
 ## Buttons
 
 The orbit has two <span style="color: #00c6ff">navigation buttons</span> and a small <span style="color: #00ff00">power switch</span>.
 
 There is also a very small <span style="color: #ff0000">reset button</span> for updating the device firmware.
 
-## Accessing Menus
+## Navigating Modes
+
+Short click the <span style="color: #00c6ff">navigation buttons</span> to cycle forward or backwards through the 14 available modes.
+
+To edit a mode, navigate to it then hold the navigation button to open the menus.
+
+## Menus
+
+Use short clicks to cycle through the following menu options, long click to enter a menu.
 
-To enter the menu:
+{% raw %}
+<div class="menu-wrapper">
+<a href="randomizer_menu.html">
+  <div class="color-list-entry"><span class="rounded-box white"></span>Randomizer</div>
+</a>
 
-1. **Hold the Navigation Button:** Hold the button until the LEDs alternate white blinks.
-2. **Cycle Menus:** Use short clicks to cycle through menu options. The menu colors indicate their function:
+<a href="mode_sharing_menu.html">
+  <div class="color-list-entry"><span class="rounded-box cyan"></span>Mode Sharing</div>
+</a>
 
-    <div class="color-list-entry"><span class="rounded-box white" markdown="1"></span>[Randomizer](menu_randomizer.html)</div>
-    <div class="color-list-entry"><span class="rounded-box cyan"></span>Mode Sharing</div>  
-    <div class="color-list-entry"><span class="rounded-box purple"></span>Editor Connection</div>
-    <div class="color-list-entry"><span class="rounded-box green"></span>Color Select</div>  
-    <div class="color-list-entry"><span class="rounded-box blue"></span>Pattern Select</div>
-    <div class="color-list-entry"><span class="rounded-box yellow"></span>Global Brightness</div>
-    <div class="color-list-entry"><span class="rounded-box red"></span>Factory Reset
+<a href="color_select_menu.html">
+  <div class="color-list-entry"><span class="rounded-box green"></span>Color Select</div>
+</a>
 
+<a href="pattern_select_menu.html">
+  <div class="color-list-entry"><span class="rounded-box blue"></span>Pattern Select</div>
+</a>
 
+<a href="global_brightness_menu.html">
+  <div class="color-list-entry"><span class="rounded-box yellow"></span>Global Brightness</div>
+</a>
 
+<a href="factory_reset_menu.html">
+  <div class="color-list-entry"><span class="rounded-box red"></span>Factory Reset</div>
+</a>
+</div>
+{% endraw %}
 
 ## Selecting LEDs for Colorset/Pattern/Randomization