From d71d7f9edd356e6fb7b2bd3e740d08b351b68dca Mon Sep 17 00:00:00 2001
From: Daniel Dickison <daniel@bandcamp.com>
Date: Tue, 14 Feb 2023 12:39:20 -0800
Subject: [PATCH] Bit of cleanup and style tweaks

---
 docs/index.html       | 16 ++++++-------
 docs/js/DemoPanel.css | 51 +++++++++++++++++++++++++++++++++++++++++
 docs/style.css        | 53 ++++++-------------------------------------
 3 files changed, 66 insertions(+), 54 deletions(-)
 create mode 100644 docs/js/DemoPanel.css
diff --git a/docs/index.html b/docs/index.html
index a7d27cef..16ec6c6c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,7 +3,10 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
-        <link rel="stylesheet" type="text/css" href="./style.css">
+        <style>
+          @import 'style.css';
+          @import 'js/DemoPanel.css';
+        </style>
         <script type="module">
             import "https://cdn.jsdelivr.net/npm/@tko/build.reference@4.0.0-beta1.5/dist/browser.js"
             import "./js/DemoPanel.js"
@@ -41,6 +44,8 @@ <h3>Contents</h3>
             <section id="introduction">
                 <h2>Introduction</h2>
 
+                <p>TKO is a two-way binding framework for creating dynamic web UIs.</p>
+
                 <demo-panel>
                     <div id="demo-intro">
                       <h4>Hello <em>{{name}}!</em></h4>
@@ -56,8 +61,6 @@ <h4>Hello <em>{{name}}!</em></h4>
                     </script>
                 </demo-panel>
 
-                <p>TKO is a two-way binding framework for creating dynamic web UIs.</p>
-
                 <p>TKO is the successor to <a href="https://knockoutjs.com">Knockout</a>. Compared to its predecessor, TKO features some notable improvements:</p>
 
                 <ul>
@@ -208,17 +211,14 @@ <h3>➤ <code>foreach</code> with <code>as</code> option no longer creates child
             <section id="contributing">
                 <h2>Contributing</h2>
                 <p>Bug reports, pull requests, and discussions are all welcome via the <a href="https://github.com/knockout/tko" target="_blank">GitHub page</a>.</p>
-
-                <p>In fermentum et sollicitudin ac orci phasellus. Arcu risus quis varius quam quisque id. Massa id neque aliquam vestibulum morbi blandit cursus risus. Massa vitae tortor condimentum lacinia quis vel eros donec ac. Egestas maecenas pharetra convallis posuere morbi leo. Sodales ut eu sem integer vitae justo eget. Erat nam at lectus urna. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Quam pellentesque nec nam aliquam sem et. Pellentesque habitant morbi tristique senectus. At in tellus integer feugiat scelerisque varius morbi enim. Tempor orci dapibus ultrices in.
             </section>
 
             <section id="reference">
                 <h2>Reference</h2>
                 <ul>
-                    <li>link…</li>
+                    <li>Generated API docs coming soon™</li>
+                    <li><a href="https://knockoutjs.com/documentation/introduction.html" target="_blank">Knockout Reference</a> is still mostly accurate for TKO</li>
                 </ul>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit ut aliquam purus sit amet. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Ultrices vitae auctor eu augue ut lectus. Sed nisi lacus sed viverra tellus. Nulla malesuada pellentesque elit eget gravida cum sociis. Quis varius quam quisque id diam vel quam elementum. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Metus aliquam eleifend mi in nulla posuere sollicitudin. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Nisi lacus sed viverra tellus in. Ultrices sagittis orci a scelerisque purus semper eget. Amet aliquam id diam maecenas ultricies. Viverra orci sagittis eu volutpat odio facilisis mauris sit. Rutrum quisque non tellus orci ac. At varius vel pharetra vel turpis nunc eget. Ac odio tempor orci dapibus ultrices in iaculis nunc. Porttitor lacus luctus accumsan tortor posuere ac ut consequat semper.
-
             </section>
         </main>
         <footer>
