code styles

lib/docs-viewer.js

@@ -22,8 +22,16 @@ customElements.define('docs-viewer', class extends HTMLElement {
         a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none;  }
         #panel.light a, #panel.light a:visited, #panel.light a:active { color: #7c9735; font-weight: bold; }
         h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; }
-        code {  background: #333; color: #efeaea; padding: .25rem; }
+        code {
-        pre > code { display: block; line-height: 1.025rem; padding-left: 1em; }
+          background: #3a4816;
+          color: #efeaea;
+          padding: 0.25rem;
+          padding-top: 0.1rem;
+          padding-bottom: 0.15rem;
+          font-family: 'overpass-mono';
+          border-radius: 1px;
+        }
+        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; }

lib/system-status.js

@@ -18,6 +18,15 @@ customElements.define('pear-welcome', class extends HTMLElement {
         blockquote::before { content: "✔"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
         video { float: right; outline: 1px solid #323532; border-radius: 2px; }
         #welcome { float: left; width: calc(100% - 420px); }
+        code {
+          background: #3a4816;
+          color: #efeaea;
+          padding: 0.25rem;
+          padding-top: 0.1rem;
+          padding-bottom: 0.15rem;
+          font-family: 'overpass-mono';
+          border-radius: 1px;
+        }
       </style>
       <blockquote>
         <p> Pear is in the system PATH and ready to go .</p>
@@ -25,8 +34,8 @@ customElements.define('pear-welcome', class extends HTMLElement {
       <div id="welcome">
         <h2> Welcome... </h2>
         <p> ...to the Internet of Peers. <p>
-        <p> Pear provides the \`pear\` Command-line Interface as the primary interface for developing, sharing & maintaining unstoppable peer-to-peer applications and systems. </p>
+        <p> Pear provides the <code>pear</code> Command-line Interface as the primary interface for developing, sharing & maintaining unstoppable peer-to-peer applications and systems. </p>
-        <p> To get started, open a terminal, type \`pear\` and hit return. </p>
+        <p> To get started, open a terminal, type <code>pear</code> and hit return. </p>
       </div>
       <video width="420" height="390" autoplay muted>
         <source src="./assets/usage.mp4" type="video/mp4">
@@ -56,7 +65,15 @@ customElements.define('system-status', class extends HTMLElement {
         blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
         button { background: #151517; color: #B0D944; border: 1px solid; padding: .575em .65em; cursor: pointer; margin-top: 2.65rem; font-size: 1.25rem; }
         #tip { text-indent: 4px; margin-top: -.25rem }
-        code { padding: .25rem; }
+        code {
+          background: #3a4816;
+          color: #efeaea;
+          padding: 0.25rem;
+          padding-top: 0.1rem;
+          padding-bottom: 0.15rem;
+          font-family: 'overpass-mono';
+          border-radius: 1px;
+        }
         #tip > p { margin: 0; padding: 0}
         h1 { 
           padding: 0.5rem;

pulse.html

@@ -137,6 +137,7 @@
     header:has(~ #documentation:target) > #headin > #home {
       display: inline;
     }
+
   </style>
   <header>
     <div id="headin">