Bit of cleanup and style tweaks

knockout · Feb 14, 2023 · d71d7f9 · d71d7f9
1 parent 8a5f79c
commit d71d7f9
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 54 deletions.
diff --git 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/[email protected]/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
@@ -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
@@ -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;
 }