From bfd5340a76ee678256a535265ac71b7c40d62bdb Mon Sep 17 00:00:00 2001
From: Jordan Scales <scalesjordan@gmail.com>
Date: Tue, 28 Apr 2020 12:17:40 -0400
Subject: [PATCH] Add help title-bar button (#72)

* newlines

* add now.json

* add newlines

* remove now.json

* re-add now.json with version field
---
 docs/index.html.ejs | 10 ++++++++++
 icon/help.svg       |  8 ++++++++
 now.json            |  4 ++++
 style.css           |  6 ++++++
 4 files changed, 28 insertions(+)
 create mode 100644 icon/help.svg
 create mode 100644 now.json

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 6c0573d..3a0b357 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -496,6 +496,16 @@
               <button aria-label="Close"></button>
             </div>
           </div>
+
+          <br>
+
+          <div class="title-bar">
+            <div class="title-bar-text">A Helpful Bar</div>
+            <div class="title-bar-controls">
+              <button aria-label="Help"></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
         `) %>
       </div>
     </section>
diff --git a/icon/help.svg b/icon/help.svg
new file mode 100644
index 0000000..20a3fda
--- /dev/null
+++ b/icon/help.svg
@@ -0,0 +1,8 @@
+<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="1" width="2" height="2" fill="black"/>
+<rect x="1" width="4" height="1" fill="black"/>
+<rect x="4" y="1" width="2" height="2" fill="black"/>
+<rect x="3" y="3" width="2" height="1" fill="black"/>
+<rect x="2" y="4" width="2" height="2" fill="black"/>
+<rect x="2" y="7" width="2" height="2" fill="black"/>
+</svg>
diff --git a/now.json b/now.json
new file mode 100644
index 0000000..ad0e88c
--- /dev/null
+++ b/now.json
@@ -0,0 +1,4 @@
+{
+  "version": 2,
+  "public": true
+}
diff --git a/style.css b/style.css
index cba9f2d..e6c35bf 100644
--- a/style.css
+++ b/style.css
@@ -219,6 +219,12 @@ button::-moz-focus-inner {
   background-position: top 2px left 3px;
 }
 
+.title-bar-controls button[aria-label="Help"] {
+  background-image: svg-load("./icon/help.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 5px;
+}
+
 .title-bar-controls button[aria-label="Close"] {
   margin-left: 2px;
   background-image: svg-load("./icon/close.svg");