Add Docs links

moxon6 · moxon6 · commit 460b3300d9e2 · 2019-11-20T11:44:30.000Z
diff --git a/docs.html b/docs.html
@@ -3,14 +3,34 @@
 <head>
   <meta charset="utf-8"/>
   <title>Python bot workshop docs</title>
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+    }
+    #docs-container {
+      display: flex;
+      justify-content: center;
+      background-color: #eaedef;
+    }
+    #docs-container > * {
+      width: 50%;
+      margin: 20px;
+      padding: 10px;
+      background-color: white;
+    }
+  </style>
 </head>
 <body>
   <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
   <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>
+
+  <div id="docs-container">
+  </div>
   <script>
     const md = document.createElement('zero-md')
     md.src=document.location.hash.slice(1)
-    document.body.appendChild(md)
+    document.querySelector('#docs-container').appendChild(md)
   </script>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -45,6 +45,10 @@
       </div>
       <div class="console-panel">
          <textarea class="console" id="console" readonly autocomplete="off" cols="60"></textarea>
+         <div class="docs-links">
+            <a href="docs.html#cheatsheet.md">Cheat Sheet</a>
+            <a href="docs.html#examples.md">Examples</a>
+         </div>
       </div>
       <div class="messenger-panel">
          <div class="messenger-panel-inner">
diff --git a/styles/console.scss b/styles/console.scss
@@ -1,6 +1,9 @@
+$border-width: 2px;
+
 .console-panel {
   font-family: Consolas, monaco, monospace;
   overflow: hidden;
+  position: relative;
   .console {
     padding: 6px;
     background-color: #2f3129;
@@ -12,7 +15,25 @@
     color: #8ae234;
     overflow: auto;
     border: none;
-    border-top: 2px solid;
+    border-top: $border-width solid;
     resize: none;
   }
+  .docs-links {
+    position: absolute;
+    right: 0;
+    top: $border-width;
+    background-color: #435f7a;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    > a {
+      &:not(:last-child) {
+        padding-bottom: 5px;
+      }
+      color: white;
+      &:hover {
+        color: black;
+      }
+    }
+  }
 }
