update

zumerlab · Oct 23, 2023 · 4a0df14 · 4a0df14
1 parent 1e54a1d
commit 4a0df14
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 51 deletions.
diff --git a/assets/css/orbit-base.min.css b/assets/css/orbit-base.min.css
diff --git a/assets/css/orbit-base.min.css.map b/assets/css/orbit-base.min.css.map
diff --git a/assets/css/orbit.min.css b/assets/css/orbit.min.css
diff --git a/assets/css/orbit.min.css.map b/assets/css/orbit.min.css.map
diff --git a/examples/docs/container.html b/examples/docs/container.html
@@ -3,61 +3,93 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="../../public/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="../../assets/css/orbit-base.min.css" type="text/css" defer/>
     <!-- <link rel="stylesheet" href="../../assets/css/orbit-theme.min.css" type="text/css" defer/> -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/themes/material-palenight.css" type="text/css" defer/>
     <title>Orbit - o-container</title>
+<script type="module">
+ import playgroundElements from 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'
+ </script>
+
 <style>
-    .o-orbiter {
-        border: 7px solid mediumaquamarine
+    .example {
+        box-sizing: border-box;
+      width: 100%;
+      border: 1px solid #ccc;
+      overflow: hidden;
+      border-radius: 10px;
     }
-    .o-container {
-        border: 0.2px solid gray;
+    .example > playground-preview * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
     }
-    .one {
-        border: 2px solid;
-  padding: 20px; 
-
-
+    .example.code {
+        background-color: rgb(41, 45, 62);
     }
-
-    .o-container-query-enabled {
-        box-sizing: border-box;
-        resize: both;
-         overflow: auto;
+    .example.code > playground-file-editor {
+     margin:8px;
+      height: fit-content;
+
+    }
+    .example > ::part(preview-toolbar) {
+      display: none;
     }
+  </style>
+
+</head>
+<body>
+<playground-project id="project1"  >   
+<script type="sample/html" filename="index.html">
+<!-- playground-hide -->
+<!doctype html>
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<style>
+@import url("http://localhost:5500/assets/css/orbit-base.min.css");
+body {
+margin: 0;
+padding: 0;
+}
+.o-orbiter {
+border: 7px solid mediumaquamarine
+}
+.o-container {
+border: 0.2px solid gray;
+}
+.o-container-query-enabled {
+box-sizing: border-box;
+resize: both;
+overflow: auto;
+}
 </style>
-<script type="module">
- import playgroundElements from 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'
- </script>
 </head>
 <body>
-
-    <playground-ide editable-file-system line-numbers resizable>
-        <script type="sample/html" filename="index.html">
-          <!doctype html>
-          <body>
-            Hello
-            <script type="module" src="./index.js">&lt;/script>
-          </body>
-        </script>
-
-        <script type="sample/ts" filename="index.ts">
-          document.body.appendChild(document.createTextNode("World!"))
-        </script>
-      </playground-ide>
-   <!--  <div class="o-container-query-enabled">
-        <section  class="o-container one ">
-            one - enable relative resize?
-            <ul  class="o-orbit">
-                <li class="o-orbiter"></li>
-                <li class="o-orbiter"></li>
-                <li class="o-orbiter"></li>
-                <li class="o-orbiter"></li>
-                <li class="o-orbiter"></li>
-            </ul>
-        </section>
-    </div>
-    -->
-
+<!-- playground-hide-end -->
+<section class="o-container">
+  <ul  class="o-orbit">
+    <li class="o-orbiter"></li>
+    <li class="o-orbiter"></li>
+    <li class="o-orbiter"></li>
+    <li class="o-orbiter"></li>
+    <li class="o-orbiter"></li>
+  </ul>
+</section>
+<!-- playground-hide -->
+</body>
+</script>    
+</playground-project>
+<div class="example">
+  <playground-preview project="project1"> </playground-preview>
+</div>   
+<br>
+<div class="example code"> 
+<playground-file-editor  project="project1" filename="index.html"
+   readonly class="playground-theme-material-palenight"
+></playground-file-editor>
+</div>   
 </body>
 </html>
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/base/_reset.scss b/src/base/_reset.scss
@@ -1,5 +1,5 @@
 /* Basic reset for each Orbit container */
-.o-container * {
+.o-container, .o-container * {
   box-sizing: border-box;
   padding: 0;
   margin: 0;

diff --git a/src/components/_container-base.scss b/src/components/_container-base.scss
@@ -1,10 +1,10 @@
 /* container */
 
 .o-container {
+  position: absolute;
   display: grid;
   width: 100%;
   min-height: 100%;
   place-items: center;
-
 }