UPDATE improve responsiveness

wizardamigos · Apr 22, 2019 · 2fa4ddb · 2fa4ddb
1 parent 04a32da
commit 2fa4ddb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/bundle.js b/bundle.js
@@ -25,21 +25,34 @@ setTimeout(async () => {
   })
   document.body.appendChild(bel`<div class=${css.skilltreepage}>
     <h1 class=${css.title}> solidity skilltree </h1>
-    ${element}
+    <span class=${css.container}>
+    <span style="position: relative;">${element}</span>
+    </span>
   </div>`)
 }, 0)
 const css = csjs`
 .skilltreepage {
+  position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   height: 100vh;
   width: 100vw;
   color: white;
   background-color: #21252b;
   margin: 0;
 }
+.container {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 .title {
   color: white;
   background-color: rgba(30, 30, 30, 0.6);

diff --git a/demo/demo.js b/demo/demo.js
@@ -24,21 +24,34 @@ setTimeout(async () => {
   })
   document.body.appendChild(bel`<div class=${css.skilltreepage}>
     <h1 class=${css.title}> solidity skilltree </h1>
-    ${element}
+    <span class=${css.container}>
+    <span style="position: relative;">${element}</span>
+    </span>
   </div>`)
 }, 0)
 const css = csjs`
 .skilltreepage {
+  position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   height: 100vh;
   width: 100vw;
   color: white;
   background-color: #21252b;
   margin: 0;
 }
+.container {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 .title {
   color: white;
   background-color: rgba(30, 30, 30, 0.6);