From 6d97a7ba08165f9accab9977207c9ab5108421ae Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Fri, 12 Jul 2019 06:23:10 +0000
Subject: [PATCH] Color help background, CSS comments, show help on help

---
 EditorHelp.js | 4 ++++
 architype.css | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/EditorHelp.js b/EditorHelp.js
index 337b5a6..e5d2772 100644
--- a/EditorHelp.js
+++ b/EditorHelp.js
@@ -30,6 +30,10 @@ class EditorHelp extends EditorEntryBase {
     this.addKey('a');
     this.addText('Label');
 
+    this.addLine();
+    this.addKey('?');
+    this.addText('Help            ');
+
     this.addLine();
     this.addKey('⇧');
     this.addText('+');
diff --git a/architype.css b/architype.css
index 024bc17..c9a95d4 100644
--- a/architype.css
+++ b/architype.css
@@ -1,10 +1,12 @@
 .theme-light {
+  /* Background colors are 85% luminosity */
   --focus: #ff0000;
   --nonfocus: #eeeeee;
   --node: #c0def2;
   --group: #c0f2d5;
   --link: #ffd1b3;
   --label: #ffb3eb;
+  --help: #ffb3b3;
   --text: #000000;
   --placeholder: rgba(0,0,0,0.2);
   --outline: #323434;
@@ -19,12 +21,14 @@
 }
 
 .theme-dark {
+  /* Background colors are 10% luminosity */
   --focus: #ff0000;
   --nonfocus: #000000;
   --node: #091d2a;
   --group: #092a17;
   --link: #331400;
   --label: #330025;
+  --help: #330000;
   --text: #ffffff;
   --placeholder: rgba(255,255,255,0.2);
   --outline: #323434;
@@ -141,6 +145,7 @@ body {
   padding: 10px;
   font-size: 16px;
   flex-direction: column;
+  background-color: var(--help);
 }
 
 .editor li.help > div {