touch up

index.html

@@ -194,14 +194,16 @@
    #version {
     position: fixed;
     top: 96vh;
-    font-size: 75%;
+    font-size: .6rem;
     background: #1a1a1a;
     color: white;
     opacity: 1;
-    padding: 10px;
+    padding: 8px;
     padding-top: 0px;
     padding-bottom: 0px;
     transition: top 0.3s;
+    border-radius: .35rem;
+    border: 1px solid #3a4816;
    }
 
    #version:hover {
@@ -295,8 +297,8 @@
       const { versions } = Pear
       process.env.WS_NO_BUFFER_UTIL = false // ws buffer-util opt-out
       versions().then(({ app, platform }) => {
-        document.querySelector('#platform-version').innerText = `Pear version: ${platform.fork}.${platform.length}.${platform.key}`
-        document.querySelector('#app-version').innerText = `App version: ${app.fork}.${app.length}.${app.key}`
+        document.querySelector('#platform-version').innerText = `Pear Runtime ${platform.fork}.${platform.length}.${platform.key}`
+        document.querySelector('#app-version').innerText = `Pear Rtm App ${app.fork}.${app.length}.${app.key}`
       })
     </script>
     <script type='module' src='./lib/devtools.js'></script>

lib/docs-viewer.js

@@ -23,6 +23,7 @@ customElements.define('docs-viewer', class extends HTMLElement {
     this.template.innerHTML = `
     <div>
       <style>
+        :host { display: block; padding-bottom: 3rem }
         ul { list-style-type: none; }
         ul li::before { content: '❥ '; margin-right: 0.5em; }
         a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; background-color: #151517 }