From d3335cfb02bd6f534d5fe926a5b6832e69dcade0 Mon Sep 17 00:00:00 2001
From: dmc <dave@holepunch.to>
Date: Tue, 30 Jan 2024 23:03:46 +0100
Subject: [PATCH] tweaks

---
 lib/devtools.js | 50 +++++++++++++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/lib/devtools.js b/lib/devtools.js
index a935e19..d6b8df0 100644
--- a/lib/devtools.js
+++ b/lib/devtools.js
@@ -80,38 +80,48 @@ customElements.define('developer-tooling', class extends HTMLElement {
             font-size: .9em;
           }
           pre > code { display: block; line-height: 1.025rem; padding-left: 1em; background: #181e19 }
+          h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+          h1 { font-size: 1.6rem; }
+          h2 { font-size: 1.4rem; }
+          h3 { font-size: 1.2rem; }
+          h4 { font-size: 1rem; }
+          h5 { font-size: .8rem; }
+          h6 { font-size: .7rem; }
+          h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; }
         </style>
 
         <div>
           <h1>Developer Tooling</h1>
-          <div id=remote-inspect-explain>
-            <h2>Remotely inspect Pear applications.</h2>
-          
-            <p> Some application setup is required to enable remote debugging </p>
-            <p> First install the <code>pear-inspect</code> module into the application </p>
-            <pre><code>npm install pear-inspect</code></pre>
-            <p> Then add the following JavaScript code to the application, at the top: </p>
+          <div>
+            <div id=remote-inspect-explain>
+              <h2>Remotely inspect Pear applications.</h2>
+            
+              <p> Some application setup is required to enable remote debugging </p>
+              <p> Install the <code>pear-inspect</code> module into the application </p>
+              <pre><code>npm install pear-inspect</code></pre>
+              <p> Add the following code to the application, before any other code: </p>
 
-            <pre><code>if (Pear.config.dev) {
+              <pre><code>if (Pear.config.dev) {
   const { Inspector } = await import('pear-inspect')
   const inpector = await new Inspector()
   const key = await inpector.enable()
   console.log('Pear Inspector key:', key.toString('hex'))
 }</code></pre>
 
-            <p>When the application is opened in development mode the inspection key will be logged.</p>
-            <p>Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target</p>
+              <p>When the application is opened in development mode the inspection key will be logged.</p>
+              <p>Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target</p>
+              </div>
+            <div id=remote-inspect>
+              <div>
+                <form id="add-key-form">
+                  <input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>
+                  <p id="add-key-error"></p>
+                </form>
+              </div>
+              <h2>Apps</h2>
+              <h3 id="no-apps">No apps added. Add an inspect key to start debugging.</h3>
+              <div id="apps"></div>
             </div>
-          <div id=remote-inspect>
-            <div>
-              <form id="add-key-form">
-                <input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>
-                <p id="add-key-error"></p>
-              </form>
-            </div>
-            <h2>Apps</h2>
-            <h3 id="no-apps">No apps added. Add an inspect key to start debugging.</h3>
-            <div id="apps"></div>
           </div>
       </div>
     `