diff --git a/docs/js/DemoPanel.css b/docs/js/DemoPanel.css
new file mode 100644
index 00000000..57ff3e28
--- /dev/null
+++ b/docs/js/DemoPanel.css
@@ -0,0 +1,51 @@
+demo-panel {
+    width: 100%;
+    margin-top: 0.5rem;
+    border: 1px solid var(--border-color);
+    display: grid;
+    grid-template:
+        "html-hd    js-hd   render-hd" max-content
+        "html-edit  js-edit render   " 10rem
+      /  1fr        1fr     1fr       ;
+    align-items: stretch;
+    justify-items: stretch;
+}
+demo-panel > textarea {
+    font-family: Source Code Variable, Source Code Pro, Inconsolas, ui-monospace, monospace;
+    white-space: pre;
+    background: var(--code-bg);
+    color: var(--code-fg);
+    font-size: 0.75rem;
+    border: none;
+    padding: 0.5rem;
+    margin: 0;
+}
+demo-panel > h3 {
+    text-align: center;
+    font-size: 1rem;
+}
+demo-panel > h3.html {
+    grid-area: html-hd;
+    background: var(--code-bg);
+    color: var(--code-fg);
+}
+demo-panel > h3.js {
+    grid-area: js-hd;
+    background: var(--code-bg);
+    color: var(--code-fg);
+}
+demo-panel > h3.render {
+    grid-area: render-hd;
+}
+demo-panel > textarea.html {
+    grid-area: html-edit;
+}
+demo-panel > textarea.js {
+    grid-area: js-edit;
+}
+demo-panel > div.render {
+    grid-area: render;
+    overflow: scroll;
+    padding: 0.5rem;
+    font-size: 0.875rem;
+}
diff --git a/docs/style.css b/docs/style.css
index f5bda3ee..f9197bc8 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -8,7 +8,7 @@
     --border-color: rgba(0, 0, 0, 0.25);
 
     --code-bg: #333;
-    --code-fg: #bcb;
+    --code-fg: #c5ddd3;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -39,6 +39,10 @@ h1, h2, h3, h4, h5, h6 {
     margin: 0;
 }
 
+p {
+    margin: 0.5rem 0;
+}
+
 a:link, a:visited {
     color: var(--link-color);
 }
@@ -56,6 +60,7 @@ code {
 pre {
     background: var(--code-bg);
     color: var(--code-fg);
+    font-size: 0.75rem;
     padding: 0 1rem;
     overflow: scroll;
 }
@@ -80,7 +85,7 @@ body {
         "hd   hd   hd   hd  "
         "l    nav  main r   "
         "ft   ft   ft   ft  ";
-    grid-template-columns: 1fr [left] 13rem [main] minmax(15rem, 40rem) [right] 1fr;
+    grid-template-columns: 1fr [left] 13rem [main] minmax(15rem, 50rem) [right] 1fr;
     grid-template-rows: max-content 1fr max-content;
     min-height: 100vh;
 }
@@ -121,50 +126,6 @@ main > section {
 }
 
 
-demo-panel {
-    width: 100%;
-/*    border: 3px solid var(--border-color);*/
-    display: grid;
-    grid-template:
-        "html-hd    js-hd   render-hd" max-content
-        "html-edit  js-edit render   " 10rem
-      /  1fr        1fr     1fr       ;
-    align-items: stretch;
-    justify-items: stretch;
-    column-gap: 0.5rem;
-}
-demo-panel > textarea {
-    font-family: monospace;
-    white-space: pre;
-    background: var(--code-bg);
-    color: var(--code-fg);
-    border: 1px solid;
-    padding: 0.5rem;
-}
-demo-panel > h3.html {
-    grid-area: html-hd;
-}
-demo-panel > h3.js {
-    grid-area: js-hd;
-}
-demo-panel > h3.render {
-    grid-area: render-hd;
-}
-demo-panel > textarea.html {
-    grid-area: html-edit;
-}
-demo-panel > textarea.js {
-    grid-area: js-edit;
-}
-demo-panel > div.render {
-    grid-area: render;
-    overflow: scroll;
-    border: solid 2px var(--border-color);
-    border-radius: 0.5rem;
-}
-
-
-
 header {
     grid-area: hd;
 }
