added more helpful info into help app

NovaAppsInc · NovaAppsInc · commit 6f20c4e2c84f · 2023-01-01T03:44:49.000-06:00
diff --git a/static/help.html b/static/help.html
@@ -11,7 +11,8 @@
 <body>
     <!-- <h5 style="width: 35em;margin-bottom: 20px;font-weight: bolder;color: #ff7c7c;font-size: 17px;text-align: center;"></h2> -->
     <div class="commands">
-        <h3>Keybinds</h3>
+        <h2 category-title>Keybinds</h2>
+        <h4>App opening keybinds</h4>
         <command>
             <code>CTRL + ALT + H</code> Open this page
         </command>
@@ -22,24 +23,25 @@ <h3>Keybinds</h3>
             <code>CTRL + ALT + B</code> Open new Terbium browser
         </command>
         <command>
-            <code>CTRL + ALT + C</code> Close all windows
+            <code>CTRL + ALT + P</code> Open the color picker
         </command>
         <command>
-            <code>CTRL + ALT + X</code> Close the focused window
+            <code>CTRL + ALT + T</code> Open the terminal
         </command>
+        <h4>Window controlling keybinds</h4>
         <command>
-            <code>CTRL + ALT + P</code> Open the color picker
+            <code>CTRL + ALT + C</code> Close all windows
         </command>
         <command>
-            <code>CTRL + ALT + T</code> Open the terminal
+            <code>CTRL + ALT + X</code> Close the focused window
         </command>
         <command>
             <code>CTRL + ALT + N</code> Minimize the focused window
         </command>
         <command>
             <code>CTRL + ALT + Q</code> Reload the focused window
         </command>
-        <h3>Url Shortcuts</h3>
+        <h2 category-title>Url Shortcuts</h2>
         <command>
             <code>https://terbium.ga/?app=color</code> open Terbium color picker
         </command>
diff --git a/static/styles/help.css b/static/styles/help.css
@@ -16,6 +16,7 @@
 [data-theme="dark"] {
     --body: #1c1c1c;
     --color: white;
+    --category-title-color: #41bc5d;
     --userselect-background: #696969;
     --userselect-color: #1d1d1d;
 
@@ -32,6 +33,7 @@
 [data-theme="light"] {
     --body: #686868;
     --color: white;
+    --category-title-color: #41bc5d;
     --userselect-background: #c4c4c4;
     --userselect-color: #666;
 
@@ -48,6 +50,7 @@
 [data-theme="night"] {
     --body: #181446;
     --color: #ffe688;
+    --category-title-color: #ffe688;
     --userselect-background: #32299b;
     --userselect-color: #fff7a5;
 
@@ -64,6 +67,7 @@
 [data-theme="fracital"] {
     --body: #222;
     --color: #ff40f7;
+    --category-title-color: #ff40f7;
     --userselect-background: #575757;
     --userselect-color: #ff40f7;
     
@@ -136,4 +140,8 @@ code {
     border: 1px solid var(--command-border);
     padding: 3px 6px;
     border-radius: 6px;
+}
+
+[category-title] {
+    color: var(--category-title-color);
 }
