index.html and styles.css Update

Author: YYura

packages/runtime/index.html

@@ -197,6 +197,14 @@
         });
       }
     };
+
+
+    function copyCode(num) {
+      const shadowContainer = document.getElementById('container').shadowRoot;
+      const codes = shadowContainer.querySelectorAll('code');
+      
+      window.navigator.clipboard.writeText(codes[num].textContent);
+    }
   </script>
 </head>
 
@@ -206,7 +214,7 @@
     <canvas></canvas>
   </div>
   <div class="container">
-    <zero-md
+    <zero-md id="container"
       manual-render="true">
       <template>
         <link rel="stylesheet"
@@ -218,22 +226,74 @@
             contain: content;
             box-sizing: border-box;
             min-width: 200px;
-            max-width: 980px;
+            max-width: 850px;
             margin: 0 auto;
             padding: 0px;
             width: calc(50% - 20px * 2);
             height: 100vh;
             overflow: scroll;
+            
           }
 
           .markdown-body {
             height: inherit;
+            font-size: small;
+          }
+
+          h1{
+            color: white;
+            padding: 20px 20px;
+          }
+
+          ol>li{
+            margin-left: 30px;
+            font-size: 1.2em;
+          }
+
+          pre{
+            width: 80%;
+            margin-left: 60px;
+            border: 1px solid rgb(124, 124, 124);
+          }
+          
+          p{
+            margin-left: 40px;
+          }
+
+          strong{
+            color: rgb(38, 114, 255);
+          }
+
+          img{
+            margin-left: 20px;
+            width: 90%
+          }
+
+          span{
+            color: rgb(86, 117, 255);
+          }
+          
+          button{
+            position: absolute;
+            margin-left: 78%;
+            margin-top: 20px;
+            width: 45px;
+            height: 30px;
+            background-color: rgb(0, 89, 255);
+            border: 1px solid rgb(0, 89, 255);
+            border-radius: 0.4em;
+          }
+
+          button:hover{
+            background-color: rgb(0, 58, 167);
+            border: rgb(0, 58, 167);
           }
+        
         </style>
       </template>
     </zero-md>
-    <div class="xterminal" style="width: calc(50% + 16px * 2); height: calc(100% - 18px * 2 );">
+    <div class="xterminal" style="width: calc(60% + 16px * 2); height: calc(100% - 18px * 2 );">
       <div id="terminal"></div>
     </div>
   </div>
-</body>
+</body>

packages/runtime/styles.css

@@ -1,7 +1,6 @@
 body {
   margin: 0;
   padding: 0;
-  background-color: #252735;
 }
 
 .container {
@@ -10,6 +9,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: #1a1b20;
 }
 
 input[type="button"] {